このページでは

For AI agents: a documentation index is available at /docs/llms.txt. Append .md to any page URL for markdown, or send Accept: text/markdown.

Tealium

この記事は、AmplitudeのTealium連携をセットアップして使用するためのガイドです。

Tealiumの2つの主要製品は、エンタープライズタグ管理サービス「Tealium iQ」と、リアルタイムの統合マーケティングプラットフォーム「Tealium AudienceStream」です。

お客様がAmplitudeにデータを送信する方法は2つあります：

  1. Tealium iQ & タグ管理（TIQ）
  2. Tealium AudienceStream & Universal Data Hub（TealiumはTIQからAmplitudeにデータを送信します）

Tealiumはこの連携を維持しています。この連携に関するご質問は、Tealiumサポートチームまでお問い合わせください。

Tealium iQとタグ管理（TIQ）

Tealium IQは、ページのすべての要素に対してユニバーサルデータオブジェクト (UDO) を作成するユニバーサルな JavaScript ライブラリです。Tealiumはまずこのデータをデータレイヤーに送信します。その後、タグ付きでサードパーティベンダー（Amplitudeを含む）に送信できます。

Tealium iQをウェブサイトに統合する方法は2つあります。Tealiumのタグマネージャーを使用する方法か、TealiumのJavaScriptライブラリを使用する方法です。このセクションでは、Tealium iQ（タグマネージャー）を使用してAmplitudeにデータを送信する方法について説明します。

連携を設定する

TealiumとAmplitudeを統合するには、以下の手順に従ってください。

  1. Tealiumワークスペースで、アプリケーション用のデータレイヤーを作成します。 ここで必要な変数を定義します。 詳細については、次のセクションを参照してください。

  2. Amplitude上でデータのプロジェクトを作成します。 これにより、APIキーが生成されます。

  3. Tealiumの*「タグ」*タブで、「Amplitude」を追加します。 Amplitude APIキーはタグ設定で入力できます。 また、ここでロードルールとデータマッピングを作成することもできます。

  4. Tealiumでコードセンターに移動します。コードセンターは右上隅のドロップダウンメニューにあります。 ここでは、アプリに貼り付けるJavaScriptスニペットを確認できます。

  5. アプリで、開始bodyタグの後にスニペットを貼り付けます。環境と、タグを同期的にロードするか非同期的にロードするかを指定します。 非同期に読み込むと、ページの読み込みが高速になります。 AmplitudeのJavaScript SDKも非同期にロードされます。

    js
    <script type="text/javascript">  
var utag_data = {  
    "page_type": "home",  
    "customer_id": "t: feb-27"  
};  
</script>  
<!-- Loading script asynchronously -->  
<script type="text/javascript">  
    (function(a,b,c,d){  
    a='//tags.tiqcdn.com/utag/sbx-amplitud/main/prod/utag.js';  
    b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/java'+c;d.async=true;  
    a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);  
    })();  
</script>

  6. インスツルメンテーションコードに追加するすべての変数が*「データレイヤー」*タブで定義されていることを確認してください。次に、追跡したいイベントに対してAmplitudeのベンダータグを追加します。 タグで、同じ送信先に複数の変数をマッピングすることはできません。同じページロードから複数のイベントを送信するには、それぞれに別々のベンダー タグを設定します。宛先は、Amplitudeに送信できるさまざまな形式のデータを表しています。

データ層

Tealium iQはデータレイヤーを使用します。これは、企業のデジタル製品から流れるデータの仕様であり、特定のイベント属性を含むイベントを識別するものです。データレイヤーを定義したら、それをすべてのデジタル製品にインストールし、そのデータをAmplitudeなどのタグベンダー設定に使用できます。データ層はベンダーに依存しないため、データ層を計測してから、さまざまなベンダータグに送信できます。

アプリ上のすべてのデータ層変数を [データ層] タブに含めます。

データ層では、次の変数タイプを定義できます。

  • UDO 変数: UDO で定義された変数です。 UDOは、ウェブサイト上のJavaScriptオブジェクトです。各ページや訪問者を表す動的な値が含まれています:
js
<script type="text/javascript">  
    var utag_data={
        "country_code": "US",
        "currency_code": "USD",
        "page_name": "Cart: View Shopping Bag",
        "page_type": "cart",
        "product_id": ["PROD123", "PROD456"],
        "product_name": ["Red Shoes", "Black Socks"],
        "product_category": ["Footwear", "Apparel"],
        "product_quantity": ["1", "2"],
        "product_unit_price": ["65.00", "4.75"],
        "cart_total_items": "3",
        "cart_subtotal": "74.00"
    };
</script>
  • クエリ文字列パラメータ: URL からパラメータを取得します。 たとえば、URL が http://example.com/path/file.html?sortOrder=price の場合、Tealium の変数名は sortOrder です。
  • ファーストパーティ Cookie: お客様のドメインに設定された Cookie 内の参照値です。 Cookie変数を作成する際には、Tealium cookie、 utag_main、または標準cookieを指定できます。また、独自のカスタム値を utag_main cookieに追加することもできます。utag.js ライブラリは utag_main という名前の Cookie を 1 つ作成および維持します。その中には、訪問者のセッションを追跡するいくつかの組み込み値があります。
    • ses_id: セッションの一意の識別子です。
    • _st: Unix/epoch のタイムスタンプをミリ秒単位で指定します。
    • v_id: 各訪問者に対する固有の識別子です。
    • _ss: ブール値で、表示されたページがセッションの最初のページかどうかを示します。 値 1 は「はい」、0 は「いいえ」を意味します。
    • _pn: 現在のセッション中に表示されたページ数です。
    • _sn: この訪問者のセッション数です。
  • JavaScript変数: これを選択して、Webページ上の utag_data オブジェクト以外のJavaScript変数を参照します。
  • メタデータ要素: ページ内のメタタグのコンテンツを参照します。
  • AudienceStream 属性: AudienceStream で定義されたバッジ、メトリクス、プロパティなどの属性です。 AudienceStream は、Tealium の他のプロダクト (Universal Data Hub) に流れるデータを取得し、ユーザーエンゲージメントの最も重要な属性を表す訪問者プロファイルを作成します。

ロードルール

ロードルールとは、タグをいつどこでロードするかを定義する条件です。 これらは、Amplitudeがタグをロードする前に通過する必要がある論理条件で構成されています。 たとえば、特定のタグのみが特定のドメインにロードされるように設定できます。AND/ORロジックまたは時刻/日付ベースの条件を使用してタグをロードできます。

ロードルールは、使用できなくなった場合に削除することも、将来再び使用する可能性がある場合は無効にすることもできます。

所見

  • AmplitudeライブラリとデバイスIDは、Device IDAmplitudeのJavaScript SDKによって設定されたランダムに生成されたUUIDに設定されていますLibrary = 'amplitude-js'。
  • 変数がロードされる前に設定されている限り、宣言ブロックの外側で UDO 値を更新できますutag.js。そうでない場合、Tealiumはを無視します。これは初期ページ読み込み時のUDOです：
js
<script type="text/javascript">  
var utag_data = {  
    "page_type": "landing", // page type
    "page_name": "Home Page", // page name
    "event_name": "",
    "customer_id": "t: mar-20",
    "button_counter": "0"  
};  
</script>

ユーザーがページ上のボタンをクリックし、そのたびにbutton_counter変数を1ずつ増やしたときに別のイベントをトリガーするには：

js
<script type = "text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".amp-track").forEach(function (element) {
            element.addEventListener("click", function () {
                var eventName = element.dataset.event;
                if (eventName == "resume") {
                    utag.link({
                        "button_counter": "1",
                        "event_name": "t: button clicked"
                    });
                }
            });
        });
    });
</script>

変数を利用可能な宛先にマッピングすることで、さまざまな SDK 設定を設定できます。

これは役に立ちましたか？