Next.jsでGoogle Analyticsを適用する方法は色々ありますが、日本語情報が少ないので低レベルながら僕の方でも情報を残しておきます。
next/router でのページ遷移も問題なく動作することを確認しています。
こんな感じで動作します
Next.jsでGoogle Analyticsを組み込んだ
— masa5714 (@b95oss) March 22, 2020
（Qiita備忘録用ビデオ） pic.twitter.com/p1vw9vJSqO
※ビルド前で動作させているのでページ遷移が遅いです。
※公開済みのトラッキングIDを使用したため、ちょうど他の人がアクセスしてて分かりづらくなってしまいました...すみません。（2アクセス目が僕のアクセスです。）
公式にExampleがありました
https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics
zeitが管理するnext.jsリポジトリの中にexampleがありましたので、こちらを参考に実装していきます。（ほぼ転載ですが...w）
lib/gtag.jsを作成する（最終的にimportできればフォルダ名・ファイル名はなんでも良いです）
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に記述を追加する
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に記述を追加する
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の「リアルタイム」で閲覧ページを追従できていることがお分かり頂けるはずです。