Next.js のプロジェクトにGTMを組み込む方法

意外と情報がなかったので後世のために記す。

react-gtm-module というライブラリにお世話になった。
使わない場合は _document.js に dangerouslySetInnerHTML したりでもいける。はず。

Next.js での設定

まず npm install react-gtm-module --save か yarn add react-gtm-module する。

そして _app.tsx に次のコードを埋め込む

import TagManager from 'react-gtm-module';

class MyApp extends App {
  componentDidMount() {
    // gtmId に自分のGTMアカウントのID入れてください
    TagManager.initialize({ gtmId: 'GTM-XXXXXX' });
  }

  render() {
    。。。
  }
}

これでタグは配信されるようになる。

が、これだけだとクライアントサイドルーティングのPVが計測できない(History APIで更新しているだけなのでタグが発火されないから)。Next.jsを使っていると基本的にユーザの元に届いた時点でSPAとして振舞うようになると思うのでそれに対策する必要がある。

GTM上でページ遷移時のPVを取るためのトリガーを作る

「履歴の変更」というトリガーを仕込んであげるといい。
https://support.google.com/tagmanager/answer/7679322?hl=ja

これで公開して GTM のプレビューで見ると History というイベントが計測されていることを確認できる。