--- title: Tealiumカスタムコンテナタグ description: Tealiumカスタムコンテナは、任意の種類のJavaScriptタグを実装するためのコードフレームワークを備えたJavaScriptテンプレートを提供するタグです。 url: https://docs.tealium.com/ja/iq-tag-management/tags/tealium-custom-container-tag/ ---
カスタムコンテナタグが使用される場合のほとんどで、[Tealium Generic Tag]()は、ほとんどのタグニーズを満たすよりシンプルな解決策です。カスタムコンテナは高度なタグにのみ必要であり、完成させるためにJavaScriptコードの記述が必要です。
## 前提条件 * [タグテンプレートについて]() * [テンプレート管理の権限](https://docs.tealium.com/about-user-permissions/) ## 動作原理 Tealiumカスタムコンテナタグは、タグマーケットプレイスで見つかる公式統合と同じコードテンプレートを使用します。カスタムコンテナで構築されたタグは、iQのネイティブ機能、例えば組み込みのEコマース拡張変数、データマッピング、イベントトラッキング、その他の拡張機能を活用できます。 [タグマーケットプレイス]()から事前に構築されたタグを使用することがベストプラクティスですが、必要なタグが利用できない場合は、タグを追加するいくつかのオプションがあります。ほとんどのタグは、[Tealium Generic Tag]()または[Tealium Pixel Container tag]()を使用して実装できます。 Tealiumカスタムコンテナタグを実装するには、タグテンプレートを変更するためにJavaScriptコードを書く必要があります。見慣れないJavaScriptコードを読み、自分のニーズに合わせてカスタマイズすることに慣れている必要があります。 ## テンプレートの概要 まず、タグマーケットプレイスにアクセスしてカスタムコンテナタグを追加します。 カスタムコンテナには構成フィールドがありませんが、ロードルール、データマッピング、拡張機能の使用をサポートしています。 ### データマッピング 他のタグと同様にデータマッピングを構成します。データマッピングはタグテンプレート変数 `u.data` に保存されます。カスタムコンテナタグはカスタムデータマッピングのみをサポートし、マッピングツールボックスで選択した名前がタグテンプレートコードで値を参照する際に使用する名前と同じです。 たとえば、`customer_id` を `user_id` というカスタム宛先にマッピングした場合、タグテンプレートでこの値を使用する必要がある場所では、`u.data['user_id']` として参照します。 ![](https://docs.tealium.com/images/iq-tag-management/iq-custom-container-mapping.png) ### コード構造 カスタムコンテナタグの構成のほとんどは、タグテンプレート、つまりタグの基本となるコードで行われます。以下の手順は、[タグテンプレートの管理方法]()に精通しており、必要な権限を持っていることを前提としています。 ![](https://docs.tealium.com/images/iq-tag-management/tags/tealium_custom_container_tag_code_structure.png)​​ ### テンプレート変数 以下の表は、カスタムコンテナテンプレートに含まれる変数を説明しています。 |**コード**| **説明**| |-----------------| ---------------| |`tv`| テンプレートバージョン、フォーマット: `version.YYYYMMDD`。このコメントのフォーマットと内容は重要で、Tag Status Checkerなどのシステムがテンプレートの制御と検証に使用します| |`tc `| ファイルの変更を説明するテンプレートコメント。| |`u`| 最初に作成される`u`オブジェクトは、ベンダータグ/サービスが必要とするすべてのプロパティと機能を含んでいます。| |`id`| タグのUIDに構成される`u`オブジェクトのプロパティ。| |`utag.o[] .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`に対しては「object」とは返さず、`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_##`は公開エンジンがその値を挿入するマーカーです。``は`utui.config.before-min.js/utui.config.js`の`configFields`配列内のオブジェクトのIDに対応します。| |`u.data.base_url`| ベースURL変数。これは動的値なしでベンダーファイルをロードするURL、または完全に動的なURLです。| |`utag.DB`| タグの実行を示すデバッグステートメント。| ### Eコマース変数 [Eコマース拡張]()からの値を使用する場合、各値のコピーをテンプレート固有の変数として作成することを強くお勧めします。ベンダー固有のフォーマットのために元の値を変更すると、他のタグに悪影響を及ぼす可能性があります。 ```js 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コマース変数の使用方法も示されています。 #### オリジナルスクリプト ```html // Part A // Part B ``` #### ベースURLの構成 Part Aでは、`cid`というカスタムクエリ文字列パラメータを持つJavaScript URLがロードされています。`cid`値を動的にする必要があります。Customer Containerで外部JavaScriptファイルをロードするには、51行目の`u.data`オブジェクト内に`base_url`値を構成します。この値は後で`u.loader`関数によってコードで使用されます。 ```js 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`は外部ファイルがロードされた後に呼び出されます。 以下のスニペットは、タグテンプレートの完成したセクションを示しています： ```js 81 /* ローダーコールバック関数の開始 */ 82 /* 単一行のJavaScriptコメント（"//"）を解除して、ローダーコールバック関数を使用します。 */ 83 84 u.loader_cb = function () { 85 u.initialized = true; 86 /* ローダーコールバックタグ送信コードの開始 */ 87 88 // ここにローダー後のタグ送信コードを挿入します。 89 90 /* ローダーコールバックタグ送信コードの終了 */ 91 }; 92 /* ローダーコールバック関数の終了 */ ``` #### ローダー関数の呼び出し 以下のスニペットは、タグテンプレートの完了したセクションを示しています。この例に示されているように、101行目のコメントを解除してください： ```js 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行目以下のタグ送信コードを以下のように更新してください： ```js 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` の存在をチェックするとき、何らかの値が存在するためにのみ行われます。 タグテンプレートを以下のように更新してください： ```js 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のコメントを解除します。 1. 行番号101の"src"の値をベンダーのベースURLとIDに置き換えます。 以下のスニペットは、タグテンプレートの完成したセクションを示しています： ```js 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のコメントを解除します。 1. 行番号88にある`// Insert your post-Loader tag sending code here`というコメントを削除します。 1. パートCの`