NuxtでGoogleアナリティクス（gtag.js）を実装する

はじめに

Nuxtで作ったサイトにGoogleアナリティクスを入れる方法です。
いろいろ記事はありますが、Googleアナリティクスの最新のタグ形式（2019年2月13日）である
__gtag.js__を使用したものがあまりなかったのでまとめます。
（GTMを使う場合はまた別の方法で入れてください）

gtag.jsを利用してGA計測をするための手順

プロジェクトに@nuxtjs/google-gtagをインストールします。

モジュールのインストール

$ npm install --save @nuxtjs/google-gtag

これはnuxtコミュニティ公式のものです。
https://github.com/nuxt-community/google-gtag

nuxt.config.jsの設定

  modules: [
    [
      '@nuxtjs/google-gtag',
      {
        id: 'UA-XXXXXX-XX', //あなたのGoogleアナリティクスのプロパティID
        debug: true //本番環境以外でもGAを有効にしたい場合はtrueに。
      }
    ]
  ],

これだけで、全ページでGAのページビューが飛ぶようになります。
他に細かい設定を行いたい場合は、上のURLからオプションを確認してください。
複数GAアカウントを設定できたり、クロスドメイントラッキングの設定もできます。

イベントやeコマースを取得したいとき

vueファイル内で、下記のように記述することで自由にイベント等を取得できます。
__this.$gtag__という関数で飛ばすことができます。

this.$gtag('event', 'クリック計測', {
  'event_category': 'SNSボタンクリック',
  'event_label': 'twitter',
  'value': 1
});

公式のイベント取得方法はこちら↓

Google アナリティクスのイベントをトラッキングする
https://developers.google.com/analytics/devguides/collection/gtagjs/events?hl=ja

おまけ（.envでのGAIDの管理方法）

これは拡張eコマースのテスト用に作ったリポジトリです。
https://github.com/tochiji/ga-ecommerce-test-nuxt

このリポジトリでは、GAのプロパティIDを「.env」ファイルで管理しています。
「.env」ファイルはローカルに存在しており、リポジトリに上がっていません。

「.env」ファイルで管理することで、重要な変数を別ファイルにまとめておくことができます。
github等にソースコードをアップロードするときにGAIDをソースコードから分離することができます。

nuxtで.envを使用するための準備

$ npm install --save @nuxtjs/dotenv

.envファイルの作成

「.env」という名前のファイルを作成し、下記内容を入力してください。

.env

# テストしたいGAのID（プロパティID）を入力

GAID=UA-XXXXXXXXX-X

このファイル自体がgithub等にアップされてしまわないよう、.gitignoreに「.env」と記述しましょう。
※「create-nuxt-app」で環境構築をした場合は、初めから記述されているので安心です。

nuxt.config.jsでの設定

require('dotenv').config() //dotenvを使用するために必要

module.exports = {
...
  modules: [
    '@nuxtjs/dotenv', //この一行を追加
    [
      '@nuxtjs/google-gtag',
      {
        id: process.env.GAID, //この形式で「.env」ファイル内の変数が使える
        debug: true
      }
    ]
  ],
...
}

#おわりに
上記のように簡単に入れられるので、nuxtでサイト作っている人は試してみてください。