vercelのWeb AnalyticsをNext.jsのプロジェクトに導入する【@vercel/analytics】
vercelには簡易的ではありますがWeb Analyticsの機能があります。
導入方法は以下で。
以下がポリシーです。
サードパーティCookieを使わずにリクエストから生成されたハッシュで識別するそうです。
Next.jsでの導入
Enable Web Analytics in Vercel
Vercelの管理画面でEnableのボタンを押します。
そうすると、導入の手順が出てくるため、それに従います。
プロジェクトにWeb Analyticsをインストール
npm i @vercel/analytics
プロジェクトにAnalyticsをインストールします。
Web Analyticsの設定
設定を入れます。
APP routerとpages routerで少し変わります。
APP routerは直下のlayout.tsxに、pages routerは_app.tsxに入れます。
それだけで、全部のページを計測できます。
APP router
APP routerのNext.jsの場合は、layout.tsxにbodyタグなどが入っていますが、そこに設定を入れます。
+ import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<title>Next.js</title>
</head>
<body>
{children}
+ <Analytics />
</body>
</html>
);
}
pages router
import type { AppProps } from 'next/app';
+ import { Analytics } from '@vercel/analytics/react';
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
+ <Analytics />
</>
);
}
export default MyApp;
vercelにデプロイ
設定を追加して、VercelにデプロイするとvercelのAnalytics管理画面から閲覧できるようになります。
自分のアクセスを排除する方法とかが今のところわかっていないので、適当に自分のサイトを見に行くとアナリティクスが反応します。それで動作確認ができます。
まとめ
ユニークユーザー数とページビュー、どのページに来たのか、ぐらいですが簡易的に情報がわかります。
hobby版だと機能が制限されていたり、過去一か月までしか見られませんが、個人の趣味レベルだったり、サイトを作ったばっかりの時はそれで十分だと思います。
VercelにはSpeed Insightsもありますが、こちらはブラウザの機能と被っているのでそこまで必要そうではないですが、ブラウザで見て原因がわからない時に、入れてみると良さそうかなと思ったりします。
とりあえずWeb Analyticsに関しては、最初に試しに導入するものとしては十分な機能です。
Discussion