タグ、トリガー、変数、データレイヤー

Google タグマネージャでは、「トリガー」、「変数」、「データレイヤー」を使用して、ウェブサイトやモバイルアプリへのタグの配信を設定します。

以下の動画では、Google タグマネージャの主要コンセプトと用語について解説しています。

この記事の内容:

タグとトリガー

タグとは、ページ上で実行されるコードを指します。さまざまな用途に使用できますが、Google タグマネージャのタグのほとんどは、お客様のサイトから第三者事業者に情報を送信することを目的としています。こうしたタグの例には、Google アナリティクス タグや AdWords コンバージョン トラッキング タグなどがあり、どちらもサイトの利用状況に関する情報を Google に送信するために使用されます。

Google タグマネージャなどのタグ管理ソリューションを使わない場合は、各タグのコードをサイトのソース コードに直接追加します。一方 Google タグマネージャを使用する場合は、ウェブ上の管理画面からすべてのタグを効率的に管理できます。

タグは通常、ページの読み込み時またはページ上で何らかの操作が行われたときに実行(配信)されます。Google タグマネージャでは、タグにトリガーを付加して配信するタイミングを指定します。たとえば既定のトリガー「すべてのページ」の場合は、サイトのいずれかのページが読み込まれたときにタグが配信されます。

トリガーと変数

トリガーとは、ランタイム時に true または false のいずれかを判別する条件です。判別の際には、変数の値と、トリガーの定義時に指定した値が比較されます。

タグマネージャの変数は、名前と値のペアとして設定されており、値はランタイム時に入力されます。タグマネージャには多くの既定の変数が用意されていますが、カスタムの変数を設定することもできます。

たとえば既定の変数「url」には、現在読み込まれているページの URL が必ず含まれます。example.com/purchase/receipt.html というページのみでタグを配信するには、トリガーを次のように定義します。

  • イベント: ページビュー
  • トリガーのタイプ: ページビュー
  • 配信するタイミング: 一部のページビュー
    • 次の条件が true の場合にタグを配信:
      URL が example.com/purchase/receipt.html を含む

変数は必要に合わせて定義することが可能で、それぞれにランタイム時に必要となる情報を含めることができます。定義した変数は、トリガーの条件に使用したり、タグに情報を渡すために使用したりできます。たとえばユーザーが閲覧している商品の価格を含む変数や、Google アナリティクスのアカウント ID の文字列などの定数値を含む変数を定義できます。

変数とデータレイヤー

定義する変数に、ユーザーによって閲覧されている商品の価格を含めるとします。この場合、変数はランタイム時にソースコードのデータレイヤーから商品の価格を取得します(サイトの制作担当者の方にご相談のうえ、データレイヤー オブジェクトに必要な情報が含まれるように設定する必要があります)。データレイヤーは、Google タグマネージャに渡す情報を含むように設定できるオブジェクトです。データレイヤーの変数は、後で使用するこれらの値を取得するように Google タグマネージャで設定できます。Google タグマネージャでデータレイヤーの変数の値を判別するには、イベントもプッシュする必要があります。

たとえばユーザーがサイト上で 1 万円以上の買い物をしたときに GDN リマーケティング タグを配信する場合、タグのトリガーは、1 万円以上であるかどうかを判断するために、ユーザーの取引金額の値を取得する必要があります。これを設定する場合は、取引金額の値をデータレイヤーにプッシュし(dataLayer.push メソッドを使用)、決済時にこの値を取得する変数を定義して、トリガーによって判別できるようにします。

データレイヤーを設定しなくても、変数によってランタイム情報を取得することができます。タグマネージャの変数は、JavaScript 変数、ファーストパーティ Cookie、DOM から直接値を取得するよう設定することもできます。たとえば、Click 変数または Form Trigger 変数を使用すると、ユーザーが操作している要素に関する情報を取得できます。詳細については、変数Google アナリティクス イベントをご覧ください。

ただし、通常は JavaScript 変数や DOM からではなく、適切に構成されたデータレイヤーから情報を取得することをおすすめします。変数が特定の変数や DOM 要素に依存しており、サイトの更新中にこれらの変数や要素が変化する場合、変数が機能しなくなる可能性があるためです。データレイヤーの関連情報をすべて参照しておくと、こうしたトラブルを招くリスクを最小限に抑えることができるほか、適切に構成されたデータモデルを利用したり、トラブルシューティングをより簡単に行ったりできるようになります。また、データレイヤーに必要な情報をプッシュするには、すべてのページにコードが必要になるのでご注意ください。データレイヤーは複数のページにまたがって保持されることはありません。データレイヤーを設定するメリットについては、ソリューション ガイドのデータレイヤーと Google タグマネージャの管理画面の使用方法を ご覧ください。

サイトにデータレイヤーを実装する方法の詳細については、Google タグマネージャ デベロッパー ガイドをご覧ください。

設定方法の例

サイトに Google タグマネージャを実装する際の必要事項、データレイヤーが効果的なケースなどを考慮して、以下に主な設定方法を 3 つまとめました。

  • ページの読み込み時にのみタグを配信する必要がある場合(ページ上でのユーザー操作に対して配信する必要はない場合): URL と参照 URL 以外の情報を必要としない場合は、サイトの各ページにコンテナ スニペットを追加するだけで設定が完了します。

  • ページの読み込み時にのみタグを配信し、URL と参照 URL 以外の情報(ページのタイプやユーザー ID など)も必要な場合: コードを追加してデータレイヤーを作成し、情報をプッシュする必要があります。コンテナ スニペットの前にデータレイヤーのコードを追加すると、データレイヤーの情報をページの読み込み時に利用できます。なお、データレイヤーを作成して情報をプッシュするにはすべてのページにコードが必要になりますのでご注意ください。データレイヤーはページ間で保持されません。

    ページの読み込み時に必要な情報が JavaScript 変数や DOM から直接利用できる場合、データレイヤーを実装する必要はないかもしれません。それでも、JavaScript 変数や DOM からの直接の情報取得は第 2、第 3 の選択肢としてお考えください。必要な情報が含まれるようにデータレイヤーを設定することが最も推奨されます。データレイヤーの情報をすべて参照しておくと、適切に構成されたデータモデルを利用したり、トラブルシューティングをより簡単に行ったりできるようになります。

  • タグを実行するために収集、使用するデータが、ユーザーがページで操作を行うまで入手できない場合(ページの読み込み時だけでなく、ユーザー操作に対してもタグを配信する必要がある場合): コードを追加してデータレイヤーにデータをプッシュする必要があります。さらに、特定のイベントの発生時にデータレイヤーを利用するようにタグマネージャを設定する必要があります。たとえば、ユーザーが再生している動画、ユーザーによってカスタマイズされた商品の色(車など)、クリックされたリンクのリンク先 URL などに関連付けられているメタデータをプッシュするといった場合があります。

ウェブ向けのデフォルトのデータレイヤー イベント

既定では、Google タグマネージャは特定の値をウェブ アプリケーションのデータレイヤーにプッシュします。該当の値は次のとおりです。
  • gtm.js – Google タグマネージャの実行準備が整ってから、すぐにデータレイヤーにプッシュされます。
  • gtm.dom – DOM の読み込み準備が整ってからデータレイヤーにプッシュされます。
  • gtm.load – ウィンドウの読み込みが完全に終了してからデータレイヤーにプッシュされます。
この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。