技術
こんにちは！Web系の企業に勤務し、地方からフルリモート勤務をしている@takakouと申します
今回は、【Next.js】Google Analytics4を導入してみた というテーマで記事をシェアします！
記事執筆は未熟者で、至らない点もあるかと思いますが、皆さんのコメントやフィードバックをお待ちしています！
Next.jsプロジェクトにGoogleAnalyticsを導入したい方
Next13系を利用している方
App routerを採用している方
デプロイにVercelを利用している方
この章では動作環境について説明します。
PC : MacBook Air (M1, 2020)
RAM : 8GB
OS : macOS Monterey(ver12.1)
Next.js : 13.4.19
React : 18.2.0
npm : 9.8.1
この章では前提知識をいくつか説明します。
情報についてchatGPTに聞いてみました
Google Analyticsは、Googleが提供するウェブ解析ツールのことを指します。このツールを使用すると、ウェブサイトやモバイルアプリのユーザーの行動を詳しく分析することができます。以下はGoogle Analyticsの主な機能と特徴になります：
どのような経路でユーザーがサイトにアクセスしてきたか、例えば検索エンジン、リファラーサイト、直接アクセスなどの情報を取得することができます。
ユーザーがサイト内でどのページを訪れたか、どのページでどれくらいの時間を過ごしたか、どのページで離脱したかなどの情報を分析することができます。
年齢、性別、地域などのユーザーの基本的なデモグラフィック情報を取得することができます。
オンラインストアや広告キャンペーンの成果を測定するためのツールとして、コンバージョン（目標達成）の追跡機能があります。
ユーザーのニーズに合わせてカスタムレポートを作成することができます。
この章では実装手順について説明していきます。
下記の記事を見ながら設定をしていただき、計測タグのIDをメモしておきます
G-XXXXXXXXXXみたいなのが設定完了後に出てくるはずです。
~ $ npm i -D @types/gtag.js
NEXT_PUBLIC_GA_ID=*********
export const GA_TAG_ID = process.env.NEXT_PUBLIC_GA_ID || "";
export const IS_GATAG = GA_TAG_ID !== "";
export const pageview = (path: string) => {
window.gtag("config", GA_TAG_ID, {
page_path: path,
});
};
"use client";
import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { useEffect } from "react";
import { IS_GATAG, GA_TAG_ID, pageview } from "@/../libs/gtag";
const GoogleAnalytics = () => {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
if (!IS_GATAG) {
return
}
const url = pathname + searchParams.toString()
pageview(url)
}, [pathname, searchParams])
return (
<>
<Script
strategy="lazyOnload"
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TAG_ID}`}
/></Script>
</>
);
};
export default GoogleAnalytics;
import GoogleAnalytics from '@/components/GoogleAnalytics/GoogleAnalytics'
<html lang="ja">
<head>
<GoogleAnalytics/>
</head>
<body>
<div>
<Header/>
<div className='m-1 mt-5 rounded-lg'>
{children}
</div>
<Footer/>
</div>
</body>
</html>
Vercelで環境変数として定義して値も入れておきます。
デプロイをし直し、少しサイトを操作した後にGoogle Analyticsの画面を見にいきましょう。GoogleAnalyticsの画面が設定のような画面から切り替わり、計測画面になっていればOKです。
GoogleAnalyticsの設定がとても簡単だったので驚きました。
とりあえず今回は設定を計測されるか試してみたいだけだったのでここで終わります。
間違っている点等ありましたら指摘いただけると嬉しいです！
