Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

tochiji
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