概要

NuxtJSベースで作っているWebアプリにGoogle Analyticsを導入しました。

nuxt-community/google-gtag-moduleを利用させていただきました。

旧来のWebアプリではページを表示する際は都度サーバーにHTMLを要求して、ページのリロードが走るため、都度htmlのheaderやbody下部のscriptが動いたのですが、
NuxtJSのようなsingle page applicationは同様の動作を保証しないため注意が必要です。

基本的には上記のような優秀なpackageを利用させてもらうのが楽で良いかと思います。

実装内容

Google Analyticsコンソールでプロパティの作成

• GAのコンソールにログインして、プロパティを作成します。
• データストリームのメニューでウェブのストリームを追加・作成します。
• できたら測定IDというのが発行されるので、メモしておきます。

GAID=G-XXXXXXXXXX

install @nuxtjs/google-gtag

% yarn add @nuxtjs/google-gtag

nuxt.config.js

nuxt.config.js に以下を追加しました。

  modules: [
    // この行を追加
    '@nuxtjs/google-gtag',
  ],
  // 以下のプロパティを追加
  'google-gtag': {
    id: process.env.GAID,
    debug: true, // enable to track in dev mode
  },

GAIDは事前に.envに定義しておき、dotenvパッケージを追加ってnuxt.config.jsの冒頭で読み込ませて使っています。

import dotenv from 'dotenv'
dotenv.config()

データの確認

画面が立ち上がったら、ブラウザの検証モードを開き、のネットワークタブから google-analytics とか collect に一致する通信がないか調べます。

うまく動作している場合にはページ遷移毎に通信（ビーコンの発火）が確認できるようになります。

また、Google Analyticsコンソール画面からもリアルタイムに確認することができるようになります。

以上になります。
とても簡単に導入できました。