Next.js(TypeScript) に Google Analytics #GooglAnalitics

公式Example

この情報をもとに設定しました

next.js/examples/with-google-analytics at canary · vercel/next.js

TypeScript対応

公式ExampleはJSなので、window.gtagでエラーになります。
よって、@types/gtag.jsを追加します。

yarn add -D @types/gtag.js

gtagを扱うライブラリの作成

lib/gtag.ts を作成します。
（パス/ファイル名は適宜変更してOKです）
参考もとには存在しなかった、GA_TRACKING_IDが未設定の処理を追加してます。

lib/gtag.ts

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  if (!GA_TRACKING_ID) return // GA_TRACKING_ID が設定されていない場合は、処理しない
  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 }) => {
  if (!GA_TRACKING_ID) return // GA_TRACKING_ID が設定されていない場合は、処理しない
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

_app.tsへの適用

_app.ts

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

const App = ({ Component, pageProps }) => {
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default

_document.tsへの適用

_document.ts のHeadタグに以下を追加します。

_document.ts

<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>

イベントを送信したい場合

例）pages/contact.ts

next.js/contact.js at canary · vercel/next.js

pages/contact.ts


  handleSubmit = (e) => {
    e.preventDefault()

    gtag.event({
      action: 'submit_form',
      category: 'Contact',
      label: this.state.message,
      value: ''
    })

    this.setState({ message: '' })
  }


 render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <button type="submit">submit</button>
      </form>
    )
  }

イベントについては以下を参照ください

Google アナリティクスのイベントを測定する | ウェブ向けユニバーサルアナリティクス（gtag.js）