Skip to main content

Installing Funnelytics on a Single Page Application (SPA) using GTM

Single Page Applications beave differently than standard sites in terms of tracking so let's see how to track those sites seamlessly

Umberto Guardascione avatar
Written by Umberto Guardascione
Updated this week

SPAs are application-like websites where all the necessary information is loaded upfront when the site is initially rendered.

When a user navigates within an SPA, there is no page reload or server request. Instead, the content dynamically changes within the same page, resulting in a different user experience compared to traditional websites.

For this setup we will need to use Google Tag Manager (GTM).

If you didn't install Funnelytics via GTM I highly recommend you to do so in order to be able to fully use this guide.

Challenges with Funnelytics Tracking on SPAs

When using Funnelytics on SPAs, there are challenges related to accurately tracking user interactions.

Funnelytics relies on URL changes to identify page transitions, but in an SPA, the URL changes without triggering a full page reload. This creates a discrepancy between the URL displayed and the actual page transition, resulting in incomplete tracking data.

Google Tag Manager Container for SPAs

To address the tracking challenges of SPAs, we've create a specific Google Tag Manager (GTM) container that can effectively track these sites.

The container includes necessary code snippets and sequencing to ensure accurate tracking within SPAs but you will also need to do some changes to the script.

  1. Download the GTM container JSON file from HERE.

  2. Import the container following the instructions in this ARTICLE

  3. Continue with the instructions below to complete the setup

Changes to the Basic Script

In order for the script to work properly in conjunction with the new SPA tag we just imported we need to do a small change to it.

  1. Open the Funnelytics Script tag

  2. Locate the false value as shown in the picture

  3. Change it to true as shown

  4. Click Save to save the changes we just made.

Final Publish

All the changes needed are done and now we are good to publish the container.

If you have published the container right after the import, no worries, everything is fine, we will just need to publish it again to be sure that the changes to the script will be live.

  1. Let's click on Submit on the top right

  2. Let's write a version name to understand what we did - "Funnelytics SPA setup" is a good choice in case you do not know what to write.

  3. Click Publish

From now on all your user page views will be tracked as expected from Funnelytics.

If you need any support or clarifications please feel free to reach out to us via the chat bubble or at [email protected].

Did this answer your question?