Zenn
Open4

アクセス解析をGAからGTMへ移行するときのエンジニアTips

GTM
webdevwebdev

非インタラクティブイベント計測はdataLayerに置き換えられる

GAのgtagのカスタムイベントと同じ使い勝手でGTMでも非インタラクティブイベント計測を行いたい場合は、dataLayerで設定できる。

gtag('event', 'hoge')

dataLayer.push({ event: 'hoge'});
webdevwebdev

TypeScripでdataLayerを使用するときの型定義

dataLayerを使用するページ（コンポーネント）のみで定義する場合

declare const window: Window['window'] & {
  dataLayer: Record<string, unknown>[];
};

カスタムイベント送信箇所

window.dataLayer.push({ event: 'hoge'});
webdevwebdev

SPAで、ページビューのタイトルがnot set（不明）のログが頻繁に記録される。
遷移が発生したとき、スクリプトがtitleタグのテキストを反映するよりも先にGTMがdataLayer.pushしているのが原因と思われる。

スクリプトがtitleタグのテキストを反映するタイミングで
イベントを手動でdataLayer.pushしたいときは、ソースコードへこのようにpageviewイベントを埋め込む。

window.dataLayer.push({
  event: 'pageview',
  page: {
    url: location.pathname,
    title: 'タイトルにしたいテキスト',
  },
});