Next.js + Vercel 製のブログに Google Analytics を導入する

2021-02-07

Google Analytics でアクセス解析をしたい。

元々このブログは Nuxt + Firebase Hosting で運用されていたので、アナリティクスのプロパティ自体は既に存在していた。ブログにgtagを埋め込んで、そのプロパティと接続するだけで大丈夫っぽい。

コードにgtagを埋め込む

まずはヘッダーにscriptタグを記述。

pages/_document.tsx

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

<Head>
  <link rel="icon" href="/favicon.png" />
  {GA_TRACKING_ID != null && (
    <>
      {/* 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>

GAイベントを発火させる関数を作成。

lib/gtag

export const GA_TRACKING_ID = process.env.GA_TRACKING_ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: string) => {
  // @ts-ignore
  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 }: { action: string, category: string, label: string, value: string }) => {
  // @ts-ignore
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

vercelに環境変数を設定する

Settings -> Environment Variables ページで環境変数を追加できるので、Secret としてGA_TRACKING_IDを設定する。

vercelで設定した環境変数を受け取るため、next.config.jsに以下を追記する。

module.exports = {
  env: {
    GA_TRACKING_ID: process.env.GA_TRACKING_ID,
  }
}

無事に設定ができました。