Analytics
3.8K members online now
3.8K members online now
Dive into multiple domain (Cross/Sub) tracking, implementing Ecommerce and Enhanced Ecommerce, setting up Event tracking, and Universal Analytics code.
 
Guide Me
star_border
Reply

Tracking Single Page App With Multiple Sub-Pages

[ Edited ]
Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

I have a simple (not a full blown application, just content delivery) single page application (SPA) that is designed to work like this. If the user clicks a link and the user has javascript, the page is loaded with AJAX, else, a static version of the page is provided and the page refreshes. The dynamic version of the page and the static version of the page are identical in appearance.

 

In addition, the website's home page splits into four different categories each meant for a  different target audience. I want analytics that works as if there were a separate tracker on each dynamically loaded page of content. In addition, I want separate analytic reports for each category in the website.

 

Say that the homepage originally had a tracker like this....

 

<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-71953745-1', 'auto');
ga('send', 'pageview');
</script>

 

For each time a page is dynamically loaded, I would call

ga('set', 'page', '/dynamicPage1');
ga('send', 'pageview', '/dynamicPage1');

 or

ga('set', 'page', '/dynamicPage2');
ga('send', 'pageview', '/dynamicPage2');

or

ga('set', 'page', '/dynamicPage3');
ga('send', 'pageview', '/dynamicPage3');

 

 etc.

 

In addition, I call:

<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-71953745-1', 'auto');
</script>

 

only once, when the javascript (jquery, etc.) is first loaded. I'm not counting users who don't have javascript. For those who do, I'm calling the above once and then I'm calling the various ga set/sends calls once for each <a href onclick> click.

 

Is this the right way to do it and how do I get separate analytics for each individual sub-page?

1 Expert replyverified_user

Re: Tracking Single Page App With Multiple Sub-Pages

Top Contributor
# 2
Top Contributor
Hi John,

you need to see it as a 2 part code.

1st part is to create the tracker or trackers if you need multiple instances available depending on when these are needed.
One of the options would be to just create all 4 of them at once and send to each one of the tracker when the send is needed such as:
&lt;script&gt;
(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-XXXXX-1', 'auto', 'trackerA');
ga('create', 'UA-XXXXX-2', 'auto', 'trackerB');
ga('create', 'UA-XXXXX-3', 'auto', 'trackerC');
ga('create', 'UA-XXXXX-4', 'auto', 'trackerD');
&lt;/script&gt;

Once the trackers are created - you have the ability to send page to each of the trackers:
&lt;script&gt;
ga('trackerA.send', 'pageview', '/dynamicPage3');
ga('trackerB.send', 'pageview', '/dynamicPage3'); // if you want to send it to an additional tracker
&lt;/script&gt;


Hope this helps!

Kind regards,
Zorin
Web analyst @ escapestudio.net