Install

This sample is based on the Angular CLI Quickstart.

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

Install

Download - Tealium for Angular [Example]

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.

Initialize

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”

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.

Track Views

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

this.tealium.view({
    "tealium_event"  : "product_view",
    "page_type"      : "product",
    "product_id"     : ["PROD123"]
});

Track Events

Use the link() method to track in-page events. This method takes an object as the single parameter.

this.tealium.link({
    "tealium_event" : "user_login",
    "customer_id"   : "0123456789"
});