Vercelでは、簡易的なアクセス解析ツールであるVercel Web Analyticsが利用可能です。
Next.jsで作成したサイトにVercel Web Analyticsを導入する手順をご紹介いたします。
Next.jsで作成した環境にVercel Web Analyticsを導入する手順
Vercel管理画面の[Analytics]にも導入手順は書いてあり、記載の通りに実施していくだけでOKです。
まず、以下いずれかのコマンドでVercel Web Analyticsをインストールします。今回のプロジェクトではyarnを使っていたのでyarnでインストールしました。環境に合わせてください。
npm i @vercel/analytics
yarn add @vercel/analytics
pnpm i @vercel/analytics
続いて、analyticsをインポートしてタグを設置します。
- App Router：/src/app/layout.tsx
- Pages Router：/pages/_app.tsx
上記ファイルに以下を追記します。importはファイル上部、<Analytics>はApp Routerなら</body>の直前、Pages Routerならreturnの最後に追記します。
import { Analytics } from "@vercel/analytics/next"
<Analytics />
App Routerの場合
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Analytics } from "@vercel/analytics/next"
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja" className={`${geistSans.variable} ${geistMono.variable}`}>
<body>
{children}
<Analytics />
</body>
</html>
);
}
Pages Routerの場合
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { Analytics } from "@vercel/analytics/next"
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
);
}
上記が完了したらGitHubにプッシュしてデプロイします。
Vercelの管理画面で[Analytics]を開くと、アクセス数が確認できます。リアルタイムでアクセス数がカウントされるので、導入したらすぐに動作確認できます。
あとがき
Googleアナリティクスに比べるとかなり簡易的なアクセス解析ツールにはなりますが、リファラーやデバイス、ブラウザなどもちゃんと記録されます。小規模なサイトではVercel Web Analyticsで十分だと思います。
しかも訪問者の識別にはCookieを使わないそうです。
Privacy: Web Analytics only stores anonymized data and does not use cookies, providing data for you while respecting your visitors’ privacy and web experience.
How visitors are determined
Instead of relying on cookies like many analytics products, visitors are identified by a hash created from the incoming request. Using a generated hash provides a privacy-friendly experience for your visitors and means visitors can’t be tracked between different days or different websites.
The generated hash is valid for a single day, at which point it is automatically reset.
If a visitor loads your website for the first time, we immediately track this visit as a page view. Subsequent page views are tracked through the native browser API.
コメントを残す