[Next.js] Googleタグマネージャを追加する

import TagManager from 'react-gtm-module'
export default {
 init: function() {
 TagManager.initialize({ gtmId: 'gtmContainerId(gtmpages/_app.tsxの中で)' });
 },
 push: function(obj: {}) {
 TagManager.dataLayer({
 dataLayer: obj
 })
 }
}

初期化はpages/_app.tsxのinit()メソッドを実行することで行われます。

import gtm from '@/utils/gtm';
function MyApp(props) {
 useEffect(() => {
 gtm.init();
 }, []);
 //..
}

push() の例

import gtm from '@/utils/gtm';
function Example() {
 return (
 <button
 type="button"
 onClick={() => gtm.push({
 event: 'next',
 userId: 111
 })}
 >
 Test push
 </button>
 )
}