Nuxt.jsにGoogle Analyticsを追加する

2021年01月19日
2022年06月12日

Ad Area

Google Analyticsに登録済みであることを前提に話を進める。

1週間でGoogleアナリティクス4の基礎が学べる本

Amazonで見る楽天市場で見る Yahoo!ショッピングで見る

Google Analyticsにサイトを追加

新規プロパティを追加する。最後にサイトを追加したのが5年以上前なので、すっかり方法を忘れていましたわ（UIも少し変わっていた）。

左下の歯車アイコン（管理）をクリックし、「プロパティ」列の「プロパティを追加」をクリックする。

「プロパティの設定」－「プロパティの詳細」から項目を入力していく。レポートのタイムゾーンと通貨のデフォルト値がアメリカ合衆国・米ドルになっているので、日本・日本円に修正。

【注意】「次へ」ボタンではなく、直下の「詳細オプションを表示」リンクをクリックする。

「ユニバーサルアナリティクスプロパティの作成」右上をチェックして、ウェブサイトのURLを入力する。Googleアナリティクス4を作っておいても問題はないので、チェック項目は変更せずに「次へ」で進む。

ビジネス情報を入力する。個人サイトの場合は近いカテゴリーでよいと思う。

新規プロパティが作成される。「プロパティ設定」をクリックすると、トラッキングIDが確認できる。

GA4のトラッキングID（G-xxxxxxxxxxの部分には固有の文字列が入る）は、左下歯車アイコン（管理）から、アナリティクスの管理＞プロパティ（GA4のプロパティを選択）＞データストリーム＞ウェブストリームの詳細から確認できる。

@nuxtjs/google-gtagモジュールによる導入

@nuxtjs/google-gtagモジュールは、Googleアナリティクス4に対応したプラグインである。

インストール

npm install --save-dev @nuxtjs/google-gtag
// or
yarn add @nuxtjs/google-gtag

設定

nuxt.config.js

export default {
  modules: [
    [
      '@nuxtjs/google-gtag',
      {
        id: 'G-XXXXXXXXXX',
        debug: false
      }
    ]
  ],
}

id：G-で始まるトラッキングIDを入力
debug：通常はfalse、ローカル環境でも確認したい場合はtrue

nuxt.config.jsでGoogleアナリティクス4のタグを追加

@nuxtjs/google-gtag最新版（にして初版？）が出たのが4年前と結構古めなのが気になったのと、デバッグの必要がないのであれば直接nuxt.config.jsでhead内に追加する方法でも問題ないのではと思い、こちらの方法にした。

GA4のタグは、ウェブストリームの詳細ページ内のタグ設定手順項目＞新しいページ上のタグを追加する＞グローバルサイトタグ（gtag.js）で確認できる。

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

  gtag('config', 'G-xxxxxxxxxx');
</script>

このタグをnuxt.config.js用に整える。

nuxt.config.js

export default {
const GAID = 'G-xxxxxxxxxx'
const GAcode = `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GAID}');`

export default {
  head: {
    script: [
      { hid: 'GAsrc', src: 'https://www.googletagmanager.com/gtag/js?id=' + GAID, async: true },
      { hid: 'GAcode', innerHTML: GAcode },
    ],
    __dangerouslyDisableSanitizersByTagID: {
      'GAcode': ['innerHTML'],
  }
}

innerHTML：<script>...</script>の中身を渡すと、<script>...</script>形式で出力できる。
__dangerouslyDisableSanitizersByTagID：タグをエスケープ（例：<を"と表示）させずに出力するためのオプション。hidで指定したGAcodeがエスケープの対象外となり、スクリプトタグとして出力される。

スクリプトの読み込みにはなるべくライブラリを使った方がよいという意見もあるようだが、実際のところどうなんでしょう。

@nuxtjs/google-analyticsモジュール（※旧アナリティクス）

@nuxtjs/google-analyticsは従来のアナリティクス（UA-で始まるトラッキングID）にのみ対応しているパッケージである。

インストール

npm install --save-dev @nuxtjs/google-analytics
// or
yarn add --dev @nuxtjs/google-analytics

設定

nuxt.config.js

export default {
  buildModules: [
    '@nuxtjs/google-analytics'
  ],

  googleAnalytics: {
    id: 'UA-XXX-X'
  }
}

id: 'UA-XXX-X'には、Google Analytics画面で確認したトラッキングIDを記入する。

参考ページ

これからはじめるVue.js 3実践入門

Amazonで見る楽天市場で見る Yahoo!ショッピングで見る

Ad Area