Tealium for Angular

Tealium for Angular

by akshata_yerdoor on ‎08-16-2017 02:23 PM - edited on ‎02-13-2018 08:02 AM by Community Manager (2,324 Views)

This is an overview of an example solution for integrating Tealium iQ with your Angular application. The integration works well with the example from Angular's CLI Quickstart and shows how to track both page views and events.

If you are looking for the older AngularJS 1.x integration, visit http://github.com/Tealium/integration-angularjs

Requirements

  • Tealium iQ Tag Management account
  • Angular application

Get the Example Code

Download - Tealium for Angular [Example]

Installation

The installation only requires one file to be added to your application. This service takes care of loading the Tealium utag.js library for your account and handling the tracking calls.

To add the Tealium service to your application:

  1. Create the directory ./src/app/tealium in your application.

  2. Copy the file example/src/app/tealium/utag.service.ts into your application at ./src/app/tealium.

Initialization

The installation adds a new class to your application called TealiumUtagService which is now available by registering it as a provider to a component. Add this class to your application constructor and initialize it with the setConfig() method using the following parameters:

  • account - the name of your account
  • profile - the name of your profile within your account
  • environment - one of "dev", "qa", or "prod"
// example constructor
constructor(private tealium: TealiumUtagService) {
this.tealium.setConfig({
"account" : "your_account",
"profile" : "your_profile",
"environment" : "prod"
});
}

See example/src/app/app.component.ts for a full example of importing the Tealium service to your application.

Tracking

Once TealiumUtagService has been initialized you can add tracking calls throughout the application code. Use the view() method to track page views and the link() method to track in-page events. Each method takes an object as the single parameter.

For more information on view and link tracking, see Page Tracking and Event Tracking.

// Content View event
this.tealium.view({ 
"page_type" : "product",
"product_id" : ["PROD123"]
});
// Non-view event this.tealium.link({
"event_name" : "user_login",
"customer_id" : "0123456789"
});

Use the Universal Tag Debugger tool to validate that your code is working as expected.