「@nuxtjs/google-gtag」の出力するコードが微妙…
Nuxt.JSを利用してネットショップを構築した際に、Googleアナリティクスの設置に「@nuxtjs/google-gtag」を使ってみたところ、以下の点が気になりました。
- 複数のIDを埋め込むと、Gtagのスクリプトのリンクが複数埋め込まれてしまう（ひとつでOKのはず）
↓このタグがトラッキングID数だけ追加されてしまう。
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx-x"></script>
「@nuxtjs/google-gtag」は現在のバージョン(1.0.4）が公開されてから、すでに2年以上メンテナンスされていませんので、このモジュールの使用は中止して、自前でコードを書くことにしました。
Gtag用のPluginを作る
以下のコードを、nuxtのpluginsディレクトリに「gtag.js」という名称で保存します。
gtag.js
export default ({ app }, inject) => {
window.dataLayer = window.dataLayer || []
function gtag() {
// eslint-disable-next-line no-undef
dataLayer.push(arguments)
}
gtag('js', new Date())
// 今回は二つのトラッキングIDを設定します。環境変数などを利用するなり適宜設定してください。
gtag('config', process.env.GA_TRACKING_ID)
gtag('config', process.env.AW_TRACKING_ID)
// routeが切り替わるたびにgtagを呼び出す
app.router.afterEach((to) => {
// ページの構築が終わるまで少し待つ
setTimeout(() => {
gtag('event', 'page_view', {
location_path: `${window.location.origin}${to.fullPath}`,
page_path: to.fullPath,
page_title: document.title,
})
}, 100)
})
// gtagをinjectして、他のコンポーネントから this.$gtag で呼び出せるようにする。
inject('gtag', gtag)
}
そして、nuxt.config.jsで、このプラグインを読み込むよう設定します。
nuxt.config.js
export default {
plugins: [
{ src: '~/plugins/gtag.js', mode: 'client' },
],
}
今回はSSRするので、 { mode: client }を加えています。
毎回タイトルも一緒に送信する必要あり
app.router.afterEach イベントを使って、ルートが変化するたびにgtag関数をコールするのですが、Analyticsの管理画面をながめていると、タイトルとURLが一致していないことに気づきました。
どうもタイトルが書き換わる前に、Google Analyticsに渡ってしまうことがあるようです。
nuxtTickを使ってみましたが、残念ながらうまくいきませんでした。
そこでsetTimeoutでテストしてみたところ、きちんとしたタイトルが渡るようになりました。
今のところ、100ミリ秒程度遅延させるだけで、うまく動いているように見えます。
環境によっては、もう少し遅らせる必要があるかも知れませんので、しばらく様子をみたいと思います。