インストール

このサンプルはAngular CLI Quickstartに基づいています。

要件

Tealium iQタグ管理アカウント
Angularアプリケーション

サンプルアプリ

Tealiumライブラリ、トラッキング方法、ベストプラクティスの実装について理解を深めるために、Tealium for Angularのサンプルアプリを探索してみてください。

インストールには、アプリケーションに1つのファイルを追加するだけで済みます。このサービスは、アカウントのTealium utag.jsライブラリをロードし、トラッキング呼び出しを処理します。

Angular用のTealiumライブラリをインストールするには：

Angularアプリケーションでディレクトリ./src/app/tealiumを作成します。
ファイルutag.service.tsをアプリケーションのパス./src/app/tealium/にコピーします。

サンプルアプリのapp.compontent.tsファイルにある例に従って、アプリでTealiumサービスを定義し、呼び出します。

import { Component, OnInit } from '@angular/core';
import { TealiumUtagService } from './tealium/utag.service';

@Component({
      selector: 'app-root',
      providers: [TealiumUtagService],
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
})

初期化

setConfig()メソッドはTealiumを初期化し、utag.jsファイルへのパスを構築します。以下の例を参照してください：

constructor(private tealium: TealiumUtagService) {
    this.tealium.setConfig({
        "account"     : "ACCOUNT",
        "profile"     : "PROFILE",
        "environment" : "ENVIRONMENT"});
}

インストールにより、アプリケーションに新しいクラスTealiumUtagServiceが追加され、これはコンポーネントにプロバイダとして登録することで利用可能になります。

例

以下は、Tealiumサービスをアプリケーションにインポートする完全な例です。app.component.ts。

import { Component, OnInit } from '@angular/core';
import { TealiumUtagService } from './tealium/utag.service';

@Component({
  selector: 'app-root',
  providers: [TealiumUtagService],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']})

export class AppComponent implements OnInit {

  title = 'Testing App';

  constructor(private tealium: TealiumUtagService) {
    this.tealium.setConfig({ account: '##TEALIUM_ACCOUNT##', profile: '##TEALIUM_PROFILE##', environment: 'prod' });
  }

  ngOnInit(): void {
    // The tealium.view function will call the tealium.track function with 'view' as first param
    // Most tags support the 'view' event and many analytics tags also support the 'link' event
    this.tealium.view({event_name: 'init'});
    //this.tealium.track('view', {'event_name' : 'init'});
  }
}