--- title: Next.jsでGoogle Analyticsを適用する(react-gaは使用しません) tags: next.js SPA GoogleAnalytics author: b95oss slide: false --- Next.jsでGoogle Analyticsを適用する方法は色々ありますが、日本語情報が少ないので低レベルながら僕の方でも情報を残しておきます。 `next/router` でのページ遷移も問題なく動作することを確認しています。 # こんな感じで動作します

Next.jsでGoogle Analyticsを組み込んだ
(Qiita備忘録用ビデオ) pic.twitter.com/p1vw9vJSqO

— masa5714 (@b95oss) March 22, 2020
※ビルド前で動作させているのでページ遷移が遅いです。 ※公開済みのトラッキングIDを使用したため、ちょうど他の人がアクセスしてて分かりづらくなってしまいました...すみません。(2アクセス目が僕のアクセスです。) # 公式にExampleがありました https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics zeitが管理するnext.jsリポジトリの中にexampleがありましたので、こちらを参考に実装していきます。(ほぼ転載ですが...w) # lib/gtag.jsを作成する(最終的にimportできればフォルダ名・ファイル名はなんでも良いです) ```javascript:gtag.js export const 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, }) } ``` `` をGoogle AnalyticsのトラッキングIDに差し替えます。 # pages/_app.jsに記述を追加する ```javascript:_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に記述を追加する ```jsx:_document.js import Document, { Head, Main, NextScript } from 'next/document'; import { GA_TRACKING_ID } from '../lib/gtag' export default class extends Document { render() { return ( {/* Global Site Tag (gtag.js) - Google Analytics */}