Tealiumカスタムコンテナタグ
Tealiumカスタムコンテナは、任意の種類のJavaScriptタグを実装するためのJavaScriptテンプレートとコードフレームワークを提供するタグです。
カスタムコンテナタグが使用される場合、ほとんどの場合はTealiumジェネリックタグがタグのニーズを満たすよりも簡単な解決策です。カスタムコンテナは高度なタグにのみ必要であり、完了するためにJavaScriptコードの記述が必要です。
前提条件
動作原理
Tealiumカスタムコンテナタグは、タグマーケットプレイスで見つかる公式の統合と同じコードテンプレートを使用します。カスタムコンテナで構築されたタグは、iQのネイティブ機能(組み込みのEコマース拡張変数、データマッピング、イベントトラッキング、その他の拡張機能)を活用することができます。
ほとんどの場合、タグマーケットプレイスからプレビルドのタグを使用することがベストプラクティスですが、必要なタグが利用できない場合は、タグを追加するためのいくつかのオプションがあります。ほとんどのタグは、TealiumジェネリックタグまたはTealiumピクセルコンテナタグのいずれかを使用して実装できます。
Tealiumカスタムコンテナタグを実装するには、タグテンプレートを変更するためのJavaScriptコードの記述が必要です。不慣れなJavaScriptコードを読み取り、必要に応じてカスタマイズすることに慣れている必要があります。
テンプレートの概要
まず、タグマーケットプレイスに移動し、カスタムコンテナタグを追加します。
カスタムコンテナには構成フィールドはありませんが、ロードルール、データマッピング、および拡張機能の使用がサポートされています。
データマッピング
他のタグと同様にデータマッピングを構成します。データマッピングはタグテンプレート変数u.data
に格納されます。カスタムコンテナタグはカスタムデータマッピングのみをサポートしており、マッピングツールボックスで選択した名前がタグテンプレートコードで値を参照するために使用されます。
たとえば、customer_id
をuser_id
という名前のカスタム宛先にマッピングする場合、タグテンプレートでこの値を使用する場合は、u.data['user_id']
として参照します。
コード構造
カスタムコンテナタグの構成は、タグテンプレートで行われます。以下の手順では、タグテンプレートの管理方法について理解しており、必要な権限を持っていることを前提としています。
以下の表は、テンプレート内の異なるコードセクションを示しています。各セクションは、テンプレート内の/* Start */
と/* End */
のコメントで始まります。
テンプレートコード | 説明 | 備考 |
---|---|---|
タグライブラリコード | 経験豊富なユーザーは、静的ライブラリ関数を追加したり、3rdパーティのURLをインスタンス化してライブラリコードをロードしたりすることができます。 | デフォルトではこのセクションは空です(行21-22)。 |
タグスコープ拡張コード | ##UTGEN## は、タグにスコープが構成されたTealium iQ拡張機能のコードが後で挿入される場所です。 |
このセクションを編集しないでください(行56-59)。 |
マッピングコード | このセクションでは、選択した値とテンプレートにマッピングされたアイテムとの1対1のマッピングが行われます。 | デフォルトのコードはほとんどのユースケースに適しています。変更を十分にテストしてください。 |
タグ送信コード | ベンダーのタグは、ベンダーのURLを呼び出す前に特定のデータを処理またはフォーマットする必要があります。 | 通常、URLの変更、ベンダーの仕様に合わせてデータポイントの値を変更、データをクエリ文字列パラメータにフォーマットするなど、変更が含まれます。 |
ローダーコールバック関数 | 一部のタグでは、JavaScriptファイルのロード後にデータを送信する必要があります。これらのデータの変更は、ローダーコールバック内で行う必要があります。ローダーコールバック関数内では、外部JavaScriptファイルのロード後に実行するJavaScriptコードを挿入します。u.initialized=true; の行は、utag.view またはutag.link の呼び出しがある場合にJavaScriptファイルが2回ロードされないようにします。 |
|
ローダーコールバックタグ送信コード | 外部JavaScriptファイルのロード後に実行されるJavaScriptコードです。 | このセクションを編集しないでください(行86-90)。 |
ローダー関数の呼び出し | 実装するタグの種類に応じて、外部JavaScriptファイルなどのさまざまなタイプのファイルをロードすることができます。必要に応じて// の行をアンコメントします。 |
このセクションを編集しないでください(行96-108)。行100のiframe イメージリクエストのローダーを呼び出すには、行101のscript をアンコメントします。if-else コードをアンコメントして、u オブジェクトが初期化されていない場合にファイルが2回実行されないようにします。タグにコールバックが必要ない場合は、"cb":u.loader_cb を"cb":null に構成します。c.join(u.data.qsp_delim) はクエリ文字列のサンプルで、c はキー値配列で、base_url には’?‘が先行しています。 |
テンプレート変数
以下の表は、カスタムコンテナテンプレート内で見つかる変数の説明です。
コード | 説明 |
---|---|
tv |
テンプレートバージョン(version.YYYYMMDD 形式)。このコメントのフォーマットと内容は重要であり、Tag Status Checkerなどのさまざまなシステムがテンプレートの制御と検証に使用します。 |
tc |
ファイルの変更内容を説明するテンプレートコメントです。 |
u |
最初に作成されるのはu オブジェクトで、ベンダータグ/サービスに必要なすべてのプロパティと関数が含まれます。 |
id |
タグのUIDに構成されるu オブジェクトのプロパティです。 |
utag.o[<ACCOUNT.PROFILE>] .sender |
プロパティを持つエントリ(オブジェクト)を取得するグローバルオブジェクトです。 |
utag.ut |
モダンテンプレートはこのオブジェクトに依存しており、一部の古いバージョンのutag.js は作成しません。このオブジェクトは参照されるか、存在しない場合に作成されます。 |
utag.js |
実行中のこのファイルのバージョンから一致が作成されます。入力はut4.45.201805212154 のような形式であり、2つのドット(ut4. と次の. の間)の間の部分文字列を取得します。 |
utag.ut.loader |
テンプレートで使用するために参照される関数です。ローダー関数が未定義であるか、正当な一致(上記で決定される)が見つからないか、一致の2番目の部分文字列が指定された数よりも小さい場合、テンプレートの定義されたローダー関数が使用されます。この関数は、必要な画像、iframe、またはスクリプトリクエストを行います。テンプレートがローダー関数が未定義の場合、フォールバックとして定義が提供されます。 |
utag.ut.typeOf |
utag.ut.loader と同様のチェックを行う関数で、typeOf 演算子と同様の機能を提供しますが、null に対して「オブジェクト」を返さず、さまざまなデータ型(基本的および抽象)に対してより具体的な値を返します。toString() 関数を使用します。 |
u.ev |
このオブジェクトは、テンプレートが応答するTealiumイベント(view またはlink )のルックアップを含みます。このチェックは、u.send 関数の開始時に行われます。 |
##UTGEN## |
最初のパブリッシュエンジンマーカーで、パブリッシュエンジンがタグにスコープが構成されたTealium iQ拡張機能のコードを挿入します。 |
u.map |
パラメータとイベントのマッピングのためのルックアップを含むオブジェクトです。 |
u.extend |
拡張機能関数の定義を含む配列です。拡張機能は、タグの実行を完全に停止するためにfalse を返す目的で追加される場合があります。 |
u.callBack |
スクリプト/イメージ/iframeリクエストによって行われるコールバックであり、u.loader_cb を呼び出します。 |
u.loader_cb |
u.callBack によって呼び出されるコールバック関数です。 |
u.send |
2つの引数a とb を受け入れる関数で、さまざまなu.send 固有のパラメータが定義されます:
|
u.data |
Tealium iQの構成からの構成が格納されたオブジェクトです。##UTVARconfig_<UI configuration>## は、パブリッシュエンジンがそれらの値を挿入するためのマーカーです。<UI configuration> は、utui.config.before-min.js/utui.config.js のconfigFields 配列内のオブジェクトのIDに対応します。 |
u.data.base_url |
ベースURL変数です。これは、動的な値なしでベンダーファイルをロードするためのURLです。 |
utag.DB |
タグの実行を示すデバッグステートメントです。 |
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:購入のロードとトラッキング
以下のコードはベンダーから提供され、タグテンプレートに組み込む必要があります。このコードは2つの主要なパートに分かれており、Part AとPart Bとしてコメントが付けられています。このコードは、外部のJavaScriptファイルがロードされ(Part A)、その後、ベンダーオブジェクト変数が動的な値で構成され、トラッキングコールがトリガーされます(Part B)。
この例では、組み込みの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では、JavaScript URLがcid
というカスタムクエリ文字列パラメータを持つ形でロードされています。カスタムコンテナで外部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 /* "account_id"または"base_url"にマッピングされた値がTiQで構成されると、これらのデフォルト値が置き換えられます。 */
54 };
ローダーコールバック関数
u.loader
を使用して外部ファイルがロードされると、コールバック関数u.loader_cb
が実行されるようにしたいです。ローダーコールバック関数セクションの行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 */
タグ送信コード
このコードは、カスタムコンテナタグがロードされたときに実行されます。タグを実行するために必要なデータを初期化します。この場合、ベースURLに動的なcid
パラメータを追加し、ビルトイン変数から必要なEコマースデータをコピーします。
タグ送信コードの下の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
)。
- 1つのオプションは、
tealium_event
を使用し、特定のイベント名に基づいてキーをオンにすることです。 - もう1つのオプションは、変換または特定の種類の変換が発生していることを示す値を持つ独自の変数を使用することです。これにより、各イベントごとに送信するデータポイントを柔軟に構成できます。
変換コード値のチェックを使用する場合、一致する値が1つだけであることを確認することができますが、オプションのパラメータを送信する方法が制限される可能性があります。
この例では、変換コード変数をチェックするオプションを使用します。この値をUIでconversionCode
にマッピングし、テンプレート内のu.data
オブジェクトに手動で追加しません。
タグテンプレートを次のように更新してください。
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.
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 /* End Loader Callback Tag Sending Code */
102 };
オプションのデータをオブジェクトに入れる方法にはいくつかのオプションがあります。使用しないアイテムを除外する必要があります。
- ハードコードされたパラメータ
常に使用するパラメータのみをオブジェクトに直接入れます。値はu.data
変数を参照します(名前はUIのマッピングから取得されます)。同じパラメータのみを送信する場合、このオプションは使用しやすいですが、各イベントタイプごとにさまざまなパラメータを送信する必要がある場合は、それぞれのイベントタイプを個別に構成する必要があります。 - 条件付きパラメータ
カスタムパラメータ用のオブジェクト変数を作成し、if
ステートメントを使用して各パラメータを条件付きで構成します。カスタムパラメータがいくつかある場合、これはかなり網羅的なリストになる可能性があります。 - ループと除外パラメータ
カスタムパラメータ用のオブジェクト変数を作成し、u.data
オブジェクトをループ処理し、カスタムパラメータとして各変数を構成しますが、追加しないことがわかっている変数は除外します。
この例では、ループと除外の方法を使用します。u.data
内の各変数に対して、カスタムパラメータオブジェクトoptionalParams
に対応する変数を構成します。既知のパラメータbase_url
、cid
、conversionCode
は除外します。
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 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 /* End Loader Callback Tag Sending Code */
100 }
この時点で、JavaScriptファイルがロードされ、conversionCode
の条件が満たされた場合にtrackConversion
がトリガーされます。クエリ文字列ですべての値が正しく渡されたかどうかを確認し、必要に応じて個別のコードを調整します。
例2:初期化、ロード、およびトラッキング
コードスニペット
以下のコードはベンダーから提供され、タグテンプレートに組み込む必要があります。このコードスニペットは、Part A、Part B、Part C、およびPart Dとして4つのパートに分かれています。
このコードは、JavaScriptタグの一般的なパターンを示しています。
- Part A:最初に初期化されたベンダーオブジェクト変数。
- Part B:外部のJavaScriptファイルをロードします。
- Part C:動的な値でトラッキングコールをトリガーします。
- 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を呼び出す前に特定のデータを処理またはフォーマットする必要があります。
タグテンプレートを次のように更新してください。
- 76行目のコメント
// Insert your tag sending code here.
を削除します。 - Part Aの
<script>
タグの間のコードをコピーし、76行目に貼り付けます。
次のスニペットは、テンプレート内の完了したセクションを示しています。
74 /* Start Tag Sending Code */
75
76 if (!window.mstag) mstag = {loadTag : function(){},time : (new Date()).getTime()};
77
78 /* End Tag Sending Code */
Part B: ローダー関数の呼び出し
このコードは、ローダー関数の呼び出しセクションで使用されます。このスクリプトは同期的であり、次のステップに進む前に完了します。u.data
にscript_id
の変数を追加し、ベースURL(b7381bb8-71e7-408c-91d0-3adb90b5c736
)のクライアント固有の部分を格納します。
タグテンプレートを次のように更新してください。
- 99行目と101-104行目のコメントを削除します。
- 101行目の
src
の値をベンダーのベースURLとIDに置き換えて、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" : "//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 /* End Loader Function Call */
Part C: ローダーコールバック関数
このコードは、ローダーコールバック関数セクションで使用されます。進む前に、domainId
やactionid
などの動的に表示される変数をマッピングしておく必要があります。
タグテンプレートを次のように更新してください。
- 84行目から85行目と91行目のコメントを削除します。
- 88行目に貼り付けるために、Part Cの
<script>
タグの間のコードをコピーします。 domainID
とactionid
の値をu.data.~
変数で上書きします。
次のスニペットは、テンプレート内の完了したセクションを示しています。
81 /* Start Loader Callback Function */
82 /* Un-comment the single-line JavaScript comments ("//") to use this Loader callback function. */
83
84 u.loader_cb = function () {
85 u.initialized = true;
86 /* Start Loader Callback Tag Sending Code */
87
88 mstag.loadTag("analytics", {dedup:"1",domainId:u.data.domain_id,type:"1",revenue:"",actionid:u.data.action_id});
89
90 /* End Loader Callback Tag Sending Code */
91
92 };
93 /* End Loader Callback Function */
Part D: No scriptオプション
このコードは、ブラウザがJavaScriptをサポートしていないか、JavaScriptが無効になっている場合のフォールバックオプションを提供します。TealiumはJavaScriptを必要とするため、このフォールバックコードはオプションではありません。したがって、このコードは無視してください。
テンプレートの保存
元のファイルを上書きせずにテンプレートの新しいバージョンを保存するには、「Save Version Template」をクリックします。元のファイルを上書きする場合は、「Save Profile Template」をクリックします。
最終更新日 :: 2024年March月29日