Implementing Web Analytics on a Single-Page Application

By Alban Gerome posted 13 days ago

  
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

7 days ago

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

8 days ago

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

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

  • 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 ...

  • 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.
  • One of the strongest benefits in DAA is the Mentoring Program , started by our Women in Analytics community but ...

    1 person likes this.
  • Authored by Jodi Daniels , Founder of Red Clover Advisors It’s official – GDPR has celebrated its first anniversary. ...

  • Co-Authored by Michelle Reeb, CEO of The Top Candidate and Nicole Reeb, Award Winning Author The manner in which you leave ...

    3 people like this.