Next.jsで作る無料ブログの始め方(GA導入編)

投稿 2021.10.13

目次

以下の記事で構築したブログにGoogle Analyticsを導入してみます。

https://24365.dev/posts/20211008-nextjs-start/

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} />
+  );
+}

参考文献

https://fwywd.com/tech/next-ga-pv

この記事を書いた人

avatar

にいよん

WEBエンジニアで0&2歳娘のパパです。フルリモートでちいたまに引きこもり中。密かにFIRE目指してます。こんな情報を発信中→投資、IT技術、副業、仮想通貨、暗号資産、NFT、メタバース、ブロックチェーン

関連のある記事

    © 2021 - 2022 24365.dev