開発日誌: Next.jsでGTMを設定する

こんにちは、みみです。

先日からサイトがGridsomeからNext.js製になりましたが、今日はGoogle Tag ManagerをNext.jsで設定しましたので、そのメモです。

alinemorelli/react-gtm: React Google Tag Manager

というライブラリを利用しました。

$ npm install react-gtm-module --save

でインストールして _app.js を以下のようにします。（GTM-XXXXXXX を各自のGTMタグに書き換えてください。）

import App, { Container } from 'next/app'
import TagManager from 'react-gtm-module'
import '../styles/globals.css'
import '../store'

class MyApp extends App {
  componentDidMount() {
    TagManager.initialize({ gtmId: 'GTM-XXXXXXX' })
  }
  render() {
    const { Component, pageProps } = this.props
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

export default MyApp

gistはこちら
https://gist.github.com/miminari/e165b849d5443e2c02a829caa3435a7b

後はGTM側の設定で、トリガーに「履歴の変更」を追加すればいいらしい、のですが、設置したばかりなのでいまいち分かっていません。これを読んで貰っている皆さんのログで検証したいと思います。

参考URL:

• https://qiita.com/seya/items/d4108d28ee5b1773f671
• https://ryanelainska.com/blog/google-tag-manager-in-react
• https://github.com/vercel/next.js/discussions/15518#discussioncomment-135390

---

2021/11/24追記

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

より、書き方はこちらにアップデートしました。

import TagManager from 'react-gtm-module';

const tagManagerArgs = {
  gtmId: 'GTM-000000'
}

export default function MyApp({ Component, pageProps }: AppProps) {
  // Google Tag Manager
  useEffect(() => {
    TagManager.initialize(tagManagerArgs);
  },[]);
  return (
    <>
      <HeadlessProvider client={client} pageProps={pageProps}>
        <Component {...pageProps} />
      </HeadlessProvider>
    </>
  );
}