Help us understand the problem. What is going on with this article?

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」という名前のファイルを作成し、下記内容を入力してください。

# テストしたい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でサイト作っている人は試してみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away