タグ管理のベストプラクティス

整理

名前を付けて保存と上書き保存

変更を保存する方法は2つあります。

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

名前を付けて保存を使用するシナリオ：

• 現在のバージョンが本番環境にパブリッシュされている場合、元に戻せるようにするには名前を付けて保存を使用します。
• 新しいプロジェクトを開始する場合、以前の作業と分けるために、名前を付けて保存を使用して新しいバージョンを作成します。
• どちらのオプションを選択すべきか不明な場合は、以前のバージョンに戻せるため、名前を付けて保存が最も安全です。

詳細については、保存についておよびパブリッシュについてを参照してください。

例：本番バージョンを保持するための「名前を付けて保存」と「上書き保存」

この例では、本番環境にパブリッシュされたバージョンがあり、必要に応じて元に戻せるよう、そのバージョンを保持します。

正しい方法

「バージョンA」は3つの環境（開発、QA、本番）すべてにパブリッシュされています。変更を加えた後、名前を付けて保存を実行して、新しいバージョン「バージョンB」を作成します。その後、再びすべての環境にパブリッシュします。これにより、必要に応じて以前の本番バージョン（バージョンA）にロールバックできます。

誤った方法

「バージョンA」を上書き保存して、本番環境に複数回パブリッシュします。この場合、必要になっても以前の本番バージョンにロールバックする方法はありません。

ラベルとタイトル

ラベルを使用して、関連するタグ、ロードルール、拡張機能を分類します。特に、順番どおりに実行する必要があるものに使用してください。

3ステップ中のステップ1のように、内容が分かるタイトルを使用します。

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

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

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

イベントトラッキング

イベント名

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の更新

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

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

タグテンプレートを最新バージョンに更新する

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

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

同一ベンダーの複数のタグを統合する

同一ベンダーの複数のタグを1つのタグインスタンスに統合すると、ページに読み込まれるutag.#.jsファイルが少なくなるため、ページのパフォーマンスが向上します。また、この方法により、Tealiumでベンダータグの構成を保守しやすくなります。

詳細については、複数のFloodlightタグの構成を参照してください。

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

すべてのタグとベンダーコードを非同期で読み込むことがベストプラクティスです。この方法では、タグはページ上の他のコンテンツと並行して読み込まれます。タグの応答や読み込みが遅い場合でも、サイトの他の部分の処理速度には影響しません。

ページコンテンツのパーソナライズに使用するデータを取得するコードが必要な場合など、タグやベンダーコードの読み込みが相互に依存しているときは、同期読み込みが必要です。このオプションを使用するとサイトの読み込みは遅くなりますが、ページの他の部分が表示される前に、正しいデータ（訪問の名前や配送先など）が読み込まれます。

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

タグのバンドル

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

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

ページ内でのコード配置

Universal Tag（utag.js）は、headやフッターではなく、bodyタグの先頭に配置することをお勧めします。ただし、その前にデータレイヤーオブジェクトを宣言し、値を構成しておく必要があります。この配置により、最も多くのベンダーとの互換性を確保できます。

詳細については、環境の管理を参照してください。

タグの実行タイミング

タグの実行タイミング構成では、タグを即座に実行するか、DOM Ready 時に実行するかを指定します。タグの実行タイミングを Prioritized に構成すると、タグはページに読み込まれた直後に実行されます。タグの実行タイミングを DOM Ready に構成すると、タグは DOM Ready イベントが発生するまで待機してから実行されます。この構成は、各タグの詳細構成にあります。

重要なタグ（分析タグなど）の実行を優先するには、待機フラグをオフに構成します。

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

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

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

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

拡張機能

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

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

組み込み拡張機能には、次の利点があります。

• 管理された依存関係
  データレイヤー変数の名前を変更すると、その変数を参照するすべての組み込み拡張機能が自動的に更新されます。これは、組み込み拡張機能が元の変数への参照を保持しているためです。
  b['user_login_status'] のようにコード内で参照されているデータレイヤー変数は、変数名が変更された場合に手動で更新する必要があります。
• 分かりやすい変数名
  変数にユーザー向けの名前（エイリアス）が存在する場合、組み込み拡張機能には常にその名前が表示されます。これにより、構成の可読性が向上します。
  コード内で参照する変数には実際の名前を使用する必要があります。その名前が分かりにくかったり不明瞭だったりすると、コードの動作や依存関係を把握することが難しくなります。
• 構文エラーなし
  組み込み拡張機能は、パブリッシュするたびに同じ一貫したコードを生成することが保証されているため、構文エラーのリスクがなくなります。
  カスタム JavaScript コードには、予期しない構文エラー（通常はパブリッシュエンジンによって検出されます）やランタイムエラーが発生するリスクが常にあります。

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

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

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

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

JavaScript コード拡張機能では、var と window を使用してグローバル変数とローカル変数を明示的に定義してください。これにより、utag.js 内またはページのグローバルスコープで宣言されている変数との名前の競合を防止できます。

誤り：

variable_name = "some value";

正しい例：

var variable_name = "local value";

window.variable_name = "global value";

ロードルール

変数が存在することを確認する

変数の値を確認する前に、その変数が存在することを確認することをお勧めします。次の例では、MyVariable の値が 1000 に等しいかどうかを確認する前に、MyVariable が定義されているかどうかを検証します。

変数が存在することを確認せず、その値が null の場合、コードでエラーが発生し、タグが実行されない可能性があります。

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