How to Track Single-Page Applications (SPAs)

Published: January 10, 2019 Updated: February 6, 2019 Author Category Analytics, Tag Manager

Have you ever wondered what Spotify, Twitter, Gmail, Google Maps and Netflix have in common? Besides being internet superstars, they are all SPAs, Single-Page Applications. They are users’ favorite sites. They look great, have the best UX design, load in a flash and never keep you waiting.

On the other hand, for marketers and analysts they are obstacles in the way of tracking. Fortunately, there are workarounds so your analytics can thrive with a helping hand from your tag management system.

In today’s post, we’ll show you how you can take advantage of tag manager to track SPAs.

What is a Single-Page Application (SPA)?

First of all, a single-page application is a website or app that works inside a browser. The key here is that it’s a single site that interacts with the user by dynamically rewriting its content instead of loading completely new pages from the server.

An SPA makes use of repetitive content like:

  • Logos
  • Headers
  • Footers
  • Bars
  • Banners

which don’t change as a user clicks through the site. It requires only a few bits to update, but the core stays the same. No extra time is needed to load the page since the amount of information sent to servers is much smaller.

The SPA renders the page directly in the browser. And it works pretty fast as most content is loaded only once during the site’s life cycle. Then it fetches data in the background.


So far, so good, as the user is happy with a convenient site where they get their content delivered simply and quickly.

Free Comparison of 6 Enterprise-Ready Tag Management Systems

Get to know the 40 key differences between Google Tag Manager, Tealium, Segment, Adobe Dynamic Tag Management, Ensighten & Piwik PRO:

Download FREE Ebook

The trouble with tracking SPAs

The other side of this coin is that SPAs require more work and effort if you want to employ tracking and analytics. They call for implementing solutions which work by default on traditional sites. Moreover, if you decide to follow this path, it means you’re going down a bumpy road.

Above all, in the case of traditional sites, when a user clicks through the site, the HTML, JavaScript, CSS and so on re-renders with every new page load. But for SPAs, many JavaScript snippets might not necessarily work like you expect. They were created for sites where tracking snippets are detected after a new page loads.

And here’s the trouble. SPAs load the code only once, meaning your tracking tool can’t automatically detect when a new page is loaded. You need to let it know when the URL changes and the title page as well.

Apply Tag Manager for SPAs tracking

However complicated tracking single-page applications is, all is not lost. There are two paths to take, and both require employing a tag manager for the job. We’ll guide you through the options available in Piwik PRO Analytics Suite.

First, if you want to use a tag manager for tracking an SPA you can set up Virtual Pageviews for sites that visitors modify as they interact with it. You can employ Virtual Pageviews by adding a code snippet to various elements of a website. It will enables you to assign a unique URL to an action. Thanks to this, you will find it recorded in your analytics report.

This solution is particularly handy if you want to create a funnel, like one that could be applied to customer onboarding. In this way, you can track the complete customer journey, checking the exact stage at which your visitors convert or drop off.

So, before we move on to setting up your tracking, here’s one thing: getting your funnels right calls for some additional work that adds complexity to the whole process. To get it right we recommend implementing a tracking plan.

You can use a spreadsheet or any other form you prefer. Write down each stage of the funnel and use it throughout the whole process. That gives you better control over your actions and makes sure everyone involved is on the same page.

Here’s an example from our home base, a plan for e-commerce. Step name reflects the stage, under Event name you define what user actions you want to track, and then in the last column you set conditions for firing tags.

Step Name Event Name Fired when…
View “General settings” ASG – view general settings The user clicks “General settings” in “System” section
Set up value to “Days prior to conversion” ASG – days prior to conversion The user sets value for “Days prior to conversion”
Ecommerce – Multi attribution for orders ASG – multi attribution orders The user selects “Enable Multi Attribution report for Orders”
Ecommerce – Multi attribution for abandoned carts ASG – multi attribution abandoned carts The user selects “Enable Multi Attribution report for Abandoned Carts”
Multiattribution saved ASG – multi attribution saved The user saves the settings.

Use Virtual Pageviews

So, let’s say you want to track users who sign up for a music app and go through an onboarding process. If we break the process down, we get the following stages:

  1. Creating a user profile
  2. Setting up a username
  3. Choosing a pricing plan
  4. Finding friends contact who are already members
  5. Giving permission for personalization
  6. Saving changes

First, you need to open the Tag Manager, then under Tags label choose the option Create new tag PP Virtual Page View. Then fill fields for the URL and document title so you’ll be able to retrieve this data from Analytics later on.

Here’s a possible setup:

Then configure your trigger for this particular tag:

Choose the type of the event; in this case it’s “Click.” Next, set particular conditions. In the given case we want to identify the clicked button by its ID. Sometimes, a good idea would be to adjust your HTML a little bit to make that easier.

Here’s a final setup:

Keep in mind, that you need to create such a tag for each specific step that you want to track in your funnel. It could be based on the clicking of a link, scrolling to a part of a page or any other condition you choose.

It’s best to mark pageviews with custom dimension values so you can later single out the ones related to this funnel.

First, create an action-level custom dimension and name it, for instance, “Funnel name”:

Then, when setting up the Virtual Pageviews that will make up a Funnel, provide the name of the funnel as a custom dimension. As you see below where the funnel name is “signup funnel”.

To find out more about tags you can use in Piwik PRO, review our articles in the Help Center:

Once the setup is done you can dive into your analytics tools and check how users flow through the funnel. Have a look at our example from Custom Reports:


It turns out that the third step is marked with a significant drop number of abandoning visitors. Around 90% of them reach the pricing plan, but only 32% get to the final step.

That’s a great insight for you. It signals where room for improvement is. Maybe visitors couldn’t find a suitable pricing plan, maybe they need more options and you should think about some changes in the future.

All in all, choosing Virtual Pageviews allows you to follow visitors step-by-step across your SPA.

Apply Custom Events

However, as we’ve already mentioned, you can also track some simple actions that don’t require a funnel. Maybe you just need to know how many times a user has performed a certain action, like clicks on:

  • an email address,
  • call link,
  • video link,
  • document download link,
  • specific CTAs.

It could be something like saving a favorite song in Spotify or sharing your content on Facebook. For this purpose it’s a good idea to configure Events in Tag Manager. So, here we go.

Suppose you want to track clicks on your blog page’s contact button. Open Tag Manager, add a new tag, selecting “Piwik PRO Custom Event” tag template. Under “Category” write what are you going to track, such as a CTA on your blog.

Next, fill in the “Action” field so you’ll know exactly which button has been clicked. Then you can fill in the “Name” field so you’ll know which exact post was linked with clicked button.

Finally, when you use a variable {{ Page path }}, the field will be automatically propagated.

Once done, it should look like this:

Free Comparison of 6 Enterprise-Ready Tag Management Systems

Get to know the 40 key differences between Google Tag Manager, Tealium, Segment, Adobe Dynamic Tag Management, Ensighten & Piwik PRO:

Download FREE Ebook

Final thoughts

Unquestionably, single-page applications are gaining ground. One reasons is that they’re a perfect fit for mobile devices, which are becoming increasingly popular. SPAs also help users navigate sites more easily, without being distracted by jumps from one page to another. What’s more, the development process is rather cost-effective as it doesn’t take as long to design and publish these sites.

With an array of benefits accelerating their popularity, SPAs provide significant opportunities for tracking. So getting your approach right is a must. Hopefully, we’ve managed to provide a good example of one for you today.

If you’re still in doubt or have some urgent questions, reach out to the Piwik PRO team and we’ll be more than happy to talk to you.

Contact us

Author:

Karolina Matuszewska, Content Marketer

Content Marketer at Piwik PRO. Specializing in issues of on-site and off-site personalization. Transforming technical jargon into engaging and informative articles dedicated for digital marketers and web analytics specialists. LinkedIn Profile

See more posts of this author

Share