合同会社nemn-d

Next.jsにGoogle Tag Managerを導入する手順

Next.jsGoogle Tag Manager

概要

Next.jsで作ったウェブサイトにGoogle Tag Manager（GTM）を導入する手順です。

前提

  • GTMのコンテナの作成等のセットアップは済んでいる

手順

  • pages/_document.tsx を以下の内容で作成する。

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

class MyDocument extends Document {
  render() {
    // GTMのインストール用のタグを代入する
    const gtmHeadScript = `(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-MXXXXXX');`;

    return (
      <Html>
        <Head>
          <script dangerouslySetInnerHTML={{ __html: gtmHeadScript }} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

背景

本ブログはNext.jsで作っています。アクセス数等を解析するためにGoogle Analyticsの導入を考えていましたが、設定を便利にするためにGTM経由で導入したいと考えていました。

感想

思ったより簡単に導入できて驚きました。以前Gatsby.jsでブログを作っていた頃はプラグイン等の設定で結構困った記憶があるので、Next.jsにしてよかったと思っています。

参考にさせていただいたサイト