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

Next.jsでGoogle Analyticsを適用する(react-gaは使用しません)

Next.jsでGoogle Analyticsを適用する方法は色々ありますが、日本語情報が少ないので低レベルながら僕の方でも情報を残しておきます。

next/router でのページ遷移も問題なく動作することを確認しています。

こんな感じで動作します

※ビルド前で動作させているのでページ遷移が遅いです。
※公開済みのトラッキングIDを使用したため、ちょうど他の人がアクセスしてて分かりづらくなってしまいました...すみません。(2アクセス目が僕のアクセスです。)

公式にExampleがありました

https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics
zeitが管理するnext.jsリポジトリの中にexampleがありましたので、こちらを参考に実装していきます。(ほぼ転載ですが...w)

lib/gtag.jsを作成する(最終的にimportできればフォルダ名・ファイル名はなんでも良いです)

gtag.js
export const GA_TRACKING_ID = '<YOUR_GA_TRACKING_ID>'

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = url => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

<YOUR_GA_TRACKING_ID> をGoogle AnalyticsのトラッキングIDに差し替えます。

pages/_app.jsに記述を追加する

_app.js
import App from 'next/app'
import Router from 'next/router'

import * as gtag from '../lib/gtag'

Router.events.on('routeChangeComplete', url => gtag.pageview(url))

export default App

import * as gtag from '../lib/gtag' でlib/gtag.jsを呼び出します。

pages/_document.jsに記述を追加する

_document.js
import Document, { Head, Main, NextScript } from 'next/document';

import { GA_TRACKING_ID } from '../lib/gtag'

export default class extends Document {
  render() {
    return (
      <html>
        <Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

ここは何も変更する必要はありません。
import { GA_TRACKING_ID } from '../lib/gtag'gtag.js を読み込みを行って、 Head の中にGAのスクリプトを記述します。


ここまで完了すれば導入は終わりです。
実際にサイトにアクセスして動作確認をしてみましょう。

ページ遷移を行うとGoogle Analyticsの「リアルタイム」で閲覧ページを追従できていることがお分かり頂けるはずです。

b95oss
Web制作会社を辞めてカラオケ屋でアルバイトしてます。
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
No 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
ユーザーは見つかりませんでした