841-biborokuWebフロントエンドの備忘録

Google タグマネージャー/GA4を設定する

案件でよくあるケースを想定して実装してみる

  • Google タグマネージャー
  • GA4


Next.js公式:https://nextjs.org/docs/basic-features/script


ケース1:GTMのパッケージを使ってタグを設置

npm i react-gtm-module

Typescriptには対応していないので、 Could not find a declaration file for module 'react-gtm-module' のエラーがでる。


型定義のないパッケージを使う

├ src
│└ pages
│ └ type
│  └ react-gtm-module.ts

react-gtm-module.ts

declare module 'react-gtm-module'

tsconfig.json

    "paths": {
      "@/*": ["src/*"],
      "react-gtm-module": ["types/react-gtm-module"]
    }

参考サイト

https://zenn.dev/yuji/articles/eb44899c4c44f8


参考サイト

https://www.learnbestcoding.com/post/9/easiest-way-to-integrate-google-analytics-with-react-js-and-next-js#whereToPutScriptTags


import { useEffect } from "react";
import TagManager from "react-gtm-module";
export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    TagManager.initialize({ gtmId: process.env.NEXT_PUBLIC_GTM_ID });
  }, []);
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}


このままだと<Link>コンポーネントを使用したページ遷移が計測されないらしい。

計測されるようにするには、GTMの設定変更が必要


GTMに履歴変更トリガーを追加する

公開を忘れずに


一度この設定で様子を見て、どのような計測結果が得られるか見てみることに。

他のGTMを設定やGA4の設置方法は、ゆくゆくは試す予定。

シェア