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
16
Help us understand the problem. What is going on with this article?
@b95oss

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

More than 1 year has passed since last update.

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の「リアルタイム」で閲覧ページを追従できていることがお分かり頂けるはずです。

16
Help us understand the problem. What is going on with this article?
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
b95oss
Web制作会社を辞めてカラオケ屋でアルバイトしてます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
16
Help us understand the problem. What is going on with this article?