Google Tag Managerのスクリプトを噛み砕いて理解する

Google Tag ManagerをWebページにインストールするためには以下のスクリプトを挿入する(参考)。

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ABCDEFGH');</script>
<!-- End Google Tag Manager -->

挿入するコードは圧縮されているため、何が行われるか直感的に分からない。

理解の補助として、scriptタグの改行とfunctionの宣言を整理する。

<script>
  (function (w,d,s,l,i) {
    w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js? id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-ABCDEFGH');
</script>

windowやdocumentなどの情報や、Google Tag ManagerのID等を引数何らかの関数を叩いていることが読み取れるようになった。

関数で行われていることが気になるので、JavaScriptの部分にbiomeをかける(実行内容)。

<script>
  (function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != "dataLayer" ? "&l=" + l : "";
    j.async = true;
    j.src = "https://www.googletagmanager.com/gtm.js? id=" + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer", "GTM-ABCDEFGH");
</script>

windowのプロパティに何かをpushしていたり、HTML要素の作成が行われていそうだ。

さらに分かりやすくするために変数の名前を変更する。それに伴い行が長くなったものの改行と、変数の宣言をconstで分けて行うようにする。

<script>
  (function (window, document, elementName, dataLayerName, gtmID) {
    window[dataLayerName] = window[dataLayerName] || [];
    window[dataLayerName].push({
      "gtm.start": new Date().getTime(),
      event: "gtm.js"
    });
    
    const firstElement = document.getElementsByTagName(elementName)[0];
    const newElement = document.createElement(elementName);
    const dataLayerParam = dataLayerName != "dataLayer"
      ? "&l=" + dataLayerName
      : "";
        
    newElement.async = true;
    newElement.src =
      "https://www.googletagmanager.com/gtm.js?id="
        + gtmID
        + dataLayerParam;
    firstElement.parentNode.insertBefore(
      newScript,
      firstElement
    );
  })(window, document, "script", "dataLayer", "GTM-ABCDEFGH");
</script>

最初のブロックではwindowに"dataLayer"プロパティを配列を生やして、現在時刻と合わせてgtm.jsというイベント名を持ったオブジェクトを追加している。

次のブロックではドキュメントの先頭にあるscriptタグの特定と、新たなscriptタグを生成している。
そして、dataLayerNameが"dataLayer"なのでdataLaterParamは空文字列を持つようになっている(一見意味がなさそうだが、dataLayerNameを独自で持つようにすると必要となる)。

最後のブロックは先ほど作成したscriptタグにsrc属性とasync属性を追加して、それを先頭のscriptタグの前に挿入している。
作成したscriptタグはDOMContentLoadedとは独立して、https://www.googletagmanager.com/gtm.js?id=GTM-ABCDEFGHを読み込み、Google Tag Mangarを有効化する。

つまり、このスクリプトはGoogle Tag Managerを利用するための準備から有効にするためのスクリプトの準備までを行うためのものであった。