「@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ミリ秒程度遅延させるだけで、うまく動いているように見えます。
環境によっては、もう少し遅らせる必要があるかも知れませんので、しばらく様子をみたいと思います。