If your website doesn’t reload for every page view and when content changes, your website is a Single Page Application (SPA), and this is the right guide for you. If you have a website where the page reloads every time the content changes (the classical approach to web development, also known as Multi-Page Applications (MPAs), please follow this guide.

Log in to Google Tag Manager and ensure you are in an empty workspace. If workspace changes are not yet submitted, like in the screenshot below, contact the user who made the changes if the changes can be reversed or published. This will prevent you from publishing unwanted changes to your Google Tag Manager container. You can also create a new workspace where you only work on these changes and publish them.

When you have an SPA and use Google Tag Manager, you will need to implement a virtual pageview event. This dataLayer event needs to contain a specific event name, a page URL, and a page title. When previewing your container with the Tag Assistant, you can easily track all events firing on pageviews and spot if you already have this virtual pageview event implemented. The event should look something like this:

As you can see, it contains an event name (nuxtRoute), a page URL (/discover/why-datatrics), and a page title (Discover Datatrics).

Based on the variable names of this event, we can start creating variables and a trigger.

Creating variables and a trigger

You will first need to create two user-defined variables within Google Tag Manager.

These variables are created based on the variable names of the aforementioned dataLayer event, so you should use the variable name from the event as the “Data Layer Variable Name”.

Page URL variable example:

Page title variable example:

These two variables will be used later in the Datatrics tracking script, so our servers will receive the new URL and page title.

After creating both variables based on your own dataLayer event, head over to the trigger section in Google Tag Manager and create a new trigger. This trigger should have the Event name from your virtual pageview event. In the example, this is “nuxtRoute”:

Add the tracking script as a tag to Google Tag Manager

Now log in to Datatrics and head over to the website integration. Click on the Edit button like shown in the image below:

On the next page, click on Tracking Script and copy the code that appears below:

Head back to Google Tag Manager and create a tag (1), choose Custom HTML as a tag type (2), paste the Tracking Script you just copied in the HTML code field (3), add the newly created trigger as a trigger (4). Before saving, we need to add the two variables to the tag like this (5) after the second line of code:

In our example, the variables here are called {{Nuxt - Page Url}} and {{Nuxt - Page Title}}. In your case, you should replace these with your own created variables for the page URL and title.

Now save the tag (6).

Checking if the implementation is correct

To check if everything is working correctly, you can preview the changes from your container in the Tag Assistant and see if the newly added tag fires correctly on every (virtual) page view:

Find your virtual pageview event (1), in this example nuxtRoute, and check if the newly added tag fires every time (2).

Publishing your workspace to the live environment

After saving, don’t forget to publish the changes by clicking on the blue Submit button in the top right corner. After clicking GTM prompts a confirmation window where you can enter a title and subscription for the changes:

Publish it and sing like no one is listening. You now added the Datatrics tracking script to your website!

It’s recommended to also send over e-commerce data to Datatrics via Google Tag Manager if this data is present in GTM. Please continue reading this article to set this up: