Nuxt.jsにGoogle Analyticsを導入する

Nuxt.jsのプロジェクトにGoogle Analyticsを導入します。

数年前はGoogle Analyticsに導入するID（UA-から始まるもの）のことをトラッキングIDと言っていたと思うんですけど、今は測定IDというのですね。。

しかも今 UA- から始まらなくなっていて私のID G- から始まっとる、、時代の進みを感じる。笑

測定IDを取得

今回の主旨とは外れるので手短に。

アナリティクスのページに行き、 https://analytics.google.com/

管理 > プロパティを作成

後は必要な情報を入力していくと以下のように測定IDが見られるようになります

Google Analyticsの設定

Google Analytics用のパッケージを追加

Google Analytics用のパッケージ @nuxtjs/google-gtag を追加します

$ yarn add @nuxtjs/google-gtag

余談

2020/10/26現在だとアナリティクス用に導入するjsが analytics.js ではなく gtag.js （グローバルサイトタグ）という名前になっています。

参考: 最新！？Google Analyticsの「Global Site Tag」(gtag.js)

// gtag.jsのサンプル
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1234567890"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 
  gtag('config', 'G-1234567890');
</script>

このタグを導入するためには @nuxtjs/google-analytics ではダメで、@nuxtjs/google-gtag を使用する必要があります。

NuxtにGoogle Analyticsの設定を記載する

nuxt.config.jsにGoogle Analyticsの設定を記載します。

記載する場所は2つで、 modules と google-gtag の2箇所。

export default {
  modules: ['@nuxtjs/google-gtag'],
  'google-gtag': {
    id: 'G-1234567890',  //サイトのID
    debug: true,  // 開発環境でも表示したい場合
  },
・・・
}

debug: true にすることで開発環境でもタグが埋め込まれていることが確認出来ます。 （ $ yarn run dev でもタグのscriptが埋め込まれる）

本番に公開する前には false にした方が無難そうですね。