NustJSのサイトにGAを導入する

参考

基本的に Google アナリティクスを使うには？ - NuxtJS をみて、そのまま導入する。

実施事項

以下のファイルを作成しました。
plugins/ga.js

NODE_ENVではなく、GA_TRACKING_IDという環境変数をみて、だし分けるようにしました。

/* eslint-disable */
const trackingID = process.env.GA_TRACKING_ID
export default ({ app }) => {
  if (!trackingID) return
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', trackingID, 'auto')
  app.router.afterEach((to, from) => {
    ga('set', 'page', to.fullPath)
    ga('send', 'pageview')
  })
}

nuxt.config.js
以下の行を追加しました。

  plugins: [
    ....
    { src: '~plugins/ga.js', mode: 'client' } // この行を追加
  ]

.env
次の行を足しました。

GA_TRACKING_ID=UA-101624678-2

debug方法

debugはChromeの開発者ツールのNetworkタブにて、 “collect” という文字列でフィルタして、“www.google-analytics.com” にビーコンが送信されているか確認しました。