Googleタグマネージャーのタグの発火順序

1. 本記事のターゲット層

• Googleタグマネージャー初心者
• カスタムイベントを作りたい人
• カスタムHTMLを自作したい人
• タグ配信の優先度を設定しているけどうまくいかない人
• タグ配信の優先度とタグの順序付けについてよくわからない人

2. はじめに

本記事は、Googleタグマネージャー初心者にとって罠になると思った、タグに設定する優先順位について解説したいと思います。

罠に感じたポイントとしては、公式サイトを日本語で読んだ場合、タグ配信の優先度さえ設定しておけば、配信の順序はうまく動作するように読めてしまうからです。

しかし、公式サイトを英語で読んだ場合は、「より正確に制御するためには、タグの順序付けを使用して特定のタグが発動する前後にどのタグが発動するかを指定してください。」と書いてあります。つまり、Googleは「タグ配信の優先度」でタグ配信を確実に制御できることは保証していないことになります。

例えば、トリガーが別々であった場合、とあるタグが複数のカスタムイベントを発火させていた場合、そのカスタムイベントをトリガーとしているタグは「タグ配信の優先度」を必ずしも守らないことが推測できます。

では、タグ配信はどのように制御を行い、カスタムイベントはどのように取り扱えばよいのでしょうか。

3. そもそもカスタムイベントとは

カスタムイベントを表すものは大きく分けて3つあると捉えるとよいでしょう。
(1) Googleタグマネージャーのトリガーを作るためのもの
(2) Googleタグマネージャーのトリガーを発火させるためのもの
(3) Googleアナリティクスに送信するイベントもの

まず、(1)と(2)はセットになっています。

以下のようにして、まずはトリガーを発火させるためのカスタムイベントをdataLayerにpushします。これはカスタムHTML内に記述するScriptで行います（このタグ自体はページビューや初期化のイベントなどで発火させるイメージです）。

dataLayer.push({'event': 'custom_event'});

JavaScriptで記述するため、addEventListenerを使うことで、カスタムイベントはかなり様々なものを作れます。

次にトリガーの新規作成でカスタムイベントを選択し、pushしたイベント名を指定します。このトリガーで発火するタグを作るまでが、Googleタグマネージャーにおけるカスタムイベント作成の一連の流れになっています。

次に、Googleアナリティクスに送信するカスタムイベントですが、こちらはカスタムHTML内でgtag関数を使うことでカスタムイベントが送信されます。

詳細はリファレンスに記載されています。

4. タグ配信の順序について

タグを配信する順序については大きく分けて3つの考え方があります。上から順番に優先度が高くなり、(3)のみ発火元のトリガーが別である場合は必ずしも有効になりません。
(1) トリガーにより発火させる
(2) タグの順序付けを指定する
(3) タグ配信の優先度を指定する

(1) トリガーにより発火させる

トリガーはGoogleタグマネージャーで予め用意された「ページビュー」を使用することもできますが、DOM Readyやウィンドウの読み込み、同委の初期化などのトリガーを新たに登録し、それをタグの発火タイミングにすることができます。

また、カスタムイベントを使用することで、トリガーを自由に自作するすることも可能です。
これはdataLayerという名前の変数にeventと任意のカスタムイベント名を登録することで、カスタムイベントトリガーを発火させる方法になります。

条件に応じて発火させたいタグを分けたいときや、タグの発火有無を制御したいときに便利です。例えばとある入力項目の表示/非表示が条件によって変わる場合や前画面の選択内容によって計測したい内容が異なる場合などに活用することができます。

以下はカスタムイベントを登録するときのサンプルソースです。

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({‘event‘: ‘カスタムイベント名‘});
</script>

カスタムイベントをトリガーとして登録する場合は、トリガーのタイプを「カスタムイベント」に設定して、dataLayerに登録したカスタムイベント名を指定します。

発火させたいタグに作成したカスタムイベントトリガーを指定することで、自作したトリガーでタグを発火させることができます。

(2) タグの順序付けを指定する

これはタグの依存関係を考えるとわかりやすいと思います。

タグに記述する処理内容が大きすぎて分けたい場合や初期化処理として使いまわしたい場合などをイメージすると使い方が想像つくと思います。

トリガーによりとあるタグを発火させたあと、後続処理を指定したり、逆に先行処理を指定するような形で別のタグを指定します。

(3) タグ配信の優先度を指定する

同一のトリガーにより発火するタグが複数ある場合(ページビューなど)、この項目の数字が大きいほど優先度が高くなります。規定値は0になっています。

広告のタグ（Facebook広告など）を埋め込む場合、「できるだけ上の方に記述してください」「これは最後の方に記述してください」と指定されている場合があります。そのときにはこの項目で制御すると考えれば、イメージが沸くと思います。

5. まとめ

スクリプトを何らかの理由でたびたび貼り付けたり、変更する場合にGoogleタグマネージャーを利用する利便性が出てきますが、それには以下の理由が上げられます。
(1) 現在、Web広告を利用して集客しようとしている（あるいは将来利用する予定がある）
(2) 複数サイト管理しているため、変更に耐えられる環境作りをしたい
(3) ECサイトを運営していて、サイト内の動きを分析したい
(4) 自社サイトにおいて、通常とは異なる内容を分析したい

(4)については、Webアプリケーションの場合は十分ありえそうです。マルチテナント構成になっていて、テナント毎に分析したい、画面デザインを変更したからスクリプトを変更したい。様々なユースケースが想定されます。

こうしたケースにおいて、Googleタグマネージャーは大きな力を発揮することは間違いありません。

それだけではなく、JavaScriptを勉強することにも役立つので、自作サイトをお持ちであればぜひ挑戦してみるとよいでしょう。