【Next.js】Googleタグマネージャを設置する。

2022/4/9

2023/5/15

いつも「Googleアナリティクスのタグ設置」や「特定リンクのクリック計測」などを、Googleタグマネージャを使っています。

なのでNext.jsでもGoogleタグマネージャを使いたい。そこで今回はタグマネージャの設置方法をメモを調べてまとめておきます。

▼ Next.js 13の場合

【Next.js 13】Googleタグマネージャを設定する方法。 – CRAFT TIME

【方法1】「react-gtm-module」を使う
- パッケージをインストールする
- _app.jsを編集する
【方法2】「_document.js」に直接コードを追加する
- pages下に「_document.js」を作成する
- 「コンテナID」を書き換える
まとめ

【方法1】「react-gtm-module」を使う

パッケージをインストールする

$ npm install react-gtm-module --save

_app.jsを編集する

import '../styles/globals.css'
import React, {useEffect} from "react";
import {SessionProvider} from 'next-auth/react';
import TagManager from 'react-gtm-module';

function MyApp({ Component, pageProps } }) {
    // Google Tag Manager設定
    useEffect(() => {
        TagManager.initialize({ gtmId: [YOUR_GOOGLE_TAG_MANAGER_ID] });
    }, []);

    return <Component {...pageProps}/>
};

export default MyApp;

【方法2】「_document.js」に直接コードを追加する

pages下に「_document.js」を作成する

まずpagesディレクトリ内に_document.jsを作成して、下記のコードを記載します。

import Document, {Html, Head, Main, NextScript} from 'next/document';
import React from "react";

export default class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    {/* 1: Google Tag Manager ---------------------------- */}
                    <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_ID]');`,
                    }}/>
                    {/* -------------------------------------------------- */}
                </Head>
                <body>
                    {/* 2: Google Tag Manager ---------------------------- */}
                    <noscript dangerouslySetInnerHTML={{
                        __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=[GTM_ID]" height="0" width="0" style="display:none;visibility:hidden" />`,
                    }}/>
                    {/* -------------------------------------------------- */}
                    <Main/>
                    <NextScript/>
                </body>
            </Html>
        );
    }
};