SPAでのGTM+Analytics+Optimizeの運用について

GTMでAnalyticsとOptimizeを管理する機会があり、詰まるところがあったのでメモのために残しておく。

GTM

環境の設定

ステージング環境、本番環境のようにGTMの設定の公開を分けることができるので、必ず分けておきたい。

環境 - タグマネージャ ヘルプ

環境を分けてコードに書く

環境ごとに記述するコードが変わるので、envファイルから環境分けてデプロイするようにしてたりする場合は 、

process.env.APP_ENV=staging

if(process.env.VUE_APP_ENV === 'staging'){
  ...
} else if(process.env.VUE_APP_ENV === 'production'){
  ...
}

みたいにするとよさそう。

AnalyticsのTrackingIDを環境で分ける

ユーザー定義変数で用意しているアナリティクス分作ってあげると良い。
その場合はGTMの環境と数が合うはず？？

GoogleTagManagerの計測をチームでテストする - Innovator Japan Engineers’ Blog

トリガーはAll Pagesのみ

ハッシュでURL変更するわけではない場合はAll Pagesで良さそう（※要確認）
履歴の変更とAll Pages両方設定するとアナリティクスの重複設定になってしまった。

Tag Assistant (by Google) - Chrome ウェブストア

Optimize

GTM及びAnalyticsとの連携方法を慎重に

GTMの設定画面上でOptimizeの発動タイミングや設定をする必要があるが、ちゃんと設定しないとOptimizeが起動しない。

これで完璧！Googleオプティマイズをタグマネージャー（GTM）で管理する全手順 | たぬハック

動的要素にはJSでテストする

要素を編集するときに、その対象が動的に変更する場合、「JavaScriptを実行」で要素を編集する必要がある。
そのため、対象に対してIDを振るようなことをしたほうが良さそう。

Solved: Dynamic or flexible text change testing - The Google Advertiser Community - 1622392