【Next.js】Googleタグマネージャを設置する。
2022/4/9
2023/5/15
いつも「Googleアナリティクスのタグ設置」や「特定リンクのクリック計測」などを、Googleタグマネージャを使っています。
なのでNext.jsでもGoogleタグマネージャを使いたい。そこで今回はタグマネージャの設置方法をメモを調べてまとめておきます。
▼ Next.js 13の場合
目次
【方法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>
);
}
};
「コンテナID」を書き換える
あとはコードの[GTM_ID]の部分(2ヶ所)を、タグマネージャの「コンテナID」に書き換えるだけで設置の作業は完了です。
まとめ
Googleタグマネージャを無事設置することができました。
最近の記事
音楽生成AI「Suno」の使い方まとめ!作詞作曲が簡単にできる?
簡単に曲が作れるAIということでよく聞く「Suno(Chirp)」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ|GPT・DALL·E・Whisperなど
Open AIのAPI(一部)の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI(Upload file)で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。(Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12