Google タグマネージャー（GTM）でタグの実行順序を制御する3つの方法と注意点

Google タグマネージャー（以下、GTM）で運用型広告のタグを設置し終えて、テストをしてみるとうまく動かない…そんなときに疑う一つのミスとして、タグの実行順序が正しくない、ということがあります。

今回はそんなときに使える3つの方法と、知っておきたい注意点を解説します。

なぜ実行順序が大事なの？

そもそもなぜ実行順序が大事なのでしょうか。

たとえばYahoo!広告ではコンバージョンやサイトリターゲティングを設定したい際に以下の3つのタグを実装します。

①サイトジェネラルタグ

②サイトリターゲティングタグ・コンバージョン測定タグ

これらのタグは①→②の順で実行させるように設定が必要です。正しく設定されていないとサイトリターゲティングやコンバージョンが正しく計測されないことがあります。

これは、最初に実行させるタグで設定している設定内容や変数を後に実行させるタグで用いるため、後に実行させるタグで変数や設定を用いることができなくなるという理由のためです。

また、あるタグで変数を作成してそれを他のタグで用いる場合、変数を作成したタグの前に使用したいタグが実行されると、変数が空や存在しない場合があり、不具合が起きてしまいます。

これらを避けるためにも、実行順序はしっかり設定しなければなりません。

実行順序を制御する3つの方法

それでは制御する3つの方法を見ていきます。

1.タグの順序付け（多くの場合に有効）

まずはタグの順序付け機能です。こちらの機能はタグカタログのテンプレートでもカスタムHTMLでも使えます。

タグの詳細設定から設定します。

「タグの順序付け」メニューを開き、「（設定中のタグ） が発効する前に設定タグを配信」か「（設定中のタグ） が発効した後に設定タグを配信」のどちらかチェックボックスをオンにします。

その後「設定タグ」から対象のタグを選んで設定は完了です。

上記の画像の例だと、「テスト1」のタグが配信された後に「テスト2」が配信されます。

「（タグ名）は、（タグ名） が配信できなかった場合や一時停止となっている場合には配信しないでください」チェックボックスにチェックを入れると、最初に読み込まれるタグが配信できなかったり一時停止になっている場合に、次のタグが読み込まれなくなります。

この方法はタグのテンプレートを用いる場合でもカスタムHTMLでも基本的にほとんどの場合に使えます。

しかし、タグがカスタムHTMLのみの場合はさらに簡単な方法がありますので次に紹介します。

2.カスタムHTMLで順番通りに記載する（タグがカスタムHTMLのみの場合に有効）

次にカスタムHTMLで順番通りに記載する方法です。

こちらの方法は、設定方法がわかりやすく簡単ですが、設定するタグがカスタムHTMLのみの場合で使えるため、テンプレートを利用する際は基本的には1のタグの順序付けの方法を使いましょう。

設定方法は簡単で、下記のように1つのカスタムHTMLで2つ以上のタグを上から順番に記載するだけです。

<script>
// 最初に実行したいタグのコード
</script>
<script>
// 2番目に実行したいタグのコード
</script>

タグは、Javascriptというプログラミング言語で記載されており、プログラミング言語は実行される順序がコードの上から下という原則があります。

そのため、上から実行させたい順番に記載すれば上から順にタグが実行されます。

しかし、先述したようにタグのテンプレートを使う場合にはこの方法は設定できません。

またこれまで紹介した1や2の方法では、順序を設定するタグが2-3個であれば問題ありませんが、タグAのあとにタグB,C,そのあとにタグD,E…といったように読み込み順序が複雑になる場合にはタグの管理が難しくなります。その場合には次に紹介する3の方法を使いましょう。

3.データレイヤーによるイベントの設定（カスタムHTMLのどんな場合でも使えるが、設定難易度は高め）

次にタグの実行タイミングを能動的に操作する方法を紹介します。

※こちらの方法ではカスタムHTMLを使用するため、タグタイプがカスタムHTML以外のタグでは実装することができません。カスタムHTML以外は2の方法を利用しましょう。

タグ1→タグ2の順で実行させたい想定で実装していきます。

こちらの方法はタグが複数個ある場合など基本的にどんな場合にも利用できますが、タグを直接編集する必要があり設定難易度が少し高めです。

しかし理解してしまえば簡単なので丁寧に解説していきますね。

この方法は、タグ1の処理完了後にイベントを作成します。そのイベントをタグ2のトリガーとすることで、タグ1→タグ2という実行順序を実現できます。

では実際に手順を解説していきます。

①タグ1のもともとのスクリプトの後ろに下記を記載します。

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'test'})
</script>

上記はGTMに任意の変数を送ることができるデータレイヤーを用いて”test”という名前のイベントを作成しています。

イベント名の”test”は自分がわかりやすいもので大丈夫です。

②次にトリガーの設定をします。

「トリガー」＞「新規」＞「カスタムイベント」を選択

「イベント名」欄に先程データレイヤーで作成したイベント名を設定し「保存」します。

これで「test」イベントが実行したときのトリガーが作成できました。

③最後にタグ2のトリガーに先程作成した「test」イベントを設定します。

タグ1の後に読み込ませたいトリガーが複数ある場合はそれぞれトリガーを設定しましょう。

以上で設定は完了です。

では実際にプレビューで見てみます。

最初に「Container Loaded」のタイミングでタグ1が読み込まれました。

その後「test」イベントが発生し、「タグ2」が読み込まれています。

無事、タグ1の処理完了後にタグ2が読み込まれるという実装を行うことができました。

番外編：「タグ配信の優先度」は非推奨

紹介した方法以外にもGTMには「タグ配信の優先度」という機能があります。

参考：優先度の設定 - タグ マネージャー ヘルプ

上記のヘルプページには「タグを配信する順番を決めます。」と記載があり、こちらで問題なさそうに思えますよね。

しかし、こちらの方法は後述する理由から非推奨です。

「優先度の設定」はタグの詳細設定を開くと設定できます。

こちらに整数値を入力することで（マイナスの値も可能）、優先度の数値が高いタグから配信されるようになります。（設定しなければ数値は0になります。）

たとえばタグ1、タグ2というタグがあり、1→2の順序で実行させたいとします。

この場合、タグ1の優先度を「10」、タグ2の優先度を「5」などに設定する方法が考えられますが、こちらの方法はおすすめできません。

それは、優先度の機能は配信「開始」を指定する機能であり、配信「完了」を待つ機能ではないためです。

つまり、タグ1の読み込みが完了する前にタグ2の読み込みが開始してしまうことがあり、タグ2の読み込みが完了しないと正常に動作しないタグ2が処理開始してしまう可能性があるため、実用するには問題があります。

これに対して最初に紹介したタグの順序づけの機能では、先程の優先度の設定と異なり、最初のタグの配信完了を待って次のタグが配信されます。

なので「優先度の設定」機能はタグの順序が重要な場合には不適当で、たとえば処理負荷の重いタグの優先度を下げるといった限定的な場合のみに使える機能です。

まとめ

タグの実行順序を制御する方法を3種類紹介しましたが、どの方法を用いて実装するべきか迷ったときは下記のフローチャートにおすすめの方法をまとめましたので参考にしてみてください。

タグの実行順序は正しく設定できていないとコンバージョン計測やタグのエラーになってしまいますが、意外と原因として気づきにくいという厄介な問題です。

ぜひこの機会にエラーの要因の一つであるということを頭に入れておき、設定方法をマスターしておきましょう。