【設定方法】Next.jsで作ったアプリケーションにGoogleタグマネージャー を設置するサンプル

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Next.jsで作ったアプリケーションに
Googleタグマネージャー を設置するやり方をメモします。
Typescriptにて記述しています。
環境
- React 16.3.2
- Next.js 5.1
- typescript 2.8.3
サンプルコード
ディレクトリ構成
markdown└── page
└── _document.tsx
読み込ませる場所の候補は色々とあると思うのですが
今回は page/_document.js
に記述しました。
page/_document.js
は全テンプレートの雛形のようなもので
ここで定義した内容が基本的には全ページに出力されます。
gtmID
を設定してそのまま使えるようになっています。
page/_document.tsximport * as React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
public render(): JSX.Element {
const gtmID = 'GTM-XXXXXX';
const gtmScript = `(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','${gtmID}');`;
const gtmFrame = `<iframe src="https://www.googletagmanager.com/ns.html?id=${gtmID}" height="0" width="0" style="display:none;visibility:hidden;"></iframe>`;
return (
<html lang="ja">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<script
dangerouslySetInnerHTML={{__html: gtmScript}}
/>
</Head>
<body>
<noscript
dangerouslySetInnerHTML={{ __html: gtmFrame}}
/>
<Main />
<NextScript />
</body>
</html>
);
}
}
参考 Github
https://github.com/zeit/next.js/
記事Article
もっと見る- article
2025年JavaScriptで使える時間操作ライブラリを比較!日付処理の最適解とは?
- article
NestJSでバリデーションエラーをログ出力する設定を紹介
- article
NestJSで作成したAPIのレスポンスヘッダーに付与されるx-powered-by: Express を消す方法を紹介
- article
Next.jsで環境変数に別の変数を利用し柔軟に管理するdotenv-expandの活用法を紹介
- article
【2025年3月版】Cursor ProとAPI利用比較。 Claude・GPT-4o・o1・GPT-4.5の損益分岐点と選び方
- article
フォーム入力情報からZodを利用してDTO作成しへ変換処理を実施するやり方を紹介