Zenn
Closed2

nextjsでgoogle tag managerおよびGA4を導入する

Google Analytics
Next.js
#
gtm
#
ga4
#
googletagmanager
miyatakamiyataka
  • GTMのアカウント作成する
  • GTMのコンテナを作成する
  • Google タグ マネージャーをインストール からタグを取得
  • トリガーを追加しておく（履歴の変更）
  • GA4タグを2種類コンテナに追加（測定IDを指定する）
    • 設定タグ=> 配信トリガーはAll Pagesを指定
    • イベントタグ=> 配信トリガーはAll Pages, 履歴の変更を指定
  • すこし修正しつつNext.jsに導入
  • プレビューで確認する

詳しくしたものを記事化する

miyatakamiyataka

結論はこれ．
どのページもSSRを使う前提になっていたのでうまく動かなくてイラついたが，俺がやりたいのはSGなので...
やりたい人はコンポーネント化をよしなにやってください．

// pages/_document.tsx
import { Head, Html, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        {/* eslint-disable-next-line @next/next/next-script-for-ga */}
        <script
          dangerouslySetInnerHTML={{
            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXX');`
          }}
        ></script>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
このスクラップは2022/06/18にクローズされました