SPAで作られたWEBアプリを計測するにあたり、Google Tag Manager（GTM）では、トリガーのイベントタイプとして「履歴の変更」を選択して計測するケースも多いですよね。

しかし、Nuxt.jsで作られた#パラメータ後にパスがくるSPAサイトにGTM及びGA4を設置する場合には、別の方法で処理する必要があります。

今回は、Nuxt.jsで作られたSPAサイトにGTM及びGA4を設置する流れについて解説します。

そもそもなぜ「履歴の変更」で対応できていないと言えるのか？

GTMのプレビュー機能を使って、Nuxt.jsで作られたSPAサイトのプレビューを行うと

ページの遷移の際に、

①History→②nuxtRoute→③Historyが繰り返されていることがわかります。

そして、それぞれのVariablesの_event、またはData Layerのeventを見てみると以下の通りになっています。（今回はVariablesを見ています。）

①History（gtm.historyChange）

②nuxtRoute

③History（gtm.historyChange-v2）

③HistoryのイベントのValueが「gtm.historyChange-v2」とv2が付いています。

これは、GA4の拡張計測機能の一つで、GA4のストリーム設定からオンオフを切り替え可能です。（今回の話には影響しませんが、一応触れておきます。）

問題となるのは、①Historyでページ遷移が正確に計測できているのかどうかという部分です。

そもそも、#付きのURLだと、#がパラメータと思われてしまい、全てのアクセスがトップページへのアクセスとして計測されてしまいます。

さらに、①Historyでは、

Nuxt.jsで作られたSPAサイトにGTM及びGA4を導入する指針

①正しくGTMを導入する

②GTM経由でGA4を導入する

③