Implementing Web Analytics on a Single-Page Application

By Alban Gerome posted 07-03-2019 02:23 PM

Good morning all,

I am a little late to share with you my latest deck. I was attending MeasureCamp Faro, which is in the Algarve. That's the south of Portugal and it was the first MeasureCamp in Portugal, too. I originally intended to focus on a single-page application built with React. React is a famous Javascript framework by Facebook. Several years ago, my second MeasureCamp session, I explained how to do the same but with Angular 1.x. But I ran into issues with installing webpack, and I decided to have a more general session on single-page applications. I might run a whole MeasureCamp workshop on single-page applications and comparing different Javascript workshops. Anyway, without further ado, here's the link to my deck below:

You can find the Angular demo there. Feel free to look at the source code, replace the console.log calls with your page views tracking code and you should be all set. It's using an Angular module called ngRoute.!/

The demo below uses a different Angular module called ui-router:!/Porto

If you don't like hashbangs (#!) in the URLs, check out that demo below:

Happy reading!




07-09-2019 05:16 PM

Hi Garrett,

Personally, my favourite approach to track page views on a single-page application are DOM mutations combined with HTML5 data- attributes. Imagine storing your page name in a data-analytics-page-description attribute. If the value changes, that's a DOM mutation. It should work with every Javascript framework, old browsers (you will need browser-specific syntax), with hashes in the URL or not or even URLs that never change.

My big hope is for Javascript support for proxies on IE. That would let you detect changes on your W3C data layer, i.e. changes on the property. Perhaps someone is looking into doing this with WASM, i.e. the new Web Assembly language that lets you code in near browser-native code.


07-08-2019 05:58 PM

I was JUST looking for a solution to Single Page Applications! I reached out to @Damaris Lasa of e-nor and she was able to share a very well written solution from their team on how to tackle it straight out of GTM using history change triggers.

Thank you for sharing as it is always nice seeing different ways to solve the same issue.

Most Recent Blogs

  • As analytics experts, we’re expected to advance the use of data to understand and improve the world (see DAA’s mission and ...

    5 people like this.
  • In October, at the global DAA OneConference, I was privileged to lead an elite group of analytics leaders (formally known ...

    4 people like this.
  • 2020 is here!   DAA is in the midst of strategic planning to help us carry out our mission statement: Advancing the use ...

    1 person likes this.
  • I often think of mentoring as a chance to “Sharpen the Saw”, as Stephen Covey refers to it in his “7 Habits of Highly Effective ...

    2 people like this.
  • Volunteering with DAA is a great way to enhance your DAA membership experience, gain leadership experience, and build your ...

    1 person likes this.
  • Author: Aurélie Pols, Founder, Aurélie Pols and Associates The words my friend Leena has been speaking for 2 years resonate ...