en
de

Google Analytics with AngularJS

9 May 2016
| |
Reading time: 2 minutes

During one of our recent projects, our customer asked us to enable Google Analytics for the AngularJS page we were creating. At first this didn’t sound very challenging, because usually all you have to do is add a short script snippet to the top of the page to send the usage data.

However, we soon realised that, as we had built a single page application, we only loaded the index.html page when the website was entered. The content itself was loaded dynamically inside a container on this page. Adding the snippet to every single view of our application had not only the potential to cause serious maintenance overheads, but would also be a potential source of error when creating new views if the Google Analytics code was not taken into consideration. To avoid code duplication, we did not consider the usual method to be a satisfactory solution.

In order to ensure clean and maintainable code, what we tried to achieve was to have a single section in our code where we could trigger the communication with Google in a generic way.

The good news: we made it!

First we added the snippet that is usually used to enable Google Analytics to our index page; this sets up the connection to Google and specifies our account information.

<script>
 (<strong>function</strong>(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||<strong>function</strong>(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*<strong>new </strong>Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 ga('create', 'UA-xxxxxx-x', 'auto');
 ga('send', 'pageview');
</script>

Note that the last line, triggering the send of the pageview, is not mandatory here. We decided to keep the call anyway in order to have a method for tracking the application views, no matter what URL was used as the point of entry by the user.

We then simply added a function to our core module that sends the current URL to Google as soon as the URL, and thus the content of the application, changes.

</pre>
.run(['$rootScope', '$window', <strong>function </strong>($rootScope, $window) {
$rootScope.$on("$locationChangeStart", <strong>function </strong>(event, nextUrl, currentUrl) {
$window.ga && $window.ga('send', 'pageview', {'page': nextUrl});
});
}])

And it’s as simple as that!

That’s all you need to do in order to enable detailed tracking for your single page application without having to worry about maintenance effort or the introduction of potential sources of error.

The concept itself should not only be applicable for AngularJS but also for any other technology that carries out some kind of location change event.

Thank you for reading this article. Have a nice day!

Comments (2)

Avatar

tobias zürcher

13 May 2016 at 02:06
    Till Ganzert

    Till Ganzert

    13 May 2016 at 16:57

    Actually no. We only wanted to track the page calls and therefor decided to go with a lightweight solution (no plugin). Just looked into it and for more advanced tracking it seems to be an interesting alternative. Could you recommend it?

×

Sign up for our Updates

Sign up now for our updates.

This field is required
This field is required
This field is required

I'm interested in:

Select at least one category
You were signed up successfully.

Receive regular updates from our blog

Subscribe

Or would you like to discuss a potential project with us? Contact us »