How to get page view events in single-page application (AngularJS)?

Hi all! I previously attended a webinar where there was a QA on single page applications (like AngularJS) and the workarounds required to properly fire off pageview events, I don’t seem to find it anymore as the URL for the blog post doesn’t exist anymore.

I found this which didn’t quite give me the answer I was looking for Single Page Application and Javascript Tracking issues

So the problem I am facing is that, in an AngularJS application a page view event is only fired whenever a new page is open or loaded, that is for each page only one page view event will appear and no other when navigating in the app (through link clicks, browsing, form submits, etc).

Is there a way to still invoke these “virtual page views” as page view events in Snowplow with the Javascript tracker? The only solution I have now is to aggregate all page ping events on that same session/page to know that they entered that page. Is it the same argument as the link provided that we must make sure for clicks/listeners to fire off the page view event?

What is the solution here? Best practices? Any advise is welcome!

/Brian

Hi, we have an Angular 9 application so not the same as AngularJS.

We have used a router guard to fire virtual page views: https://angular.io/api/router/CanActivate
On the canActivate method you have access to ActivatedRoute which includes the full URL to navigate to (path, query, etc). You need to pass this info on to the snowplow trackPageview method.

In case you want to have multiple trackers like GA and SP you can also look into https://github.com/angulartics/angulartics2 . GA is supported out of the box and writing a provider for Snowplow is not that difficult.

Kind regards,
Jeroen

1 Like

You can fire page views whenever you like using trackPageView with the Snowplow JavaScript tracker. This function works for single page applications, assuming you are using newer versions of the tracker, ensure you call the function within your routing and not when the application loads and you should be fine. I built out a simple Angular example a little while ago here that might help: https://github.com/snowplow-incubator/snowplow-javascript-tracker-examples/tree/master/angular/ngSnowplow (although not AngularJS).

We’ve got a new version (v3) coming out soon (Q1 2021) that will offer much better support for Angular apps (via npm) but unfortunately that doesn’t quite help you right now.

We recently integrated into https://getanalytics.io/ which you might find useful, that offers a more “modern js” approach to tracking with Snowplow until v3 arrives.

1 Like