Blogs

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

Log in to see this information

Either the content you're seeking doesn't exist or it requires proper authentication before viewing.