Single Page Applications are becoming more and more common as web developers adopt asynchronous technologies such as AJAX, Node.JS and Knockout. One of the challenges of adding a web analytics solution such as Google Analytics to a Single Page Application, is the browser location (site address) does not change as a user performs actions on the site. With Google Analytics, you can emulate a pageview by explicitly calling the _trackPageview function passing in a virtual page path (e.g., /home).
Now let’s say you want to implement Google Tag Manager to take advantage of the flexibility of being able to fire Google Analytics as well as some AdWords conversion tracking code as actions take place on your Single Page Application. Because the browser’s location bar doesn’t change, the traditional Google Analytics setup in Google Tag Manager won’t cut it. You need to leverage the event macro to tell Google Tag Manager that a ‘pageview’ has occurred. Let’s get to it.
In your Google Tag Manager container, add a new rule called ‘virtual pageview’ and set the event macro {{event}} equals ‘pageview’. Don’t forget to click Save.
Now we’ll create a new Google Tag Manager macro that watches for a virtual url to appear in the data layer. Note: If you aren’t sure what the data layer is or how to implement one, take a look at Justin Cutroni’s Data Layer post as well as the Google Tag Manager data layer help page.
- Enter a descriptive name for the macro such as ‘virtual url’
- Set the Macro Type to ‘Data Layer Variable’
- Set the Data Layer Variable Name to ‘virtualUrl’ (Note: this is the variable name you’ll need to specify in the Data Layer for the URL you want to track in Google Analytics)
- Click Save
It’s time to create our Google Analytics tag to fire when a new virtual pageview occurs.
- Enter a descriptive name for the Tag
- Choose a Tag Type of ‘Google Analytics’
- Enter your GA Profile ID
- Set the Track Type to ‘Page View’
- Expand Basic Configuration
- Check the Virtual Page Path box
- Click the +{{macro}} button
- Select the virtual url macro you created earlier
- Add a firing rule for the tag and choose the ‘virtual pageview’ rule created earlier
- Click Save
Now to enable the new tag along with the macro and firing rule, you’ll need to create a version of the tag container and publish it. Now it’s time to populate the data layer with a virtual url when a user changes the view on our single page application. This might look something like:
<html> <head> ... <script> dataLayer = []; </script> <script> function loadProductDetails(productIdentifier) {
dataLayer.push({ 'event':'pageview', 'virtualUrl':'/product/'+productIdentifier });
// code to load product details and display to user } </script> </head> <body> <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-3VLTP" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-3VLTP');</script> <!-- End Google Tag Manager --> ... <a onclick="loadProductDetails('nexus7');">Nexus 7</a> ... </body> </html>
Now when a user clicks to view the the product details for a Nexus 7, the loadProductDetails function fires and pushes a new item into the data layer. Google Tag Manager is watching the data layer and fires the ‘virtual pageview’ rule which triggers the Google Analytics Virtual Pageview tag passing in a virtual URL of ‘/product/nexus7’. (‘nexus7’ is the productIdentifer parameter passed into the loadProductDetails function.)
Verify it’s working by viewing the Real-time Analytics reports for your GA profile. You should see the ‘/product/nexus7’ pageview listed under the ‘Top Active Pages’.
Have questions or comments? Get in touch with me on Google+.
Comments on this entry are closed.