Tealiumカスタムコンテナタグ

カスタムコンテナタグが使用されるほとんどのケースでは、Tealium Generic Tagがよりシンプルな解決策であり、ほとんどのタグニーズを満たします。カスタムコンテナは高度なタグにのみ必要であり、完了するためにはJavaScriptコードの記述が必要です。

前提条件

• タグテンプレートについて
• テンプレート管理権限

仕組み

Tealiumカスタムコンテナタグは、タグマーケットプレイスで見つけることができる公式の統合と同じコードテンプレートを使用します。カスタムコンテナを使用して作成されたタグは、iQのネイティブ機能を活用することができ、E-Commerce拡張変数、データマッピング、イベントトラッキング、その他の拡張機能が組み込まれています。

タグマーケットプレイスから事前に作成されたタグを使用することがベストプラクティスですが、希望するタグが利用できない場合は、タグを追加するためのいくつかのオプションがあります。タグの大部分は、Tealium Generic TagまたはTealium Pixel Container tagを使用して実装することができます。

Tealiumカスタムコンテナタグの実装には、タグテンプレートを変更するためのJavaScriptコードの記述が必要です。あなたは、見慣れないJavaScriptコードを読み、あなたのニーズに合わせてカスタマイズすることに慣れているべきです。

テンプレートの概要

まず、タグマーケットプレイスに移動し、カスタムコンテナタグを追加します。

カスタムコンテナには構成フィールドはありませんが、ロードルール、データマッピング、拡張機能の使用をサポートしています。

データマッピング

他のタグと同様にデータマッピングを構成します。データマッピングはタグテンプレート変数u.dataに保存されます。カスタムコンテナタグはカスタムデータマッピングのみをサポートし、マッピングツールボックスで選択した名前は、タグテンプレートコードで値を参照するために使用するものと同じです。

例えば、customer_idをuser_idという名前のカスタムデスティネーションにマッピングした場合、タグテンプレート内でこの値を使用する必要がある場所では、u.data['user_id']として参照します。

コード構造

カスタムコンテナタグの構成の大部分は、タグテンプレート、つまりタグの基礎となるコードで行われます。以下の手順では、タグテンプレートの管理方法について理解していること、および必要な権限を持っていることを前提としています。

以下の表は、テンプレート内の異なるコードセクションを一覧にしたもので、それぞれのセクションは/* Start */と/* End */のコメントで始まります。

テンプレート変数

以下の表は、カスタムコンテナテンプレートに見つかる変数を説明しています。

E-Commerce変数

E-Commerce拡張からの値を使用する場合、各値のコピーを持つテンプレート固有の変数を作成することを強く推奨します。オリジナルの値をベンダー固有のフォーマットに変更すると、他のタグに悪影響を及ぼす可能性があります。

u.data.order_id = u.data.order_id || b._corder || "";
if (u.data.product_id.length === 0 && b._cprod !== undefined) {
  u.data.product_id = b._cprod.slice(0);
}

Tealiumイベント変数

tealium_event変数を使用すると、異なるイベントが異なる処理を必要とする場合に便利です。Tealiumのトラッキングコールに基づいてどのベンダートラッキングコールを行うかを決定するためのifまたはswitchステートメントを作成することができます。tealium_eventは、他のイベントが構成されていない場合、デフォルトで"view"または"link"になります。

例

例1：購入のロードとトラッキング

以下のコードはベンダーから提供され、タグテンプレートに組み込む必要があります。コードは主に2つの部分、Part AとPart Bに分けられています。このコードは、外部のJavaScriptファイルをロードする（Part A）と、トラッキングコールをトリガーするためにベンダーオブジェクト変数に動的な値を構成する（Part B）という、JavaScriptタグでよく使われるパターンを示しています。

タグテンプレートコードでは、以下の2つの関数を使用してこの規約が達成されます：

• u.loader - ページのロード時に一度呼び出され、ベンダーの外部JavaScriptライブラリをロードします。
• u.loader_cb - u.loaderの完了後、およびページ上の後続のトラッキングコール時に呼び出されます。

この例では、組み込みのE-Commerce変数の使用方法も示しています。

オリジナルスクリプト

// Part A
<script type=text/javascript src="https://services.xg4ken.com/js/kenshoo.js?cid=000-00-00-000-00000"></script>

// Part B
<script type=text/javascript>
kenshoo.trackConversion('0000','000-00-00-000-00000', {
    /*OPTIONAL PARAMETERS. FILL VALUES OR REMOVE UNNEEDED PARAMETERS*/
    conversionType: 'lead',
    revenue: 0.0,
    currency:'USD',
    orderId:'',
    promoCode:'',
    customParam1:'', /*any custom parameter. example: Airport: 'JFK'*/
    customParam2:'', /*any custom parameter. example: Rooms: '3'*/
    customParamN:''
})
</script>

ベースURLの構成

Part Aでは、cidという名前のカスタムクエリストリングパラメータを含むJavaScript URLがロードされています。cidの値は動的である必要があります。Customer Containerで外部JavaScriptファイルをロードするには、51行目のu.dataオブジェクト内のbase_url値を構成します。この値は後でu.loader関数によって使用されます。

47 u.data = {
48 /* Initialize default tag parameter values here */
49 /* Examples: */
50 /* "account_id" : "1234567" */
51     "base_url" : "https://services.xg4ken.com/js/kenshoo.js?",
52     "cid" : ""
53 /* A value mapped to "account_id" or "base_url" in TiQ will replace these default values. */
54 };

ローダーコールバック関数

外部ファイルがu.loaderを使用してロードされた後、コールバック関数を実行したいと思います。Loader Callback Functionのセクションを更新し、84-85行目と91行目のコメントを外します。このコールバック関数、u.loader_cbは、外部ファイルがロードされた後に呼び出されます。

以下のスニペットは、タグテンプレート内の完成したセクションを示しています：

81 /* Start Loader Callback Function */
82 /* Un-comment the single line JavaScript comments ("//") to use the Loader callback function. */
83
84 u.loader_cb = function () {
85 u.initialized = true;
86 /* Start Loader Callback Tag Sending Code */
87
88 // Insert your post-Loader tag sending code here.
89
90 /* End Loader Callback Tag Sending Code */
91 };
92 /* End Loader Callback Function */

ローダー関数の呼び出し

以下のスニペットは、タグテンプレート内の完成したセクションを示しています。この例のように、101行目のコメントを外します：

96  /* Start Loader Function Call */
97  /* Un-comment the single-line JavaScript comments ("//") to use Loader. */
98
99  if (!u.initialized) {
100     //u.loader({"type" : "iframe", "src" : u.data.base_url + c.join(u.data.qsp_delim), "cb" : u.loader_cb, "loc" : "body", "id" : 'utag_##UTID##' });
101     u.loader({"type" : "script", "src" : u.data.base_url, "cb" : u.loader_cb, "loc" : "script", "id" : 'utag_##UTID##' });
102 } else {
103     u.loader_cb();
104 }
105
106 //u.loader({"type" : "img", "src" : u.data.base_url + c.join(u.data.qsp_delim) });
107
108 /* End Loader Function Call */

タグ送信コード

このコードは、Custom Containerタグがロードされたときに実行されます。これは、タグを実行するために必要なデータを初期化する場所です。この場合、動的なcidパラメータをベースURLに追加します（これにはcidへのマッピングが必要であるか、または正しいファイルをロードするためにu.data変数にデフォルト値を入れておく必要があります）そして、必要なe-commerceデータを組み込みの変数からコピーします。

76行目以下のタグ送信コードを以下のように更新します：

74 /* Start Tag Sending Code */
75
76 // Insert your tag sending code here.
77 u.data.base_url = u.data.base_url + "cid=" + u.data.cid;
78 u.data.orderId = u.data.orderId || b._corder || "";
79 u.data.revenue = u.data.revenue || b._csubtotal || "";
80 u.data.currency = u.data.currency || b._ccurrency || "";
81 u.data.promoCode = u.data.promoCode || b._cpromo || "";
82 /* End Tag Sending Code */

次に、いつコンバージョンをトラッキングするか（kenshoo.trackConversion）を決定する必要があります。

• 一つの選択肢は、tealium_eventを使用し、特定のイベント名をキーとすることです。
• 別の選択肢は、自分の変数を使用し、コンバージョンが発生しているか、特定の種類のコンバージョンが発生していることを示す値を構成することです。これにより、各イベントで送信されるデータポイントの柔軟性が得られます。
  コンバージョンコード値のチェックを使用して、コンバージョンイベントに必要な一意のパラメータを使用することもできます。この方法では、一致する値を一つだけチェックできますが、オプションのパラメータを送信する方法が制限される可能性があります。 この例では、変換コード変数のチェックオプションを使用しています。この値をUIでconversionCodeにマッピングしますが、base_urlやcidのようにテンプレート内で手動でu.dataオブジェクトに入れることはありません。この方法により、conversionCodeが存在するかどうかをチェックするとき、それは何らかの種類の値が存在するためだけに行われます。

タグテンプレートを以下のように更新します：

84  u.loader_cb = function () {
85      u.initialized = true;
86      /* スタート ローダーコールバックタグ送信コード */
87
88      // ここにあなたのポストローダータグ送信コードを挿入します。
90      if(u.data.conversionCode){
91          kenshoo.trackConversion(u.data.conversionCode,u.data.cid, {
92          conversionType: 'lead',
93          revenue: 0.0,
94          currency:'USD',
95          orderId:'',
96          promoCode:'',
97          customParam1:''
98          customParam2:'',
99          customParamN:'' })
100     }
101     /* エンド ローダーコールバックタグ送信コード */
102 };

呼び出しで送信されるオブジェクトにオプションのデータを入れるためのいくつかのオプションがあります。使用しない項目は削除する必要があります：

• ハードコーディングされたパラメータ
  常に使用するパラメータだけを呼び出しに直接オブジェクトとして残し、その値はu.data変数（名前はUIマッピングから来ます）を参照します。常に同じパラメータを送信している場合、このオプションは簡単に使用できますが、イベントごとにさまざまなパラメータを送信する必要がある場合、各イベントタイプを個別に構成していないと難しいでしょう。
• 条件付きパラメータ
  カスタムパラメータのオブジェクト変数を作成し、if文を使用して各パラメータを条件付きで構成します。カスタムパラメータがいくつかある場合、これはかなり網羅的なリストになる可能性があります。
• ループと除外パラメータ
  カスタムパラメータのオブジェクト変数を作成し、u.dataオブジェクトをループ処理し、各変数をカスタムパラメータとして構成しますが、カスタムパラメータではないと知られている変数は除外します。これは、送信したくないが追加を防いでいないu.data内の追加のデータポイントがある場合、予期しない結果をもたらす可能性があります。

この例では、ループと除外の方法を使用します。u.dataの各変数に対して、カスタムパラメータオブジェクトoptionalParamsの対応する変数を構成します。既知のパラメータbase_url、cid、およびconversionCodeを除外します。

84  u.loader_cb = function () {
85  u.initialized = true;
86  /* スタート ローダーコールバックタグ送信コード */
87
88  // ここにあなたのポストローダータグ送信コードを挿入します。
89  var key, optionalParams = {};
90
91  if(u.data.conversionCode){
92    for (key in u.data) {
93      if (key !== "base_url" && key !== "cid" && key !== "conversionCode") {
94        optionalParams[key] = u.data[key];
95      }
96    }
97    kenshoo.trackConversion(u.data.conversionCode, u.data.cid, optionalParams)
98  }
99 /* エンド ローダーコールバックタグ送信コード */
100 }

この時点で、JavaScriptファイルがロードされ、conversionCode条件が満たされた場合にtrackConversionがトリガーされます。クエリ文字列ですべての値が予想通りに通過したことを確認し、必要に応じて個々のコードを調整します。

例2：初期化、ロード、トラッキング

コードスニペット

以下のコードはベンダーから提供され、タグテンプレートに組み込む必要があります。このコードスニペットは、Part A、Part B、Part C、Part Dとコメントされた4つの部分に分かれています。

このコードは、JavaScriptタグの次の一般的なパターンを示しています：

1. Part A：初期化されたベンダーオブジェクト変数を最初に。
2. Part B：外部のJavaScriptファイルをロードします。
3. Part C：動的な値でトラッキング呼び出しをトリガーします。
4. Part D：JavaScriptを実行しないページのためのタグのiframeバリアントを提供します。

/* PART A */
<script type="text/javascript">
if (!window.mstag) mstag = {loadTag : function(){},time : (new Date()).getTime()};
</script>

/* PART B */
<script id="mstag_tops" type="text/javascript" src="//flex.msn.com/mstag/site/b7381bb8-71e7-408c-91d0-3adb90b5c736/mstag.js">
</script>

/* PART C */
<script type="text/javascript">mstag.loadTag("analytics", {dedup:"1", domainId:"1516122", type:"1",revenue:"", actionid:"264766"})
</script>

/* PART D */
<noscript> <iframe src="//flex.msn.com/mstag/tag/b7381bb8-71e7-408c-91d0-3adb90b5c736/analytics.html?dedup=1&domainId=1516122&type=1&revenue=&actionid=264766" frameborder="0" scrolling="no" width="1" height="1" style="visibility:hidden;display:none"> </iframe> </noscript>

Part A：タグ送信コード

このコードは「タグ送信コード」セクションで使用されます。ベンダーのタグは、ベンダーのURLが呼び出される前に特定のデータを処理またはフォーマットする必要があります。

タグテンプレートを以下のように更新します：

1. 行番号76の// ここにあなたのタグ送信コードを挿入します。というコメントを削除します。
2. Part Aの<script>タグ間のコードをコピーし、行番号76に貼り付けます。

以下のスニペットは、テンプレート構成ファイルの完成したセクションを示しています：

74  /* スタート タグ送信コード */
75
76  if (!window.mstag) mstag = {loadTag : function(){},time : (new Date()).getTime()};
77
78  /* エンド タグ送信コード */

Part B：ローダー関数呼び出し

このコードはローダー関数呼び出しセクションで使用されます。このスクリプトは同期的であり、次のステップを続行する前に完了します。script_idという変数をu.dataに追加します。これは、基本URLのクライアント固有の部分（b7381bb8-71e7-408c-91d0-3adb90b5c736）を格納します。

タグテンプレートを以下のように更新します：

1. 行番号99と101-104のコメントを解除します。
2. 行101を編集し、“src"の値をベンダーの基本URLとIDに置き換えます。

以下のスニペットは、タグテンプレートの完成したセクションを示しています：

96 /* スタート ローダー関数呼び出し */
97 /* シングルラインのJavaScriptコメント（"//"）のコメントを解除してローダーを使用します。 */
98
99 if (!u.initialized) {
100   //u.loader({"type" : "iframe", "src" : u.data.base_url + c.join(u.data.qsp_delim), "cb" : u.loader_cb, "loc" : "body", "id" : 'utag_##UTID##' });
101     u.loader({"type" : "script", "src" : "//flex.msn.com/mstag/site/" + u.data.script_id + "/mstag.js", "cb" : u.loader_cb, "loc" : "script", "id" : "mstag_tops" });
102 } else {
103     u.loader_cb();
104 }
105 //u.loader({"type" : "img", "src" : u.data.base_url + c.join(u.data.qsp_delim) });
106
107 /* エンド ローダー関数呼び出し */

Part C：ローダーコールバック関数

このコードはローダーコールバック関数セクションで使用されます。進行する前に、domainIdやactionidなど、動的に見える変数をマッピングします。

タグテンプレートファイルを以下のように更新します：

1. 行番号84-85と91のコメントを解除します。
2. 行番号88の// ここにあなたのポストローダータグ送信コードを挿入しますというコメントを削除します。
3. Part Cの<script>タグ間のコードをコピーし、行番号88に貼り付けます。
4. domainIDとactionidの値をu.data.~変数で上書きします。

以下のスニペットは、テンプレート構成ファイルの完成したセクションを示しています：

81 /* スタート ローダーコールバック関数 */
82 /* シングルラインのJavaScriptコメント（"//"）のコメントを解除してこのローダーコールバック関数を使用します。 */
83
84 u.loader_cb = function () {
85   u.initialized = true;
86   /* スタート ローダーコールバックタグ送信コード */
87
88   mstag.loadTag("analytics", {dedup:"1",domainId:u.data.domain_id,type:"1",revenue:"",actionid:u.data.action_id});
89
90   /* エンド ローダーコールバックタグ送信コード */
91
92 };
93 /* エンド ローダーコールバック関数 */

Part D：No scriptオプション

このコードは、ブラウザがJavaScriptをサポートしていない場合、またはJavaScriptが無効になっている場合のフォールバックオプションを提供します。TealiumはJavaScriptを必要とするため、このフォールバックコードはオプションではありません。したがって、このコードは無視できます。

テンプレートの保存

元のファイルを上書きせずにテンプレートの新しいバージョンを保存するには、バージョンテンプレートを保存をクリックします。それ以外の場合は、プロファイルテンプレートを保存をクリックして元のファイルを上書きします。