Next.js

Next.js で GTM を設置する方法メモ

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

ABOUT ME
うたたぞう
いつか海辺でゆったりライフを送りたい20代エンジニアです。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です