We sometimes get the question if it's possible to connect Datatrics tracking on a Progressive Web App (PWA), or a Single Page Application (SPA). It is indeed possible to enable tracking on a PWA or a SPA.
​

This will need to be a custom implementation, as it won't work with a Google Tag Manager tag with a normal pageview trigger, as these applications don't work with individual pages.
​
To implement Datatrics tracking, a virtual pageview event needs to be implemented.
This event needs to entail a page URL and a page title. These need to be available in the DataLayer, so they can be picked up with the Datatrics script and the Pageview event.
​
Below is an example of how the data looks within the DataLayer:

You will need to create two user-defined variables within Google Tag Manager.
These variables in our example are called:
​
Nuxt - Page URL
​

Nuxt - Page Title.
​

These two variables are needed so that the Datatrics script can read the two variables whenever they appear in the DataLayer when the nuxtRoute event triggers, so we can read the correct page title and page URL.

After creating these variables, go to the trigger part of Google Tag Manager and create a new event based on the virtual pageview, in our case this is based on the nuxtRoute event.
​

When this is performed, go to the tag section and open the Datatrics tracking script tag, or create a new custom HMTL tag with the Datarics tracking code in it. You then need to add two lines of code:
​
_paq.push(['setCustomUrl', '{{Nuxt - Page Url}}']);

_paq.push(['setDocumentTitle', '{{Nuxt - Page Title}}']);
​
​

Below you can find a screenshot of our tracking script based on a PWA/SPA:
​

In this example, the nuxtRoute event is the virtual pageview event that loads on the website as a virtual pageview.
​
After these actions are performed, we can track all the individual pages on your website and the tracking should go accordingly.
​
​
​