Tealium iQ のベストプラクティス

組織

保存方法

変更を保存するためには2つの方法があります：

• 保存 – 変更を新しいバージョンとして保存し、以前のバージョンを保持します。
• 上書き – 変更を現在のバージョンに保存し、上書きします。バージョンの変更は元に戻すことができません。

以下の場合には 保存 を使用します：

• 現在のバージョンが本番環境に公開されている場合、元に戻すオプションを保持するために 保存 を使用します。
• 新しいプロジェクトを開始する場合、以前の作業と区別するために 保存 を使用します。
• どのオプションを選択するかわからない場合、 保存 メソッドが最も安全です。なぜなら、以前のバージョンに戻すことができるからです。

詳細については、保存について と 公開について を参照してください。

例: 保存と上書きを使用して Prod バージョンを保持する

この例では、Prod に公開されたバージョンがあり、必要に応じて元に戻すためにそのバージョンを保持したいとします。

正しい方法

“バージョン A” がすべての環境 (Dev、QA、および Prod) に公開されています。変更を加えた後、保存 を使用して新しいバージョン “バージョン B” を作成します。その後、すべての環境に再度公開されます。これにより、必要に応じて以前の Prod バージョン (バージョン A) にロールバックするオプションが提供されます。

間違った方法

“バージョン A” が複数回の 上書き を使用して Prod に公開されています。必要な場合に以前の Prod バージョンにロールバックする方法はありません。

ラベルとタイトル

関連するタグ、ロードルール、および拡張機能を分類するためにラベルを使用します。特に順序が必要なものにはラベルを使用します。

Step 1 of 3 のような記述的なタイトルを使用します。

詳細については、ラベルについて を参照してください。

データレイヤーオブジェクト

データレイヤーのベストプラクティス を参照してください。

イベントトラッキング

イベント名

Tealium はサイトでトラッキングされる各イベントタイプを一意に識別するために変数 tealium_event を使用します。この変数を、トラッキングされるイベントを識別する値に構成します (Tealium の命名規則が適用されます)。

以下の値が推奨されますが、これに限定されません：

標準化されたイベント名には以下の利点があります：

• 一貫した変数名と値により、実装が明確になります。
• データマッピングが容易になります。イベントタイプに対して単一の識別子があるためです。
• イベントは名前の接頭辞 (product_、cart_、user_) によってカテゴリにグループ化されます。

サンプルのイベントトラッキングスクリプト

utag.link({
    tealium_event    : "cart_add",
    product_id       : ["shrt123"],
    product_price    : ["12.50"],
    product_quantity : ["2"]
});

パフォーマンス

utag.js の更新

最新バージョンの utag.js を使用することをお勧めします。これにより、QA の作業が減少し、プロファイルにテストの最適化と機能が含まれることが保証されます。

詳細については、テンプレートの管理 を参照してください。

タグテンプレートの最新バージョンへの更新

すべてのタグとタグテンプレートを最新バージョンに更新することをお勧めします。これにより、タグが正しく発火することが保証されます。テンプレートステータスチェッカー ツールを実行して、更新が必要なタグを確認してください。また、更新されたタグや非推奨のタグに関する情報は、クライアントサイドタグのリリースノート を確認してください。

詳細については、テンプレートの更新 を参照してください。

複数のベンダータグを結合する

同じベンダーの複数のタグを1つのタグのインスタンスに結合すると、ページのパフォーマンスが向上します。なぜなら、ページで読み込まれる utag.#.js ファイルの数が減るためです。このアプローチは、Tealium iQ でベンダータグの構成を簡単に管理することも可能にします。

詳細については、複数のフラッドライトタグの構成 を参照してください。

utag.js を非同期で読み込む

最良の方法は、すべてのタグとベンダーコードを非同期で読み込むことです。この方法では、タグはページコンテンツの他の部分と並行して読み込まれます。タグが応答または読み込みに遅れても、サイト全体の読み込み速度は遅くなりません。

同期的な読み込みが必要なのは、タグやベンダーコードが読み込むためにお互いに依存している場合です。たとえば、ページコンテンツのパーソナライズのためのデータを取得するためのコードが必要な場合です。このオプションでは、サイトの読み込みが遅くなりますが、ページの表示前に正しいデータ (例: 訪問の名前や配送場所) が読み込まれることが保証されます。

詳細については、同期的な読み込み を参照してください。

タグをバンドルする

タグのバンドル 機能は、プロファイルの公開構成で構成します。この機能を有効にすると、ベンダータグコードがメインの utag.js ファイルに含まれるようになります。これにより、ページから送信される HTTP リクエストの数が減少し、パフォーマンスが向上します。

詳細については、バンドルフラグ を参照してください。

ページコードの配置

Universal Tag (utag.js) は、ボディタグの先頭に配置することをお勧めします (ヘッダーやフッターではなく)。ただし、データレイヤーオブジェクトが宣言され、この前に値が構成されている必要があります。この配置は、最も多くのベンダーとの互換性があります。

詳細については、コードセンター を参照してください。

タグのタイミング

タグのタイミング 構成は、タグが即座に発火するか DOM の準備が完了するまで待機するかを決定します。タグのタイミング が Prioritized に構成されている場合、タグはページに読み込まれるとすぐに実行されます。タグのタイミング が DOM Ready に構成されている場合、タグは DOM の準備イベントが発生するまで待機します。この構成は、各タグの詳細構成 で見つけることができます。

重要なタグ (アナリティクスなど) の実行を優先するために、ウェイトフラグ をオフに構成します。

詳細については、タグのタイミング を参照してください。

必要な場合にのみイベントリスナーを読み込む

イベントリスナーに対してイベントルールを構成しない場合、すべてのページでイベントリスナーが読み込まれます。すべてのページでイベントリスナーを読み込むと、サイトのページの配信が遅くなり、不要なデータが収集されます。トリガーのアクションが発生するか、訪問のアクションデータが必要なページのみでイベントリスナーを読み込むために、ルールを使用することをお勧めします。

詳細については、イベントルール を参照してください。

拡張機能

組み込みの拡張機能を使用する

Tealium は、コーディング経験の限られた非技術ユーザーと、独自の JavaScript コードを書くことに慣れている開発者の両方を対象としています。組み込みの拡張機能の多くは、カスタム JavaScript コード拡張機能として簡単に書き直すことができますが、既存のオプションでは提供されていない追加機能が必要な場合にのみカスタム JavaScript を使用することをお勧めします。

組み込みの拡張機能には以下の利点があります：

• 管理された依存関係
  データレイヤー変数の名前が変更された場合、参照しているすべての組み込み拡張機能が自動的に更新されます。
  b['user_login_status'] のようなコードで参照されるデータレイヤー変数は、変数の名前が変更された場合に手動で更新する必要があります。
• フレンドリーな変数名
  組み込みの拡張機能は、ユーザーフレンドリーな変数名 (エイリアス) を表示します。これにより、構成の読みやすさが向上します。
  コードで参照される変数は、実際の名前を使用する必要があります。これは、理解しづらい場合や依存関係を特定するのが困難な場合があります。
• 構文エラーがない
  組み込みの拡張機能は、常に同じ一貫したコードを生成するため、構文エラーのリスクがありません。
  カスタム JavaScript コードは常に予期しない構文エラーを導入するリスクがあります (ただし、公開エンジンは通常これらをキャッチします)。

詳細については、拡張機能について を参照してください。

拡張機能からタグコードを削除する

拡張機能からタグコードを実行する代わりに、タグマーケットプレイスまたはカスタムコンテナからコードスニペットを実行することをお勧めします。これにより、タグのメンテナンスが容易になります。

グローバルとローカルの JavaScript 変数

JavaScript コード拡張機能では、var と window を使用して明示的にグローバルとローカルの変数を定義する必要があります。これにより、utag.js で宣言された変数やページ全体でグローバルに宣言された変数との名前の衝突を防ぐことができます。

間違った方法:

variable_name = "some value";

正しい方法:

var variable_name = "local value";

window.variable_name = "global value";

ロードルール

変数が存在することを確認するために変数をチェックする

変数の値をチェックする前に、変数が存在することを確認することをお勧めします。以下の例では、MyVariable が定義されているかどうかを確認してから、その値が 1000 と等しいかどうかをチェックしています:

変数が存在せず、値が null の場合、コードはエラーをスローし、タグが発火しない可能性があります。

詳細については、ロードルールについて を参照してください。