Set up tracking with single page applications

This guide outlines the setup within Google Tag Manager (GTM) to track virtual page views on Single Page Applications (SPAs) by capturing and sending the previously visited page URL to a custom tracking script.

​

Step 1: Create a Data Layer Variable

First, create a Data Layer Variable to store the current page’s URL:

• Variable Name: DLV - originalLocation
• Data Layer Variable Name: originalLocation

This variable captures the URL before navigation to another page in your SPA.

​

Step 2: Create a Custom HTML Tag

Set up a Custom HTML tag to save the current page location to the Data Layer Variable originalLocation.

• Tag Name: Save originalLocation
• Tag Type: Custom HTML
• Tag Configuration:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  originalLocation: document.location.protocol + '//' +
                    document.location.hostname +
                    document.location.pathname +
                    document.location.search
});
</script>

Configure this tag to fire on all pages or based on specific triggers that suit your SPA’s navigation.

​

Step 3: Set Up Tag Sequencing

Ensure the “Save originalLocation” tag fires before the “Dema | Page view” tag:

1. Navigate to the “Dema | Page view” tag in GTM.
2. Go to Advanced Settings > Tag Sequencing.
3. Enable the option “Fire a tag before Dema | Page view fires”.
4. Select “Save originalLocation” as the setup tag.

This setup ensures that the original page URL is captured right before the page view event is tracked.

​

Step 4: Modify the Page View Script

Modify your existing page view script to include the DLV - originalLocation variable. This ensures that the URL of the previously visited page is sent along with the page view event to your tracking script.

​

Script Modification

Add the Data Layer Variable DLV - originalLocation as an additional argument in your Dema page view function call:

dema.pageview(pageViewData, "{{DLV - originalLocation}}");

By appending this modification, your tracking script will now receive the URL of the previously visited page along with the current page view data. This enhancement is crucial for accurately tracking user navigation and interactions in SPAs.

​

Summary

Following these steps meticulously will enable you to accurately track virtual page views in your SPA. This method captures the dynamic nature of SPAs by ensuring that each virtual navigation is tracked along with the previously visited page’s URL, providing richer and more accurate analytics data for your SPA.