【GTM】タグの発火順序を制御する方法まとめ【dataLayer】

広告運用関係者に質問です。

『タグの発火順序を制御したい・・・』

そんなことってないですかね？

・・・

はい。ありますよね。

と、いうわけで
今回はその話をしていきます。
特に、GTM（Google Tag Manager）を用いた方法を紹介します。

歴戦の古（イニシエ）のGTM使いにとっては有名かもしれませんが
あまり文書でまとめられているのを見かけないため
今回書いてみることにしました。

さっそく見ていきましょう。

タグの発火順序を制御したいときって？

そもそもどんなときに
タグの発火順序を制御する必要があるのか？

例えばYahoo!広告で
①サイトジェネラルタグ
②コンバージョン測定補完機能タグ
③コンバージョンタグ or リターゲティングタグ
などを別々で設定する場合
発火の順序が大切になります。

この場合、①→②→③の順序でないといけません。

はたまたFacebook広告でも
ベースコードとイベントコードがあり
基本的にはベースコード⇒イベントコードの
順序で発火させる必要があります。

今ではイベントは管理画面上の
「イベント設定ツール」で設定完了できるので
コードを直接入れる機会も少なくなったかもしれませんが
個人的にはGTM上でまとめて管理出来た方がやりやすかったりします。

さて、Facebookの例でいうと
下記のベースコードを先に発火させる。

そのあとにイベントコードを発火させる必要があります。
（今回の例だと「AddToCart」）

なお、以下のようにこれらをまとめて記載する方法もあります。

これについてはYahoo!広告も同様で
サイトジェネラル+コンバージョン補完機能とコンバージョンタグなどを
別々のカスタムHTMLにせずに1つのカスタムHTMLで設定しちゃうことも可能ですね。
（※カスタムHTML：GTM>タグ>新規>タグの設定>カスタムHTML）

もちろん1つのカスタムHTMLで設定する方法もいいのですが、、、
ただ、例えばFacebookでイベントが複数あったりする場合
カスタムHTMLで

イベント1：ベースコード+イベントコード（AddToCart）
イベント2：ベースコード+イベントコード（AddPaymentInfo）
イベント3：ベースコード+イベントコード（Purchase）

を作りますね。

また、リターゲティング用に
ベースコードだけのカスタムHTMLを作成すると思うのですが
上記のイベントページで(リターゲティング用の)ベースコードが発火すると
二重発火になってしまうので、トリガーで除外設定すると思います。

つまりリターゲティング用のベースコードを全ページにすると
例えばイベント1のページでは

・ベースコード（全ページ:リタゲ用）
・ベースコード+イベントコード（AddToCart）

の2つが発火し、ベースコードが2回カウントされてしまうので、
ベースコード（全ページ:リタゲ用）からイベント設定ページを除外する、ということです。

これはイベントのポイントが増えたりすると厄介です。
除外設定を増やしたりとか抜け漏れないかとか
気にしなくてはいけない場所が多くなるからです。

そのため

・タグは別々(のカスタムHTML)に設定したい
・でも順序は制御したい

ということになり
「タグ発火順序の制御」という需要が生まれます。

今回はタグ発火の順序制御に関する方法を3つ紹介します。

ただ、1つ目はあまりおすすめではなく
2つ目は悪くないという感じで、
3つ目がおすすめになります！

なので、おすすめしか興味ない人は
しばらく飛ばしてOKです。

1. 優先度の設定

最初に紹介するのは「優先度の設定」です。

GTMのタグの設定画面の詳細設定に
『タグ配信の優先度』という項目があります。

説明には

優先度の高いタグが先に配信されます。特に指定がない場合、優先度はデフォルトで 0 になります。前のタグが完了したかどうかに関わらず、タグは非同期に配信されます。

と書かれています。

ざっと読んだ感じだと「これ使えばいいじゃん！」ってなりそうですね。

①→②→③の順番で発火させたければ
①:100、②:50、③:10とか適当に数値を振っておけば
数値が高い順に発火するじゃん？？・・・と。

ところがこれはおすすめできません。
理由は説明の最後の文章にあります。

前のタグが完了したかどうかに関わらず、タグは非同期に配信されます。

これがクセモノですね。
どういうことか解説していきます。

まず、文章だけで説明すると
この『優先度の設定』は「配信『開始』」を指定する機能であって、
「配信『完了』」を待つような機能ではありません。

まだ分かりにくいですね。
ちょっと図を使ってみましょう。

今、「優先度100のタグA」と「優先度50のタグB」があるとします。
すると
↓↓このようになる場合があります。↓↓

このケースでは
優先度が高い「タグA」が先に処理を開始します。
ここまではいいですね。
さて、我々の目標としては

「タグAの処理が最後まで完了」してから「タグBの処理が始まる」

になりますが、今書いたように「優先度」の設定では
「処理『開始』」の順序しか制御できません。

つまり、
『タグAが処理「中」』の段階でも
『タグBの処理がスタートする』可能性があるということです。

これは困りましたね。

タグAが最後まで読み込まれてから
タグBの処理開始してほしいのに
そうならない場合があるということです。

以上の理由から
この方法でタグ発火の順序を制御することは
おすすめできません。

2. タグの順序付け

次に紹介するのは
『タグの順序付け』機能です。

おそらくこれを用いている方は
結構いるのではないかと思います。

GTMのタグ設定の
詳細設定>タグの順序付け
で設定できるものですね。

結論からお話すると
この設定は先程の方法1では出来なかった「処理完了」を待つということが可能です。

上記の図でいうと[note用 が発効する前にタグを配信]にチェックをして、
『facebook』というタグを設定しています。

このとき、『facebook』タグが配信完了してから、
『note用』のタグ処理が開始します。

2つ目のチェックについても同様です。

[note用 が発効した後にタグを配信]にチェックを入れ
クリーンアップタグで『YSA』を設定しています。

このとき、『note用』タグの処理が完了してから
『YSA』タグの処理が開始するようになります。

「じゃあこれを使えばOKじゃん」

という声が聞こえて来そうですが
正直、そのとおりです。

ただ、この方法の弱点は
タグが1つしか指定できないところです。

タグAの処理が完了したら
タグB、タグC、タグDも発火させたい
というときになんとも不便です。

実際には上記の方法を組み合わせて
タグA→タグB→タグC→タグD
と発火するように設定すれば出来なくはないのですが
・・・やっぱり面倒。

そしてもう1つ不便なところ。

それは、GTMのプレビューモードでは
タグの順序がしっかり制御出来ているか
分からないところです。

例えば以下のような設定をします。
『note用』の後に『タグ順序付け用』というタグが発火します。
（『note用』のトリガーはDOM Ready）

『タグの順序付け用』の方では以下のように見えます。
配信トリガーは設定していないですが、
『次のタグの直後にタグを配信します』の表示があります。
（つまり『note用』の後に配信する）

このときプレビュー画面は以下のようになります。

この画面だけでは
タグの順序付けがしっかり出来ているのか分からないですよね。

詳細を見ても特にそれと分かる記述はありません。

ということで
『タグ発火順序の制御』という目的に対しては
設定としては問題ないのですが
個人的にはやや使いづらいなぁと思う方法でした。

3. 自分でタグの発火タイミングを作成する

こちらの方法は
タグ発火のタイミングを自分で作ります。

つまりトリガーのタイミングを管理することで
タグ発火の順序を制御しようということです。

そのためにdataLayerを使います。
詳細は割愛しますが、例えばHTML内のコードで

dataLayer.push({'event' : 'Ordering'})

と記述すれば「Ordering」というイベントを作成できます。

通常、サイト内にコードに記載するものですが
これをGTMのカスタムHTML内に記述して
無理やりイベントを作ってやろうという話です。

先程の『note用』『順序付け用』のタグを利用して説明していきます。

まず『note用』が以下です。

もともとのコードの下に
dataLayerでイベントを作っています。

JavaScriptは基本的に上から下へ順番に処理されるため、
この記述で
①もともとの『note用』コードが最後まで読み込まれる
②dataLayerでイベントが作られる
という処理になります。

ここで一旦プレビューしてみましょう。

Orderingというイベントが作成されているのが分かりますね。

次に「Ordering」が発生したタイミングでタグが発火するようにします。
要するにトリガーを作ります。

これは簡単でカスタムイベントで「Ordering」を指定するだけです。

トリガー＞新規＞トリガーのタイプ＞カスタムイベント

イベント名に「Ordering」と記入
（必要に応じて「このトリガーの発生場所」でURLの条件を付けるなど可能）

これでトリガーが完成です。

最後に『タグ順序付け用』タグのトリガーに
今作った『Orderingイベント』を紐付けましょう。

はい、完成。

プレビューを見てみましょう。

当然ながら「DOM Ready」で『note用』タグが発火しています。

そして、「Ordering」では『タグ順序付け用』が発火していますね。

今までの流れをもう一度図でまとめてみます。

要するに

①『note用』タグ発火
②『note用』タグ処理開始
③『note用』タグ処理完了
④dataLayer.pushで「Ordering」イベント発生
⑤「Ordering」イベントをトリガーとして『タグ順序付け用』タグ発火
⑥『タグ順序付け用』タグ処理開始
⑦『タグ順序付け用』タグ処理完了

という動きになります。

ポイントは③～⑤で
『note用』のタグの処理が完了してから「Ordering」のイベントが発生
⇒その「Ordering」をトリガーにして『タグ順序付け用』が発火

つまり『タグ順序付け用』タグが発火するためには、
「Ordering」のイベントが発生していることが必要で、
「Ordering」イベントが発生するには『note用』の処理が完了している必要があります。

そのため、『タグ順序付け用』タグが処理開始する頃には
必ず『note用』の処理は完了しているわけです。

これでタグ発火の順序を制御できます。

この方法であれば
「Ordering」というトリガーを使えば
タグAの次に「タグB、タグC、タグD」を発火させたい
（タグB、タグC、タグDの順序は不問）という設定も簡単です。

タグB、タグC、タグDのトリガーに
「Ordering」を設定するだけですからね。

さらにGTMのプレビュー画面でも
どの順序でどのタグが発火しているか分かりやすいです。

なので個人的にはこの方法がおすすめではあります。

最後に

今回、イベント名を「Ordering」にしましたが

dataLayer.push({'event' : '○○'})

の「○○」は任意ですので自分の好きな文字列で問題ありません。
分かりやすい名前を付けましょう。

さて、タグの順序付けが必要な例として
最初にFacebook広告やYahoo!広告を挙げましたが
GTMで高度なことをしようとすればするほど
発火順序の制御はわりと頻繁に登場します。

なので結構大事だったりします。

例えば、
何かしらの値を変数としてGTMで受け取り
その変数をタグで利用したいという場合。

値を受け取る前にタグが処理開始してしまっては
変数の中身が空っぽの状態でタグが発火していまいます。

そうなると意図した処理が出来なかったりします。

そんなこんなで意外と便利ですので
覚えておいて損はないと思います。

今回は以上です。

Bye, bye.

広告運用に関して詳しくお話を聞きたいという企業様がいらっしゃいましたら、こちらからお問い合わせをお願い致します。

お問い合わせ | 株式会社デジタリフト

私たちの会社で働く事に少しでも興味を持っていただけたら、ぜひ応募フォームよりご連絡ください。

株式会社デジタリフト の全ての求人一覧