Web版GTMがページ上で読み込まれてタグが発火するまでの流れをざっくりと解説する

この記事は Google Tag Manager Advent Calendar 2018 - Adventar 3日目の記事です。飽きなければ最終日まで一人で更新するかもしれない。

まとめ

GTMスニペットが読み込まれる
イベントトリガーが設定される
データレイヤー変数が更新され、トリガーと変数が評価されてタグが発火する

解説

1. GTMスニペットが読み込まれる

head内に設置するほうのGTMスニペットではdataLayerの変数の初期化とGTM本体のJSの読み込みが行われている。次の画像はGoogleタグマネージャー管理画面から確認できる、GTMをインストールするためのコード（スニペット）のキャプチャである。

まず、赤下線部でデータレイヤー変数の初期設定が行われている。改行と変数を開いて少しだけ読みやすくしたのが下記。

    window[l]=window[l]||[];
    window[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});

まず変数の未定義確認が行われ、未定義の場合に空配列で初期化される。そして、読み込み開始時刻を'gtm.start'のキーで持ち、イベント名を'gtm.js'として持つオブジェクト*1を末尾に追加する。

なお、dataLayer.pushを使う理由については以下の記事が詳しい。

ayudante.jp

次に、GTMの本体であるJavascriptファイルの読み込みを行うコードが青下線部である。

この時にデータレイヤー変数の変数名をデフォルトの"dataLayer"から変更する必要がある場合にはJSファイルの末尾にl="変更後の変数名"をつけるという処理を行っている。lパラメータが付与されたファイルは、Googleのサーバー側で自動的に利用するデータレイヤー変数を指定されたものに変更されたJavascriptとなっている。

2. イベントリスナーが設定される

GTMのJavascriptの読み込みが行われると、GTMの初期設定として、読み込まれたウェブページに対してGTMのトリガーに応じたイベントリスナーが設置される。

例えば標準で設定されるDOM Readyイベント、Window Loadedイベントのほかに、有効なクリックトリガーがGTMに存在すればclickに対するイベントリスナーが各要素に追加され、タイマートリガーであればsetTimeoutが設定される。

この時にリンクのみのクリックトリガーで「タグの配信を待つ」チェックボックスをオンにしていた場合はクリック後にページ遷移を制御する、というような設定も行う。

GTMによって設定されたイベントリスナーはすべてデータレイヤー変数に対してイベントの発生を通知する。イベントの通知はすべてデータレイヤー変数の末尾に"event"要素を持つオブジェクトを追加する形で行われる。イベントの種類によっては"event"以外にも"gtm.element"などの要素が含まれている。

GTMの初期設定としては、他にもgoogle_tag_manger変数の追加・セットアップやwhiteList・blackListの読み込み等が行われている。