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.

This article applies to Border, Julia, Lens, Noah, Pile, and Timber as they share the same underlying structure.

Updated on June 2, 2017

Was this article helpful?