Nuxt.jsにGoogle Analyticsを追加する

Photo by Lauren Edvalson on Unsplash

この記事は最終更新日から 1 年以上が経過しており、内容が古くなっている可能性があります。

Nuxt.js に Google Analytics を追加する。パッケージを使う方法と、nuxt.config.js で直接 head に追加する方法の 2 つがある。

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

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

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

Google Analytics にサイトを追加

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

Google Analytics 1

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

Google Analytics 2

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

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

Google Analytics 3

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

Google Analytics 4

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

Google Analytics 5

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

Google Analytics 6

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

設定

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 内に追加する方法でも問題ないのではと思い、こちらの方法にした。

Google Analytics 7

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 用に整える。

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：タグをエスケープ（例：<を&quot;と表示）させずに出力するためのオプション。hidで指定したGAcodeがエスケープの対象外となり、スクリプトタグとして出力される。

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

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

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

インストール

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

設定

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

  googleAnalytics: {
    id: "UA-XXX-X",
  },
};

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

参考ページ

Suzunatsu

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

この記事がお役に立ちましたら、サポートをお願いします。

記事トップに戻る

広告