Enable google analytics for single page site with

Question

I've read the similar questions, but my question is slightly different.

I am implementing a single page registration processing page for a site using Kendo UI. The site has 4 pages which was generated dynamically when user clicks menu tabs. For example, when user clicks tab1 on the menu, then tab_1 would be injected into app_container container.

templates as below:

<div id="app_container"></div>
<script id="tab_1" type="text/x-kendo-template">
//first page
</script>
<script id="tab_2" type="text/x-kendo-template">
//second page
</script>
<script id="tab_3" type="text/x-kendo-template">
//third page
</script>
<script id="tab_4" type="text/x-kendo-template">
//fourth page
</script>

The page is under the domain: www.xxxxxxxx.com/register.html.

when user clicks the tabs in menu, then the http link address changed to this: www.xxxxxxxx.com/register.html#/p1

www.xxxxxxxx.com/register.html#/p2

www.xxxxxxxx.com/register.html#/p3

www.xxxxxxxx.com/register.html#/p4

I've grabbed the code from GA:

<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-1', 'xxxxxxxx.com');
  ga('send', 'pageview');

</script>

1) Question1, as I just only like to track this registration page, I've read google's documentation, developers.google.com/analytics,will this codes work?

ga('send', 'pageview', '/register.html');

2) Question2, how to enable GA to get data for 4 different tab pages? Do I have to modify onlick actions to track the event? or just simple track the anchor tag? I've read something from Tracking Hash URLs, will this codes work for my situation? As it may take some time to show analystic, can't test it now:

_gaq.push(['_trackPageview', "/" + window.location.hash]);

where shall I put this line of code to if it is working for this single page application?

Answer 1

Answer 1: Yes this will work perfectly fine: ga('send', 'pageview', '/register.html');

You don't need the 3rd parameter if they are on the page where the code is being executed. It will automatically grab the current page where the code is being ran from if the 3rd parameter is undefined. But than this parameter allows you to set the page yourself, which could be useful if you need to send a pageview to a different page other than the page that the code is being executed on.

change to 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-XXXXXXX-1', 'xxxxxxxx.com');
  ga('set', 'page', '/register.html');
  ga('send', 'pageview');
</script>

And in each tabs click event, add the corresponding code to track which tabs are clicked:

Tab 1 click event: ga('send', 'event', 'tab1', 'clicked');

Tab 2 click event: ga('send', 'event', 'tab2', 'clicked');

Tab 3 click event: ga('send', 'event', 'tab3', 'clicked');

Tab 4 click event: ga('send', 'event', 'tab4', 'clicked');

Source