はじめに
gtag.jsやga4の動作に詳しくなかったので、備忘録のために残しています。
記載が簡潔すぎることをご容赦ください。
前置き
Vue.js(2.x)製のSPAサイトのアクセスを、既存のGA3に加えて、GA4でも計測することになりました。
トラッキング周りはvue-analyticsを使っていましたが、GA4にはgtag.jsが必要だったため、vue-gtagを導入しました。
vue-gtagのAuto trackingを設定すると、router-linkクリック時にGA4にpage_viewイベントが送信されているのが確認できました。
が、GA4コンソールのdebug viewでよくよく見てみると、同じページでpage_viewが2回送信されているのに気がつきました。
結論
GA4のデータストリームの設定画面からブラウザの履歴イベントに基づくページの変更
というチェックを外したら、vue-gtagによるpage_viewのみが送られるようになりました。
※ 2021/04/13時点のUIです。
補足等
どこでpage_viewが送られているのかをGoogle Analytics Debuggerで探していると、ページ遷移したタイミングで、gtm.historyChange-v2
というイベントが送られていることに気が付きました。
その中のパラメータで、page_viewに関するものがあったので、イベント名でググってみると、同じような内容で投稿されたフォーラムを見つけました。
この回答に従って、GA4コンソールのデータストリーム設定を見てみると、今回の設定を発見しました。
この設定自体は、SPAじゃないサイトで、ブラウザバックしたときでもpage_viewを送れるようにする的な機能なのかな?
誰かの役に立てば幸いです。