Our last post was about SEO optimization for AngularJS (SPAs), so the next topic would be how we fixed our analytics problems with Angularytics.
Why Doesn’t it Just Work?
I think the name of the type of application you are creating says it all, it’s a single page application. Google Analytics works by running a piece of JavaScript to tell Google where the user resides on your website. The problem lies in the fact that the script only executes when the page loads, meaning that you will see where the user lands boxer kontantkort elgiganten, in an AngularJS application, but you won’t see any other pages that are loaded via AJAX. We could buff up on our Google Analytics API, or we could use a library like Angularytics.
You Still Need the Google Analytics Script!
Even though this library does all of the leg work for talking with Google Analytic’s API, the script you paste into your head is still required. You can get it in your management side of the Google Analytics site, or just use the code below and replace “YOUR ANALYTICS KEY”, with….yeah I think you get the point.
<script>
(function(i,s,o,g,r,a,m) {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new 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', 'YOUR ANALYTICS KEY', 'auto');
ga('send', 'pageview');
</script>
Install Angularytics
Installation is a breeze with Bower or NodeJS. Simply run bower install angularytics --save -OR- npm install angularytics --save. Now you just need to include the angularytics.min.js into the head of your application or your JavaScript build.
Integrate Angularytics
With just a couple lines we can easily latch onto AngularJS’ routing to send the data to Google Analytics via their API. Below is a sample configuration for an app using their library. (From their Github Docs)
angular.module('sample-app', ['angularytics'])
.config(function(AngularyticsProvider) {
AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
}).run(function(Angularytics) {
Angularytics.init();
});
You’re Tracking LIKE A BOSS!
That’s it, you now have analytics tracking for people moving around your AngularJS app. Google Analytics will load when the browser first gets served the page from the web server and Angularytics will send the routes followed via AJAX. Though this is all most desire, it also makes working with event tracking a breeze.
Beyond the Basics with Event Tracking
Angularytics also makes it a breeze to work with event tracking. If you want to track clicks within your application all you have to do is use the following inline code.
<input type="submit" ng-click="doSomething() | trackEvent:'Home Category':'Button clicked'" />
Or you can actually use the service inside of your JavaScript like shown below, from their documentation.
angular.controller('MainCtrl', function(Angularytics, $scope) {
$scope.click = function() {
Angularytics.trackEvent("Home Category", "Button clicked");
}
});
Do it for me…
Well for those just looking for a ready to roll solution, Madness Labs has made a couple repos on Github to take all of the guess work out. Madness App includes the SEO4AJAX integration from our last tutorial and Angularytics. Madness Blog includes all of the above and a WordPress blog that shares all of the themeing of the website.
Now you can open app/config/settings.php and edit your SEO4AJAX key and your Google Analytics key. You are now ready to build your SEO friendly AngularJS app.