Next.jsで作る無料ブログの始め方（GA導入編）
投稿 2021.10.13
目次
以下の記事で構築したブログにGoogle Analyticsを導入してみます。
GAはあまり使いこなせていないのですが、PV数が取得できる程度には実装してみます。
gtag の型定義をインストール
❯ npm install @types/gtag.js
envファイルにトラッキングコードを埋め込む
.env.local を作成
※ローカルで確認する際はここにもトラッキングコードを追加します。
src/.env.local
NEXT_PUBLIC_GA_ID=''
.env.production を作成
XXXXXXXXXXのところをトラッキングコードに置き換えます。
ダブルコート、シングルコートなどで囲みは不要です。
src/.env.production
NEXT_PUBLIC_GA_ID=XXXXXXXXXX
PV計測のための関数を定義
Gtag.tsを作成
src/utils/Gtag.ts
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID || '';
export const pageview = (url: string): void => {
// GA_TRACKING_ID が設定されていない場合は、処理終了
if (!GA_TRACKING_ID) return;
window.gtag('config', GA_TRACKING_ID, {
page_path: url,
});
};
GAスクリプトを追記
importを追加
src/layout/Meta.tsx
import { useRouter } from 'next/router';
-
+import { GA_TRACKING_ID } from '../utils/Gtag';
import { Config } from '../utils/Config';
src/layout/Meta.tsx
/>
</>
)}
+ {GA_TRACKING_ID && (
+ <>
+ <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
+ <script
+ dangerouslySetInnerHTML={{
+ __html: `
+ window.dataLayer = window.dataLayer || [];
+ function gtag(){dataLayer.push(arguments);}
+ gtag('js', new Date());
+ gtag('config', '${GA_TRACKING_ID}', {
+ page_path: window.location.pathname,
+ });
+ `,
+ }}
/>
</>
)}
</Head>
</>
);
ページ遷移のときにPVカウントを発火させるイベントの追記
src/pages/_app.tsx
-import React from 'react';
+import React, { useEffect } from 'react';
import { AppProps } from 'next/app';
import '../styles/main.css';
import '../styles/prism-a11y-dark.css';
+import { GA_TRACKING_ID, pageview } from '../utils/Gtag';
+
// eslint-disable-next-line react/jsx-props-no-spreading
-const MyApp = ({ Component, pageProps }: AppProps) => <Component {...pageProps} />;
+export default function MyApp({ Component, pageProps, router }: AppProps) {
+ useEffect(() => {
+ // GA_TRACKING_ID が設定されていない場合は、処理終了
+ if (!GA_TRACKING_ID) return undefined;
+
+ const handleRouteChange = (url: string) => {
+ pageview(url);
+ };
+ router.events.on('routeChangeComplete', handleRouteChange);
+ return () => {
+ router.events.off('routeChangeComplete', handleRouteChange);
+ };
+ }, [router.events]);
-export default MyApp;
+ return (
+ <Component {...pageProps} />
+ );
+}
参考文献
この記事を書いた人
関連のある記事
© 2021 - 2023 24365.dev