Note: This method is only for accounts with versions below 16.19.0. In version 16.19.0 and higher, SPAs are tracked automatically.
A traditional website (multi-page application) works in this way: every time a visitor goes from a page to a page, the page reloads in the visitor’s browser. A SPA (single-page application) loads at the beginning of the visit, and then dynamically gets the data from the server as the visitor moves through the website, without the need for a page reload.
A multi-page application is easy to track because the tracking code loads each time a visitor changes a page. A single-page application is more difficult to track because, in most cases, the tracking code loads one time and doesn’t load again when a visitor explores the website.
So if we want to track a single-page application, we need to use a mechanism that will notice when a visitor changes a page and will send that information to Piwik PRO. For that, we’ll need a custom variable, a history change trigger, and a virtual page view tag.
A custom variable will help us get information about the page title.
A history change trigger will do an awesome job of firing the tag when a hash in the page URL changes or when the `history` object in the browser changes. So this trigger will notice changes that the tracking code can’t notice in single-page applications.
A virtual page view tag will capture and send information about the change to Piwik PRO. With its help, data about a page URL and page title will appear in the page report and the page title report.
Note: This method will work for single-page applications where the page URL changes and where the page URL fragment (aka hash) changes.
Set up tracking for a single-page application
To set up tracking for a single-page application, follow these steps:
- Go to Menu > Tag Manager.
- Navigate to Variables.
- Click Add a variable.
- Name the variable
Document title
and select the following type: Document.
- In Document name, type:
title
.
- When you’re done, click OK.
- Navigate to Tags.
- Click Add a tag.
- Name the tag, select the following type: Virtual page view.
- Click Next.
- Add:
- In URL:
{{ Page Url }}
- In Document Title:
{{ Document title }}
- In URL:
- In Tag triggers, click Add a trigger.
- Name the trigger.
- In Event type, select History change trigger (SPA).
- Keep Wait 1 second before firing the tag turned on. It helps to match page URLs with page titles in single-page applications.
- In Event conditions, optionally adjust conditions. For more, see this article.
- Click OK.
- Click Save for the tag.
- Test your tag in debug mode.
- When you’re happy how the tag works, click Publish.
Alternative setup for slow-loading sites
If your single-page application loads the first page slowly, page titles for this page can be inaccurate. We recommend that you set up a manual page view tracking for your single-page application instead.
To set up manual page tracking, follow these steps:
- Go to Tag Manager > Tags.
- On the left, choose the following tag: Piwik PRO (tracking code).
- Turn on Don’t track page views.
- Click Save.
- Navigate to Variables.
- Click Add a variable.
- Name the variable
Document title
and select the following type: Document.
- In Document name, type:
title
.
- When you’re done, click OK.
- Navigate to Tags.
- Click Add a tag.
- Name the tag and choose the following type: Custom code (async).
- Click Next.
- In Tag code, add the following code:
<script> setTimeout(function() { _paq.push(['setCustomUrl', {{ Page Url }}]); _paq.push(['setDocumentTitle', {{ Document title }}]); _paq.push(['trackPageView']); }, 1000); </script>
In this code, you can change the following parameters:
- 1000 // This is the timeout value in milliseconds. Adjust it to the loading time of your site.
- In Tag triggers, click Add a trigger.
- Name the trigger.
- In Event type, select History change trigger (SPA).
- Keep Wait 1 second before firing the tag turned on. It helps to match page URLs with page titles in single-page applications.
- Click OK.
- Click Save for the tag.
- Test your tag in debug mode.
- When you’re happy how the tag works, click Publish.
View a report
After the tag starts to collect data from your single-page application, you’ll see it in reports. Each change will be reported as a page view with a page URL and page title.
To view a report, follow these steps:
- Go to Menu > Analytics.
- Navigate to Reports.
- On the left, click Pages.
- View the report.