--- title: タグ管理のベストプラクティス description: Tealiumタグ管理を実装するためのベストプラクティスガイド。 url: https://docs.tealium.com/ja/tag-management/getting-started/best-practices/ --- ## 整理 ### 名前を付けて保存と上書き保存 変更を保存する方法は2つあります。 * **名前を付けて保存** – 以前のバージョンを保持したまま、変更を新しいバージョンとして保存します。 * **上書き保存** – 現在のバージョンに変更を保存し、上書きします。そのバージョンへの変更は元に戻せません。 **名前を付けて保存**を使用するシナリオ： * 現在のバージョンが本番環境にパブリッシュされている場合、元に戻せるようにするには**名前を付けて保存**を使用します。 * 新しいプロジェクトを開始する場合、以前の作業と分けるために、**名前を付けて保存**を使用して新しいバージョンを作成します。 * どちらのオプションを選択すべきか不明な場合は、以前のバージョンに戻せるため、**名前を付けて保存**が最も安全です。 詳細については、[保存について](https://docs.tealium.com/about-saving/)および[パブリッシュについて](https://docs.tealium.com/about-publishing/)を参照してください。 #### 例：本番バージョンを保持するための「名前を付けて保存」と「上書き保存」 この例では、本番環境にパブリッシュされたバージョンがあり、必要に応じて元に戻せるよう、そのバージョンを保持します。 ##### 正しい方法 「バージョンA」は3つの環境（開発、QA、本番）すべてにパブリッシュされています。変更を加えた後、**名前を付けて保存**を実行して、新しいバージョン「バージョンB」を作成します。その後、再びすべての環境にパブリッシュします。これにより、必要に応じて以前の本番バージョン（バージョンA）にロールバックできます。 ##### 誤った方法 「バージョンA」を**上書き保存**して、本番環境に複数回パブリッシュします。この場合、必要になっても以前の本番バージョンにロールバックする方法はありません。 |メリット|デメリット| |---|---| | 以前のバージョンに戻せる。 | なし | | 「バージョン」画面を整理しやすくなる。 | | ### ラベルとタイトル ラベルを使用して、関連するタグ、ロードルール、拡張機能を分類します。特に、順番どおりに実行する必要があるものに使用してください。 `3ステップ中のステップ1`のように、内容が分かるタイトルを使用します。 |メリット|デメリット| |---|---| | 拡張機能の処理順序を維持しやすくなる。 | ラベルの割り当てに多少の手間がかかる。 | | ラベルでフィルタリングして、タグや拡張機能を簡単に見つけられる。 | | 詳細については、[ラベルについて](https://docs.tealium.com/about-labels/)を参照してください。 ## データレイヤーオブジェクト [データレイヤーのベストプラクティス](https://docs.tealium.com/data-layer-best-practices/)を参照してください。 ## イベントトラッキング ### イベント名 Tealiumでは、変数`tealium_event`を使用して、サイト上でトラッキングされる各イベントタイプを一意に識別します。この変数には、トラッキング対象のイベントを識別する値を構成します（Tealiumの命名規則が適用されます）。 推奨値には、以下が含まれますが、これらに限定されません。 | イベントタイプ | tealium_event | |------------|----------------| | カートへの追加 | `cart_add` | | カートからの削除 | `cart_remove`| | カートを空にする | `cart_empty`| | カートの表示 | `cart_view`| | 登録イベント | `user_register` | | ログインイベント | `user_login` | | ログアウトイベント | `user_logout` | | リンクのクリック | `link_click` | 標準化されたイベント名には、次の利点があります。 * 変数名と値に一貫性があるため、実装が明確になります。 * イベントタイプごとに単一の識別子があるため、データマッピングが容易になります。 * イベントは、名前のプレフィックス（`product_`、`cart_`、`user_`）によってカテゴリに分類されます。 #### イベントトラッキングスクリプトの例 ```js utag.link({ tealium_event : "cart_add", product_id : ["shrt123"], product_price : ["12.50"], product_quantity : ["2"] }); ``` ## パフォーマンス ### utag.jsの更新 QA作業を軽減し、プロファイルに最新の最適化と機能が含まれるようにするため、[最新バージョンの`utag.js`](https://docs.tealium.com/ja/release-notes/?filter=tealium-universal-tag)を使用することをお勧めします。 詳細については、[テンプレートの管理](https://docs.tealium.com/manage-templates/)を参照してください。 ### タグテンプレートを最新バージョンに更新する タグが正しく発火するように、すべてのタグとタグテンプレートを最新バージョンに更新することをお勧めします。[テンプレートステータスチェッカー](https://docs.tealium.com/template-status-checker/)ツールを実行して、更新が必要なタグを確認してください。また、更新または非推奨になったタグに関する情報について、[リリースノート](https://docs.tealium.com/release-notes/)も確認してください。 詳細については、[テンプレートの更新](https://docs.tealium.com/manage-templates/#update-a-template)を参照してください。 ### 同一ベンダーの複数のタグを統合する 同一ベンダーの複数のタグを1つのタグインスタンスに統合すると、ページに読み込まれる`utag.#.js`ファイルが少なくなるため、ページのパフォーマンスが向上します。また、この方法により、Tealiumでベンダータグの構成を保守しやすくなります。 詳細については、[複数のFloodlightタグの構成](https://docs.tealium.com/configuring-multiple-floodlight-tags/)を参照してください。 ### utag.jsを非同期で読み込む すべてのタグとベンダーコードを非同期で読み込むことがベストプラクティスです。この方法では、タグはページ上の他のコンテンツと並行して読み込まれます。タグの応答や読み込みが遅い場合でも、サイトの他の部分の処理速度には影響しません。 ページコンテンツのパーソナライズに使用するデータを取得するコードが必要な場合など、タグやベンダーコードの読み込みが相互に依存しているときは、同期読み込みが必要です。このオプションを使用するとサイトの読み込みは遅くなりますが、ページの他の部分が表示される前に、正しいデータ（訪問の名前や配送先など）が読み込まれます。 詳細については、[同期読み込み](https://docs.tealium.com/tag-advanced-settings/#synchronous-load)を参照してください。 |メリット|デメリット| |---|---| | 非同期で読み込まれるファイルは、ページの読み込み速度に影響しない。 | ファイルを読み込むタイミングを制御しにくい。主にA/Bテストベンダーに影響する。| | 応答が遅い外部ファイルによってページの読み込みが停止したり、ページが機能しなくなったりすることがない。 |詳細な制御が必要な場合は、`utag.sync`を使用し、パーソナライズ機能やA/Bテスト機能をその中に含める。 | | | 応答が遅い外部ベンダーのスクリプトやファイルでは、トラッキング呼び出しを取りこぼす可能性がある。 | ### タグのバンドル **タグのバンドル**機能は、プロファイルのパブリッシュ構成内で構成します。この機能を有効にすると、ベンダータグのコードがメインの`utag.js`ファイルに組み込まれます。これにより、ページから送信されるHTTPリクエストの数が減り、パフォーマンスが向上します。 詳細については、[バンドルフラグ](https://docs.tealium.com/tag-advanced-settings/#bundle-flag)を参照してください。 |メリット|デメリット| |---|---| | gzip圧縮の効率が向上するため、サイトで読み込まれるTealiumファイルの合計サイズが小さくなる。 | なし | | 重要なタグ（アナリティクス）がより早く実行され、ランディングページでのトラッキングが向上する。 | | | | | ### ページ内でのコード配置 Universal Tag（`utag.js`）は、headやフッターではなく、bodyタグの先頭に配置することをお勧めします。ただし、その前にデータレイヤーオブジェクトを宣言し、値を構成しておく必要があります。この配置により、最も多くのベンダーとの互換性を確保できます。 詳細については、[manage-environments](https://docs.tealium.com/manage-environments/)を参照してください。 |メリット|デメリット| |---|---| | タグを発火するタイミング（ページの早い段階または後の段階）をより詳細に制御できる。 | `utag.js`が読み込まれる前にデータレイヤーオブジェクトを使用できるようにするため、追加の開発が必要になる場合がある。| | 多変量テスト用タグとの互換性が向上する。 | | ### タグの実行タイミング **タグの実行タイミング**構成では、タグを即座に実行するか、DOM Ready 時に実行するかを指定します。**タグの実行タイミング**を `Prioritized` に構成すると、タグはページに読み込まれた直後に実行されます。**タグの実行タイミング**を `DOM Ready` に構成すると、タグは DOM Ready イベントが発生するまで待機してから実行されます。この構成は、[各タグの詳細構成](https://docs.tealium.com/tag-advanced-settings/#tag-timing)にあります。
重要なタグ（分析タグなど）の実行を優先するには、**待機フラグ**をオフに構成します。
詳細については、[タグの実行タイミング](https://docs.tealium.com/tag-advanced-settings/#tag-timing)を参照してください。 |長所|短所| |---|---| |重要なタグをできるだけ早く実行するよう優先し、データ収集を最大化できます。|ブラウザーが表示用画像の読み込みよりもタグの読み込みを優先する可能性があり、ユーザーエクスペリエンスにわずかな影響を与えることがあります。| |タグファイルがキャッシュされていない可能性が高いランディングページで、タグがより早く実行されます。|| ### 必要な場合にのみイベントリスナーを読み込む イベントリスナーにイベントルールを構成しない場合、そのイベントリスナーはすべてのページで読み込まれます。すべてのページでイベントリスナーを読み込むと、サイトのページ配信が遅くなり、不要なデータが収集されます。トリガーのアクションが発生すると予想されるページ、または訪問のアクションデータが必要なページでのみイベントリスナーを読み込むよう、ルールを使用することをお勧めします。 詳細については、[イベントルール](https://docs.tealium.com/event-rules/)を参照してください。 ## 拡張機能 ### 組み込み拡張機能を使用する Tealium は、コーディング経験が限られている非技術系ユーザーと、独自の JavaScript を記述できる開発者の両方を対象に設計されています。組み込み拡張機能の多くは、カスタム JavaScript コード拡張機能として簡単に書き直すことができますが、可能な限り組み込み拡張機能を使用し、既存のオプションでは提供されていない追加機能が必要な場合にのみカスタム JavaScript を記述することをお勧めします。 組み込み拡張機能には、次の利点があります。 * **管理された依存関係** データレイヤー変数の名前を変更すると、その変数を参照するすべての組み込み拡張機能が自動的に更新されます。これは、組み込み拡張機能が元の変数への参照を保持しているためです。 `b['user_login_status']` のようにコード内で参照されているデータレイヤー変数は、変数名が変更された場合に手動で更新する必要があります。 * **分かりやすい変数名** 変数にユーザー向けの名前（エイリアス）が存在する場合、組み込み拡張機能には常にその名前が表示されます。これにより、構成の可読性が向上します。 コード内で参照する変数には実際の名前を使用する必要があります。その名前が分かりにくかったり不明瞭だったりすると、コードの動作や依存関係を把握することが難しくなります。 * **構文エラーなし** 組み込み拡張機能は、パブリッシュするたびに同じ一貫したコードを生成することが保証されているため、構文エラーのリスクがなくなります。 カスタム JavaScript コードには、予期しない構文エラー（通常はパブリッシュエンジンによって検出されます）やランタイムエラーが発生するリスクが常にあります。 詳細については、[拡張機能について](https://docs.tealium.com/about-extensions/)を参照してください。 |長所|短所| |---|---| |ほとんどのユーザーにとって理解および保守が容易です。|なし| |問題が発生した際にデバッグしやすくなります。|| |組み込み拡張機能は安全であり、JavaScript エラーを引き起こしません。|| ### 拡張機能からタグコードを削除する 拡張機能からコードスニペットを実行するのではなく、タグマーケットプレイスまたはカスタムコンテナからタグコードを実行することをお勧めします。これにより、タグの保守が容易になります。 ### グローバル JavaScript 変数とローカル JavaScript 変数 JavaScript コード拡張機能では、`var` と `window` を使用してグローバル変数とローカル変数を明示的に定義してください。これにより、`utag.js` 内またはページのグローバルスコープで宣言されている変数との名前の競合を防止できます。 誤り： ```js variable_name = "some value"; ``` 正しい例： ```js var variable_name = "local value"; ``` ```js window.variable_name = "global value"; ``` |長所|短所| |---|---| |サイト内の他の場所にある変数との競合を回避できます。|なし| ## ロードルール ### 変数が存在することを確認する 変数の値を確認する前に、その変数が存在することを確認することをお勧めします。次の例では、`MyVariable` の値が 1000 に等しいかどうかを確認する前に、`MyVariable` が定義されているかどうかを検証します。![](https://docs.tealium.com/images/tag-management/load-rules/variable-is-defined.png) 変数が存在することを確認せず、その値が `null` の場合、コードでエラーが発生し、タグが実行されない可能性があります。 詳細については、[ロードルールについて](https://docs.tealium.com/about-load-rules/)を参照してください。 |長所|短所| |---|---| |変数が定義されていない場合のエラー状態を回避できます。|なし|