Google Analytics and Angular

Caryn Farvour (Humphreys)
Vehikl News
Published in
2 min readJul 19, 2015

The Scenario: You’ve built your web app using Angular and you’re just about ready to launch. You’d like some tracking to keep an eye on flow and behavior through your app (because you build > test > iterate, right?!).

The Problem: What you need to track are states. You already know how to insert Virtual Pageviews with Google Analytics, but that won’t work with Angular. So what do you do?

The Solution: Thanks to Angulartics, you can automatically track virtual pageviews by default, including all navigation across all routes, through your entire application.

Once you’ve followed the instructions provided for installing the Angularitics package into your project, and you’ve added the attributes to the elements you’d like to virtually track, test them out!

Apply the Event Tracking

The two basics for event tracking are analytics-on and analytics-event. Think of these as: on ‘click’, track event ‘name’:

Additional Parameters

Google Analytics also allows more refined tracking using category and label with analytics- attributes:

Tracking Results

See Events under Behavior in Analytics

Sign in to your Google Analytics account, and navigate to the Reporting tab at the top. In the left-hand nav, open Behavior and select Events.

Here you’ll be able to see details on categories, actions, and labels you’ve set while customizing the tracking for your links.

Tracking your Events in Analytics

Reference

See more about integrations and customizations here: Angularitics

Originally published at transmission.vehikl.com on July 19, 2015.

--

--

Caryn Farvour (Humphreys)
Vehikl News

UX Designer, UI Developer, PC gamer, bibliophile, board gamer, coffee drinker, painter, photographer, unapologetic smartass.