AdWords is now Google Ads. Our new name reflects the full range of advertising options we offer across Search, Display, YouTube, and more. Learn more

Analytics
4.4K members online now
4.4K members online now
Learn how to set up goals and Ecommerce tracking, verify accuracy of attribution traffic sources, and discuss funnel visualization, Multi-Channel Funnels, the Goal Flow Report, and Enhanced Ecommerce
 
Guide Me
star_border
Reply

How to Track Conversions on Single Page Application Website

[ Edited ]
Follower ✭ ☆ ☆
# 1
Follower ✭ ☆ ☆

Hi All,

 

I have an issue with my SPA website conversions tracking. I have set up GA code correctly but my conversions are not matching. Then, when I Googled I came to know we need to set up GA code in a different manner when compared with other websites conversion tracking.

 

We have two goal conversion pages and both those pages are dynamic goal conversion pages. So, I want to know does the below code help me in tracking those conversion?

 

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
ga('create', 'UA-xxxxxxx-x', 'auto');
        ga('set', 'page', '/thankyou');
        ga('set', 'page', '/thankyou1');
ga('send', 'pageview');
</script>
 
Both the thank you conversion pages will be added with dynamic parameters like ?aswes.
 
Kindly, help me on this
1 Expert replyverified_user
1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by topic author SPrabhu f
May 2016

Re: How to Track Conversions on Single Page Application Website

Top Contributor
# 6
Top Contributor

Hi,

 

Your site is a single page application, so you need to load the analytics.js script only once.

 

So to track the initial page load you need:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxx-x', 'auto');
ga('send', 'pageview');
</script>

Then

Page 1 - /thankyou

<script>
ga('set', 'page', '/thankyou');
ga('send', 'pageview');
</script>

Page 2 - /thankyou1

<script>
ga('set', 'page', '/thankyou1');
ga('send', 'pageview');
</script>

You don't need to load analytics.js and to create the tracker again as you are not moving to another page, the new content is loaded dynamically.


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

View solution in original post

Re: How to Track Conversions on Single Page Application Website

[ Edited ]
Top Contributor
# 2
Top Contributor

Hi,

The problem is that the second set command overwrites the first one, so your code will only send a pageview for /thankyou1.

You need to track the virtual pageviews as the new content is dynamically loaded.

After setting the new page value, you need to send the pageview to GA like:

 

/thankyou loaded
<script>
ga('set', 'page', '/thankyou');
ga('send', 'pageview');
</script>

/thankyou1 loaded
<script>
ga('set', 'page', '/thankyou1');
ga('send', 'pageview');
</script>


https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications#ov...

Let me know if you have questions


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

Re: How to Track Conversions on Single Page Application Website

[ Edited ]
Follower ✭ ☆ ☆
# 3
Follower ✭ ☆ ☆

Hi Arnold,

Thanks for your reply. So, I should customize the code like the below

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxx-x', 'auto');
ga('set', 'page', '/thankyou');
ga('send', 'pageview');
ga('set', 'page', '/thankyou1');
ga('send', 'pageview');
</script>

Re: How to Track Conversions on Single Page Application Website

Top Contributor
# 4
Top Contributor
Hi,

No, you need to add the set/send command to your code which is dynamically loaded.
Use the default tracking code for the initial page load and the set/send snippets for each subsequent page loads.

Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

Re: How to Track Conversions on Single Page Application Website

[ Edited ]
Follower ✭ ☆ ☆
# 5
Follower ✭ ☆ ☆

Arnold,

Now I understood, I need to add the below codes on

Page 1 - /thankyou

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxx-x', 'auto');
ga('set', 'page', '/thankyou');
ga('send', 'pageview');
</script>

Page 2 - /thankyou1

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxx-x', 'auto');
ga('set', 'page', '/thankyou1');
ga('send', 'pageview');
</script>

Marked as Best Answer.
Solution
Accepted by topic author SPrabhu f
May 2016

Re: How to Track Conversions on Single Page Application Website

Top Contributor
# 6
Top Contributor

Hi,

 

Your site is a single page application, so you need to load the analytics.js script only once.

 

So to track the initial page load you need:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxx-x', 'auto');
ga('send', 'pageview');
</script>

Then

Page 1 - /thankyou

<script>
ga('set', 'page', '/thankyou');
ga('send', 'pageview');
</script>

Page 2 - /thankyou1

<script>
ga('set', 'page', '/thankyou1');
ga('send', 'pageview');
</script>

You don't need to load analytics.js and to create the tracker again as you are not moving to another page, the new content is loaded dynamically.


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

Re: How to Track Conversions on Single Page Application Website

Follower ✭ ☆ ☆
# 7
Follower ✭ ☆ ☆
Thanks for brief reply Arnold