How to set up tracking for single-page applications (SPA) with Google Tag Manager

Author:

Tracking a Single-Page Application (SPA) with Google Tag Manager (GTM) can be tricky compared to traditional multi-page websites because SPAs load content dynamically without reloading the entire page. This means that GTM’s default pageview triggers won’t work as expected, as they rely on full page reloads to trigger tags.

However, with the right configuration, you can track user interactions and pageviews on a SPA in Google Tag Manager. Here’s how you can set up tracking for SPAs using GTM:

1. Set up GTM in Your SPA

Before diving into specific SPA tracking, you need to ensure Google Tag Manager is properly installed on your Single-Page Application. The steps are the same as for a regular website:

  • Create a GTM account and container.
  • Add the GTM container code to your site’s <head> and <body> sections, just like you would for any other site.

After that, you can proceed to configure your tags and triggers.

2. Use the History Change Trigger for SPAs

The most critical thing for SPA tracking is that the page isn’t reloading with each new view or interaction. Instead, the URL changes dynamically with JavaScript, often using pushState or replaceState to alter the browser’s history without actually loading a new page. To handle this in GTM, you’ll need to track changes in the browser’s history, which occur without traditional page reloads.

Steps to configure a History Change Trigger:

  • Step 1: Create a trigger for History Changes:
    • Go to your GTM account and click Triggers.
    • Click New, and then choose Page View.
    • Select the History Change option.
    • Set the trigger to fire on All History Changes or specify conditions if needed (e.g., you may want to only track specific paths).
  • Step 2: Apply the History Change trigger to the tags you want to track, such as Google Analytics or other analytics tools.

This trigger allows GTM to fire tags whenever the browser’s history changes — which is typical in SPAs when users navigate to different “pages” without triggering a full reload.

3. Push Custom Events to the Data Layer

Another key aspect of SPA tracking is tracking user interactions, like clicks, form submissions, or scrolls, within the application. These interactions don’t necessarily trigger a new URL change but should still be tracked as events.

You can push custom events into the Data Layer in response to specific user actions. When an event occurs in your SPA (e.g., a button click, a form submission, or a view change), push a custom event to the GTM Data Layer to trigger tags.

Example: Push a Custom Event for Page View

If you want to track custom pageviews or virtual pageviews (when users navigate within the SPA but not to a full page reload), you can push these to the Data Layer as follows:

javascript
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'virtualPageView',
pagePath: '/new-page', // The new virtual page path
pageTitle: 'New Page Title' // The title of the page
});

Once this custom event is pushed to the Data Layer, you can create a trigger in GTM that listens for the virtualPageView event:

  • Step 1: Go to Triggers in GTM and create a Custom Event trigger.
  • Step 2: Set the event name to match the custom event pushed into the Data Layer (e.g., virtualPageView).
  • Step 3: Add the trigger to any tags that need to fire on that custom event (such as Google Analytics or Facebook Pixel).

Example: Push a Custom Event for Button Click

javascript
window.dataLayer.push({
event: 'buttonClick',
buttonName: 'Subscribe Now'
});

Then, in GTM, create a trigger that listens for the buttonClick event:

  • Step 1: Create a new trigger of type Custom Event.
  • Step 2: Set the event name to buttonClick.
  • Step 3: Attach this trigger to any tag that should fire when the button is clicked, such as a Google Analytics event tag.

4. Track Virtual Pageviews for Analytics

For SPA tracking, you may want to track virtual pageviews — meaning each significant state or URL change in the SPA is treated as a pageview in Google Analytics or other analytics tools.

Steps to configure virtual pageviews:

  • Step 1: Create a tag for Google Analytics Pageview in GTM.
    • Go to Tags > New > Google Analytics: Universal Analytics.
    • Set Track Type to Page View.
    • In the Page Path, use a Data Layer Variable to pull the virtual page path pushed to the Data Layer (e.g., /new-page).
  • Step 2: Attach a History Change or custom event trigger to this pageview tag.
  • Step 3: Ensure that whenever the virtual pageview is triggered (by user interaction or URL changes), it correctly sends pageview data to Google Analytics.

5. Use GTM Variables to Capture Dynamic Data

Since SPAs are often dynamically rendered, you might need to capture specific elements or values that change as users interact with the page. For example, tracking dynamic page titles, custom content, or interactions.

You can create Variables in GTM to capture this dynamic data:

  • Page Title Variable: If your SPA dynamically updates the title of the page, create a Page Title variable in GTM.
  • URL Variables: If your SPA uses custom URL fragments or parameters, use GTM’s built-in Page URL variable to capture them.

These variables can be used within triggers or tags to dynamically adjust the data being sent.

6. Test the Setup Using GTM’s Preview Mode

Once you’ve configured your triggers and tags for SPAs, it’s important to test them in GTM’s Preview Mode before publishing the changes.

In Preview Mode:

  • Navigate through your SPA and verify that your tags are firing correctly on virtual pageviews or interactions.
  • Check the Data Layer to confirm that events like virtualPageView or buttonClick are being pushed properly.
  • Ensure that Google Analytics is receiving the correct data by checking the Real-Time reports.

7. Additional Considerations

  • SPA Frameworks: If you’re using a specific SPA framework (e.g., React, Angular, Vue), you may need to adjust your tracking logic according to how the framework handles routing and dynamic content.
    • React: Use React Router and listen to route changes.
    • Angular: Use Angular’s Router events.
    • Vue: Use Vue Router and listen to route changes.
  • Google Analytics 4 (GA4): If you’re using Google Analytics 4 (GA4), the event-based data model requires a slightly different approach to virtual pageview tracking. You’ll still use the History Change trigger, but in GA4, you can push custom events into the Data Layer and use them for tracking pageviews or other interactions.

Conclusion

Setting up tracking for a Single-Page Application with Google Tag Manager requires a combination of history tracking, custom events, and data layer variables. The key is to adapt to the dynamic nature of SPAs by listening for changes to the URL, routing, and user interactions and ensuring that the appropriate tags fire based on these changes. By configuring GTM correctly, you can efficiently track pageviews, user interactions, and other important events in your SPA.

Categories: Digital Marketing