ブログの改良 (Google Analytics の設定)

2021-01-26

GA を設置しても数値見ないからいらないんだけど、設置方法は知りたいのでやっておく。

まずは windows.gtag で型エラーにならないように型宣言をインストール。

λ npm install -D @types/gtag.js

色々と参考にした結果、以下の内容を lib/gtag.ts として保存。

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

// IDが取得できない場合を想定する
export const existsGaId = GA_TRACKING_ID !== ''

// PVを測定する
export const pageview = (url: URL) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

type GTagEvent = {
  action: string;
  category: string;
  label: string;
  value: number;
};

// GAイベントを発火させる
export const event = ({ action, category, label, value }: GTagEvent) => {
  if (!existsGaId) {
    return
  }

  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

.env.local に環境変数を設定

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=XXXXXXXXXXXX

pages/_document.tsx に以下の内容を追記。

<Head>
  {/* Google Analytics */}
  {existsGaId && (
    <>
      <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>

paages/_app.tsx に以下の内容を追記。

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

vercel コマンドをインストールする。

λ npm i -g vercel
λ vercel
...
メールアドレスを入力すると認証メールが来るので、認証するとログイン完了

λ vercel link

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID 環境変数を追加。

λ vercel env add plain NEXT_PUBLIC_GOOGLE_ANALYTICS_ID production
Vercel CLI 21.2.0
? What’s the value of NEXT_PUBLIC_GOOGLE_ANALYTICS_ID? XXXXX

これで完成