{"id":4373,"date":"2020-06-02T09:58:30","date_gmt":"2020-06-02T06:58:30","guid":{"rendered":"https:\/\/trackingchef.com\/?p=4373"},"modified":"2020-12-14T14:57:49","modified_gmt":"2020-12-14T11:57:49","slug":"generic-pageview-tracking-for-single-page-applications-spa-using-google-tag-manager","status":"publish","type":"post","link":"https:\/\/trackingchef.com\/google-analytics\/generic-pageview-tracking-for-single-page-applications-spa-using-google-tag-manager\/","title":{"rendered":"Generic Pageview tracking for Single Page Applications (SPA) using Google Tag Manager"},"content":{"rendered":"\n

Whoa, I think this one easily ranks for both longest and most boring post title I’ve written. But heck, it’s a super valuable post \ud83e\udd37\ud83c\udffb\u200d\u2642\ufe0f<\/p>\n\n\n\n

When working with clients that use a modern development framework such as Angular or React, standard tracking methods just don’t work. Similar issues happen when working with Progressive Web Apps (PWA).<\/p>\n\n\n\n

These frameworks use a mechanism called Single Page Applications (SPA) that effectively loads only a single “page” when visiting a site. Additional pages and content are loaded in a manner that only loads the relevant content on the page, without executing a full page load.<\/p>\n\n\n\n

As a result, the Google Tag Manager script loads once and there aren’t additional Page Load events to trigger new pageviews beyond the first.<\/p>\n\n\n\n

GTM has a built-in solution to support this, with the initial pageview triggered from a page load event, and additional pages triggered using the History Change event.<\/p>\n\n\n\n

While this solution can work to some extent, I prefer to proactively have the developers trigger a pageview event with accurate data. This provides far more reliable data for analysis.<\/p>\n\n\n\n

To simplify the setup, I usually create a generic set of a Custom Event and Data Layer Variables that can be reused across any platform I want to track. This also enables me to add additional platforms down the line without altering the current GTM setup.<\/p>\n\n\n\n

Let’s break it down<\/h2>\n\n\n\n

Custom event<\/h3>\n\n\n\n

The first step is creating a Custom Event that will be used as a Trigger. I like to name this event ‘pageview’, but it can be named anything you like. The important thing is to be consistent in its naming across whichever events you trigger.<\/p>\n\n\n\n

To create the trigger, navigate to the Triggers page in GTM and click “New.<\/p>\n\n\n\n

Select the trigger type is ‘Custom Event’ and set the Event name to ‘pageview’. The trigger should fire on all custom events.<\/p>\n\n\n\n

\"\"
Setting up the Custom Event<\/figcaption><\/figure>\n\n\n\n

Data Layer Variables<\/h3>\n\n\n\n

To pass the full data of the pageview, I ask the developers to explicitly pass these values:<\/p>\n\n\n\n

  1. Page Route, e.g. \/contact-us<\/li>
  2. Page Title, e.g. Contact Us<\/li><\/ol>\n\n\n\n

    To pass the data I create two Data Layer Variables (DLV). To create the DLVs, navigate to the Variables page in GTM and under the User-Defined Variables click New.<\/p>\n\n\n\n

    Select the variable type is ‘Data Layer Variable’ and set the Data Layer Variable name to ‘pagePath’. Save the variable and repeat for pageTitle.<\/p>\n\n\n\n

    \"\"
    Setting up the Data Layer Variables<\/figcaption><\/figure>\n\n\n\n

    The reason for writing ‘pagePath’ instead of ‘page path’ is simply because of standard JS naming conventions. It will work just as well written in either form.<\/p>\n\n\n\n

    Creating a Google Analytics pageview<\/h2>\n\n\n\n

    Now that we have the Custom Event and DLVs ready, we can create our Google Analytics pageview.<\/p>\n\n\n\n

    Navigate to the Tags page in GTM and click New. Select the Tag Type ‘Google Analytics: Universal Analytics’ and set the Track Type to ‘Pageview’.<\/p>\n\n\n\n

    Make sure you add Google Analytics Settings to the tag.<\/p>\n\n\n\n

    You can now add the DLVs you created to populate the relevant values in the Google Analytics tag. If your entire site is a SPA\/PWA, you can set this on the Google Analytics settings variable level.<\/p>\n\n\n\n

    Alternatively, you can set this on the tag level by checking the ‘Enable overriding settings in this tag’ box.<\/p>\n\n\n\n

    Under Field name add ‘page’ and set the value to ‘pagePath’. Also add ‘title’ and set the value to ‘pageTitle’<\/p>\n\n\n\n

    \"\"
    Setting the DLVs in the tag<\/figcaption><\/figure>\n\n\n\n

    Now that the tag is set up, you can select a trigger that will fire it. Click on the Triggering section and select the Custom Event you created.<\/p>\n\n\n\n

    \"\"
    Adding the ‘pageview’ trigger<\/figcaption><\/figure>\n\n\n\n

    And that’s it, your event is ready to fire.<\/p>\n\n\n\n

    \"\"
    The full Google Analytics Pageview Tag<\/figcaption><\/figure>\n\n\n\n

    Triggering the generic pageview event<\/h2>\n\n\n\n

    This is the most important part, without it the tracking won’t work.<\/strong><\/p><\/blockquote>\n\n\n\n

    To trigger the event, you need to run the following script on every page load (aka route change) you want to capture. I also load this on the first pageview, so I’m completely relying in this tracking instead of the standard GTM triggers.<\/p>\n\n\n\n

    The value of ‘event’ should always be ‘pageview’ (as this is the name of the Custom Event). The value of the DLVs should change according to the data you want to pass.<\/p>\n\n\n\n

         dataLayer.push({\n       'event' : 'pageview',\n       'pagePath' : pagePath,\n       'pageTitle' : pageTitle\n     });\t<\/code><\/pre>\n\n\n\n
    So why use these frameworks<\/h2>\n\n\n\n
    Using SPA or PWA platforms are a pain in the neck not only from an analytics perspective, but also for Organic promotion in search engines.<\/p>\n\n\n\n
    Besides the general hype, these frameworks are usually quicker and easier to develop, which is why most developers choose them. Another important benefit is their speed, which can be blazing fast.<\/p>\n\n\n\n
    With the right setup, you can track and promote these sites effectively, and enjoy the benefits of a modern framework.<\/p>\n","protected":false},"excerpt":{"rendered":"
    When working with a client to implement a measurement plan in Google Tag Manager (GTM), I often need to set up multiple events to capture different user interactions.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,39],"tags":[],"_links":{"self":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4373"}],"collection":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/comments?post=4373"}],"version-history":[{"count":2,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4373\/revisions"}],"predecessor-version":[{"id":4804,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/4373\/revisions\/4804"}],"wp:attachment":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/media?parent=4373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/categories?post=4373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/tags?post=4373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}