Using Google Analytics for Ajax Powered Themes

Being based on an AJAX pow­ered Word­Press theme, your web­site is con­sid­ered by Google Ana­lyt­ics to be more like an appli­ca­tion and it’s not pos­si­ble to use the default JavaScript track­ing snip­pet to track your vis­i­tors.

There is a new offi­cial library released by Google called Auto­Track which help you exact­ly in this sit­u­a­tion.

To install auto­track to your site, you have to do the fol­low­ing things:

  1. Load the autotrack.js script file on your page (you can down­load it from here or load it via CDN as exem­pli­fied below).
  2. Update your track­ing snip­pet to require the var­i­ous auto­track plu­g­ins you want to use on the track­er.
  3. Insert the new track­ing code into your web­site.

Step 1 — Update your GA Tracking Snippet

If your site is cur­rent­ly using the default JavaScript track­ing snip­pet, you can mod­i­fy it to some­thing like this:

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');

// Replace the following lines with the plugins you want to use.
ga('require', 'eventTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'urlChangeTracker');

ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/autotrack/2.3.2/autotrack.js"></script>

You’ll have to make the fol­low­ing mod­i­fi­ca­tions to the above code to cus­tomize auto­track to your needs:

  • Replace UA-XXXXX-Y with your track­ing ID
  • Replace the sam­ple list of plu­g­ins with the ones you want to use.
  • (option­al) Replace the path to autotrack.js with the actu­al loca­tion of the autotrack.js file host­ed on your serv­er.

Step 2 — Insert the Snippet into your Website

To insert the above code into your web­site, we rec­om­mend the free Sim­ple Cus­tom CSS and JS plu­g­in. Once you install it, go to Cus­tom CSS & JS → Add Cus­tom HTML page, paste the above code and make sure to check the “Foot­er” place­ment option:

Click above to see the video.
Updated on June 2, 2017

Was this article helpful?

Related Articles