はじめに
先日、React で、実践的なスキルチェックができる、
学習のお題まとめサイトを、公開しました 🐾
デザイン・仕様に基づいて、
実際に、React アプリを構築するサービスです！
さて、
継続的な、プロダクトの改善には、ユーザーの反応・行動を理解することが欠かせません。
なので、今回は、Next.js v15.3 で Google Analytics を導入したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
Google Analytics とは？
Google が提供する無料の Web サイト解析ツールが、Google Analytics です。
あなたの Web サイトを訪問したユーザーの行動データを詳細に分析でき、
どのページが人気か、どのくらいの時間サイトに滞在しているかがわかります！
現在は「Google Analytics 4（GA4）」という最新バージョンが利用でき、
ユーザーをベースにした高度な分析機能を提供してくれるのが、特徴の一つです。
そもそも、Web 解析とは？
Web 解析とは、Web サイトの訪問者の行動を数値化して分析することです。
具体的には、以下のようなデータを取得・分析します：
基本的な指標
- ページビュー（PV）：ページが表示された回数
- セッション：サイト訪問から離脱までの一連の行動
- ユーザー数：実際に訪問した人数
- 滞在時間：サイトに滞在した時間
ユーザーの行動パターン
- 流入経路：検索、SNS、広告などどこから来たか
- 離脱率：すぐにサイトを離れた割合
- コンバージョン：目標となる行動（購入、問い合わせなど）の達成
これらのデータを分析することで、サイト改善のヒントを得られ、
より効果的な Web サイト運営が可能になります！
Next.js への導入手順
Next.js v15.3 では、@next/third-partiesライブラリを使用することで、
簡単に Google Analytics を設定できます！
下記は、簡略化したサンプルコードです：
1. ライブラリのインストール
npm install @next/third-parties@latest
2. 環境変数の設定
.env.localファイルを作成し、測定 ID を設定：
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXX
なお、測定 ID は、Google Analytics の管理画面で確認できます！
測定 ID の取得手順に関しては、上記が参考になります 👍
3. App Router での設定
// app/layout.tsx
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja">
<body>{children}</body>
{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID && (
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID} />
)}
</html>
);
}
これにて、Google Analytics の導入は完了です！
簡単ですね！！
他にも、たくさんの統計ツールが存在しますが、
ここまで紹介した通り、 Google Analytics は、無料で簡単に導入できるので、公開時には設定しておくと便利ですね！
おまけ： Google Analytics で最初にやっておきたい設定
上記で紹介されている内容を踏まえ、
Google Analytics を導入したら、以下の設定も合わせて行っておくと便利です：
- データ保持期間の延長：初期設定の 2 か月から 14 か月に変更
- IP アドレスの除外設定：自社からのアクセスを除外
- Google Search Console との連携：検索キーワードの分析が可能に
- 拡張測定機能の有効化：スクロール、動画視聴などの詳細追跡
他にも、カスタムイベントを設定することで、
より詳細な分析が可能になります！
ウェブサイトやアプリで発生した、ユーザーの操作：
- ページの読み込み
- リンクのクリック
- 購入
などの詳細な指標を確認できます！
おわりに
最後まで読んでいただだき、ありがとうございます 🥳
下記の「React Road」の開発での、学習記録のような記事ですが、
少しでも参考になれば、嬉しいです！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion