タグマネージャーでjsのloadイベントを発火させたいとき

Google Tag Manager便利ですよね。

しょうがない事情で、少し凝ったjavascriptをタグマネに設定しないといけないことがあって、最初以下のようなコードを書いてタグマネ経由で配信したら全然コードが動かない・・

これは、ブラウザがページを読み込んだ時点で発火するloadイベントを拾って、何か任意の処理を実行するためのコードです。

window.addEventListener('load', (event) => {
  // 下はサンプル。実際はここにいろいろと難しいコードを書き足しています。
  console.log('test');
});

動かない、というか、ブラウザによって動かないものと動くものがあるという厄介なケース。

Safariは全く動かないけどGoogle ChromeはOKなどなど。

で、オチなんですけど、タグマネの配信トリガーが問題でした。

最初はよく使うであろうAll Pagesのトリガーと上記のコードを紐つけていたんですがこれはダメ。

そしてトリガーをページビュー - ウィンドウの読み込みにしたら、どのブラウザでも動くようになりました。

そして、このトリガーを選んだときはjsのコード内でaddEventListenerする必要はありません。

// 目的のコードを書くだけでOK!!
console.log('test');

つまり、この動作から察するとGoogle Tag Manager自体にwindowイベントなんかをフックするための仕組みがすでに備わっていて、そこに自分の好きなタグやスクリプトを差し込んでくださいという作りになっているわけね。

ブラウザによってはAll Pagesのトリガーが走るときにはすでにloadイベントなんてとっくの昔に終わっているのかもしれない。

知ってる人には当然のことかもしれんけど、結構悩んだ。

配信トリガーは他にもいくつかあって、試してはいないけれどDOM Readyなんかは多分、DOMContentLoadedのことじゃないかな。

この記事の環境情報