Nuxt.jsに力技で（パッケージを使わずに）gaを導入する

はじめに

ある日のできごと・・・

PM「おーい、今回のサービス、お客さんがGA取り入れたいらしいから実装してくれー」

ワイ「（パッケージ※入れれば楽勝なんで）いっすよ」
※https://note.com/koushikagawa/n/n7b8b1b86fab0 参照

PM「あ、ちなみにtoB向けのマルチテナントサービスだから、ドメインごとに違うトラッキングID適用できるようにしといてー」

ワイ「・・・ええええええええええええええええええええええええええええええええええええええええええええええええええええええええ！！！！！！！』

・・・てなわけで、ドメインごとにトラッキングIDを切り替えなければならないため、npmのパッケージを使わずにGAを実装することとなったワイ氏

正直結構苦戦したので、同じように苦しんでる人向けに実装方法を残します・・・

参考

Nuxt公式を参考に実装しました。
https://ja.nuxtjs.org/faq/google-analytics/

やり方

\plugins配下に以下のファイルを作成

ga.js

export default ({
  app,
  store,
  route
}) => {
　// 本番環境以外は無効
  if (process.env.name !== 'production') return

  // Google アナリティクスのスクリプトをインクルード
  (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')

  // ドメインに応じてトラッキングIDを設定
  const trackingId = app.$trackingId(window.location.host)

  // 現在のページをセット
  ga('create', trackingId, 'auto')

  // ルートが変更されるたびに毎回実行（初期化も実行される）
  app.router.afterEach((to, from) => {
    /*
     ** Google アナリティクスにページビューが追加されたことを伝える
     */
    ga('set', 'page', to.fullPath)
    ga('send', 'pageview')
  })
}

また上記コードの「app.$trackingId(window.location.host)」の元となるpulginも以下の通り作成し、\plugins配下に配置

tracking_id.js

export default ({
  app,
}, inject) => {

  app.$trackingId = trackingId
  inject('trackingId', trackingId)

  function trackingId(domain) {

    const trackingCode = {
      aaaaa.jp : 'UA-xxxxxxxx-x',
      bbbbb.jp : 'UA-xxxxxxxx-x'
    }

    return trackingCode[domain]
  }
}

そしてnuxt.config.jsに以下の内容を追記

nuxt.config.js

// ～～～上記省略～～～

  plugins: [
    '~/plugins/ga',
    '~/plugins/tracking_id',
  ],

これで、GAの実装は完了です。
こちらを応用すれば、タグ仕込んだりとかもできると思います。（できたら次回記事上げます）

間違っている点やもっと良い方法などありましたら、コメントいただけるとありがたいです。
ご鞭撻のほど、よろしくお願いします。