【Next.js】Next.jsでGoogle Analyticsを導入しよう!

FRONT END

今回はNext.jsでGoogle Analytics(GA)を導入する方法を紹介します!

例として、実装したときのコードも載せたので、参考にしていただけたら!

 

気をつけるポイント

まず、気をつけるポイントを押さえておきましょう。特に今回は、Next.jsならではのポイントあげておきます。

 

環境変数の扱い

実装箇所と環境変数の埋め込み箇所を注意しましょう。

Next.jsの特性上、環境変数を受け取れる場所が異なります。

主に以下の二つに注目する必要があると思います。

①サーバー(SSR)で動いている箇所

・getServerSideProps

・_document.tsx

②ブラウザで動いている箇所

・ページ内のコンポーネントなど

①は環境変数が受け取れ、process.env.XXXで参照できます。

②は基本的には環境変数が受け取れないです。ですが、②でも環境変数を使いたいなら、NEXT_PUBLIC_XXXとすると取得可能となります。

 Next.jsの<Script>の動き

Scriptタグの動きに注意しましょう。

Next.jsのスクリプトタグのデフォルトの動きはブラウザで開かれた時に一回のみ走ります。

この動きを利用して、GA用のタグマネジャーのタグの埋め込みを発火させます。

ちなみに、この動きはスクリプトタグのstrategyというpropsで変更できます。

参考にNext.jsの公式のドキュメントのリンクを記載しておきます。

Reactのライフサイクル

useEffectを使い、適切なタイミングでスクリプトの発火やdatalayerの操作をすることにも注意してください。

CSP(コンテンツセキュリティポリシー)

CSPを設定している場合は、GAのjsを受け入れるように許可をしなければならないことにも注意しましょう。

Next.jsのデフォルトだと、特にこの設定はしていないようですが、プロジェクトのセキュリティを考慮するなら、設定しておきましょう。

設定する場合は以下のようになります。

script-srcに対して、https://www.googletagmanager.comを許可。

connect-srcに対して、https://www.google-analytics.comを許可。

 

実装コード

では、実際にコードを実装していきましょう!

 

_document.page.tsx


class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          // 環境変数に応じてGAを発火させるか判断している
          {isGoogleAnalyticsActive && (
            <Script
              id="gtag-base"
              strategy="afterInteractive"
              dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
              'https://www.googletagmanager.com/gtm.js?id='+i+dl+'&gtm_auth=${googleTagAuthId}&gtm_preview=${gtmPreview}&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
              })(window,document,'script','dataLayer','${googleTagManagerId}');`, }}
            />
          )}
        </Head>
        <body>
          <Main />
          <NextScript />
          {isGoogleAnalyticsActive && (
            <noscript
              dangerouslySetInnerHTML={{
                __html:`<iframe src="https://www.googletagmanager.com/ns.html?id=${googleTagManagerId}&gtm_auth=${googleTagAuthId}&gtm_preview=${gtmPreview}&gtm_cookies_win=x"
                height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
              }}
            />
          )}
        </body>
      </Html>
    );
  }
}
export default MyDocument;

 

hooks/google-analytics.ts

// windowでdataLayerを有効にしたいので。
interface GATWindow extends Window {
  dataLayer: Record<string, unknown>[];
}
declare const window: GATWindow;

export function addDataLayer(data: Record<string, unknown>) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push(data);
  // GAが有効になっていない環境ならdatalayerをコンソールログに出して確認する
  if (!isGoogleAnalyticsActive) {
    console.log('ga-dataLayer-local', window.dataLayer);
  }
}

// トップページを開いたとき
export const useTopPageOpen = () => {
  const user = useXXX();
  useEffect(() => {
    if (user?.id) {
      addDataLayer({
        event: 'site_open',
        sc_user_id: user.id,
      });
    }
  }, [user?.id]);
};

type UseYYYArgs = {
  active: boolean;
  id: string;
};

// 特定の動作をしたとき
export const useYYY = ({ active, id }: UseYYYArgs) => {
  useEffect(() => {
    if (active) {
      addDataLayer({
        event: 'zzz',
        aaa_id: id,
     });
    }
  }, [active, id]);
};

 

まとめ

Next.jsでGoogle Analyticsを実装するとなると、少し注意点もあるので、気をつけて実装していきましょう。

 


NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く!!

LINE公式アカウントはこちらから。

友だち追加

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00