Tealiumカスタムコンテナタグ

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

前提条件

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

動作原理

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

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

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

テンプレートの概要

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

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

データマッピング

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

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

コード構造

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

テンプレート変数

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

Eコマース変数

Eコマース拡張からの値を使用する場合、各値のコピーをテンプレート固有の変数として作成することを強くお勧めします。ベンダー固有のフォーマットのために元の値を変更すると、他のタグに悪影響を及ぼす可能性があります。

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: 購入のロードとトラッキング

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

タグテンプレートコードでは、この慣習は次の2つの関数を使用して実現されます：

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

この例では、組み込みのEコマース変数の使用方法も示されています。

オリジナルスクリプト

// 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', {
    /*オプションパラメータ。値を入力するか、不要なパラメータを削除*/
    conversionType: 'lead',
    revenue: 0.0,
    currency:'USD',
    orderId:'',
    promoCode:'',
    customParam1:'', /*任意のカスタムパラメータ。例: Airport: 'JFK'*/
    customParam2:'', /*任意のカスタムパラメータ。例: 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 /* ここでデフォルトのタグパラメータ値を初期化 */
49 /* 例: */
50 /* "account_id" : "1234567" */
51     "base_url" : "https://services.xg4ken.com/js/kenshoo.js?",
52     "cid" : ""
53 /* TiQで"account_id"または"base_url"にマッピングされた値がこれらのデフォルト値を置き換えます。 */
54 };

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

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

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

81 /* ローダーコールバック関数の開始 */
82 /* 単一行のJavaScriptコメント（"//"）を解除して、ローダーコールバック関数を使用します。 */
83
84 u.loader_cb = function () {
85 u.initialized = true;
86 /* ローダーコールバックタグ送信コードの開始 */
87
88 // ここにローダー後のタグ送信コードを挿入します。
89
90 /* ローダーコールバックタグ送信コードの終了 */
91 };
92 /* ローダーコールバック関数の終了 */

ローダー関数の呼び出し

以下のスニペットは、タグテンプレートの完了したセクションを示しています。この例に示されているように、101行目のコメントを解除してください：

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" : 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 /* ローダー関数呼び出しの終了 */

タグ送信コード

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

76行目以下のタグ送信コードを以下のように更新してください：

74 /* タグ送信コードの開始 */
75
76 // ここにタグ送信コードを挿入します。
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 /* タグ送信コードの終了 */

次に、コンバージョンを追跡するタイミングを決定する必要があります（kenshoo.trackConversion）。

• 1つのオプションは tealium_event を使用し、特定のイベント名からキーを取得することです。
• 別のオプションは、コンバージョンまたは特定の種類のコンバージョンが発生していることを示す値を持つ独自の変数を使用することです。これにより、各イベントで送信されるデータポイントに柔軟性が生まれます。
• コンバージョンイベントに必要な一意のパラメータであるコンバージョンコード値のチェックを使用することもできます。この方法では1つの値のみをチェックすることができますが、オプションパラメータの送信方法が制限される可能性があります。

この例では、コンバージョンコード変数のチェックを使用するオプションを使用しています。この値を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 };

パートB: ローダー関数の呼び出し

このコードはローダー関数の呼び出しセクションで使用されます。このスクリプトは同期的であり、次のステップに進む前に完了します。u.dataにscript_idという変数を追加し、ベース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 /* ローダー関数の呼び出しを終了 */

パートC: ローダーコールバック関数

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

タグテンプレートファイルを以下のように更新してください：

1. 行番号84-85および91のコメントを解除します。
2. 行番号88にある// Insert your post-Loader tag sending code hereというコメントを削除します。
3. パート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 /* ローダーコールバック関数の終了 */

パートD: No scriptオプション

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

テンプレートの保存

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