Cloudflare Web Analytics を Next.js で使う

1 min read読了の目安(約1100字

先日、ユーザーのプライバシーを保護する形で Analytics を提供する Cloudflare Web Analytics がパブリックベータになり、誰でも利用が可能になりました。

https://blog.cloudflare.com/privacy-first-web-analytics/

今回は、Custom Document を作成し、 Next.js 内で利用できるようにします。

render() {
  return (
    <Html lang="ja">
    <Head>
      {/* Cloudflare Web Analytics */}
      <script
        defer
        src='https://static.cloudflareinsights.com/beacon.min.js'
        data-cf-beacon='{"token": "your-token-here"}'
      />
      {/* End Cloudflare Web Analytics */}
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
    </Html>
  )
}

これだけです。数時間後に Dashboard を確認すると、無事にアクセス数がカウントされていました。

なお、今回の記事を書くにあたり、vercel/next.jsExample app with analytics を参考にしました。

該当コードはこちら

https://github.com/vercel/next.js/blob/c0ff5ef2c45e90f96faf8122cff1005a7979b287/examples/with-google-analytics/pages/_document.js