👻

Cloudflare Web Analytics を Next.js で使う

2020/12/31に公開

Next.js

Cloudflare

tech

先日、ユーザーのプライバシーを保護する形で Analytics を提供する Cloudflare 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.js の Example app with analytics を参考にしました。

該当コードはこちら

Discussion