Help us understand the problem. What is going on with this article?

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の実装は完了です。
こちらを応用すれば、タグ仕込んだりとかもできると思います。(できたら次回記事上げます)

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

uluru
クラウドワーカーを活用した事業を行う会社(クラウドソーシング、入札情報速報サービスなどを運営)
https://www.uluru.biz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした