Next.js で GTM を設置する方法メモ。
技術選定
react-gtm-module
というライブラリを使うか dangerouslySetInnerHTML
でゴリゴリするかの2択。
いずれを使う場合でも、SPAでの遷移によるトリガーを考慮することに注意が必要。
react-gtm-module
というライブラリを使う方法で対応してみる。
設置メモ
yarn add react-gtm-module
_app.tsx
に下記を追加
import { FC, useEffect } from 'react';
import { AppProps } from 'next/app';
import TagManager from 'react-gtm-module';
const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
// Google Tag Manager
useEffect(() => {
TagManager.initialize({ gtmId: 'GTM-XXXXXX' });
}, []);
return <Component {...pageProps} />;
};
export default MyApp;
GTMでの設定
ページ内遷移の場合、ページビューとしては発火されない
なので、例えば、GAとかの計測を入れたい場合は、履歴の変更でトリガーを作成することに注意
参考
react-gtm-module
の参考ページ
https://github.com/vercel/next.js/discussions/15518
dangerouslySetInnerHTML
でゴリゴリするなら下記
https://github.com/vercel/next.js/tree/master/examples/with-google-tag-manager