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:

https://www.slideshare.net/AlbanGrme/implementing-web-analytics-on-single-page-applications

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.

https://www.albangerome.com/angularjs/demo.php#!/

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

https://www.albangerome.com/angularjs/demo2.php#!/Porto

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

http://www.albangerome.com/angularjs/Porto

Happy reading!

Alban

Permalink

Comments

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 digitalData.page.pageInfo.pageName 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.

Alban

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

  • Think about a time when you were performing at your peak, whether at work or in another facet of your life. Imagine that ...

    3 people like this.
  • Posted in: Member Open Forum

    Originally published on the  Digital Analytics Blog  on June 5, 2019 by Chris Tighe, Editorial Manager at   AT Internet ...

    1 person likes this.
  • DAA gets asked often for recommendations of speakers – not only for DAA chapter events, but for outside events as well. ...

  • Are you feeling checked-out and disengaged at work, wishing you were somewhere else on most days? If so, you are not alone. ...

  • Analytics in 2019

    The year 2019, it's only July, but what it a year it's been for analytics.  Some of the major highlights follow. On the ...

    1 person likes this.
  • Good morning all, I am a little late to share with you my latest deck. I was attending MeasureCamp Faro, which is in the ...

    1 person likes this.