Google Analytics and Angular

by Caryn Humphreys on July 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

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.

Google Analytics Events

Events in Google Analytics

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

Angularitics Event Tracking

Reference

See more about integrations and customizations here: Angularitics

The following two tabs change content below.

Caryn Humphreys

UX Designer
Caryn is a Product Designer. She likes writing about CSS tricks she's discovered, Best UX Practices, living and working in a startup community, and fostering a badass team culture.

Latest posts by Caryn Humphreys (see all)