【設定方法】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
【解決策】Next.js での CORS エラーの原因と対処方法まとめ
- article
Next.js で環境変数を安全に管理するベストプラクティス
- article
shadcn/ui × Next.js:モダンな UI を爆速構築する方法
- article
Next.js の Image コンポーネント徹底攻略:最適化・レスポンシブ・外部 CDN 対応
- article
NextJS で始める Web アプリケーションの多言語・国際化対応の方法
- article
【徹底解説】Next.js での SSG・SSR・ISR の違いと使い分け
- article
Pinia × TypeScript:型安全なストア設計入門
- article
TypeScript で実現するクリーンアーキテクチャ:層分離と依存性逆転の実践
- article
TypeScript × GitHub Copilot:型情報を活かした高精度コーディング
- article
TypeScript による型安全なエラーハンドリング:Result 型と Neverthrow の活用
- article
TypeScript と RxJS を組み合わせたリアクティブプログラミング完全ガイド
- article
Remix × TypeScript:型安全なフルスタック開発
- article
React 開発を加速する GitHub Copilot 活用レシピ 20 選
- article
Prisma の公式ドキュメントを使い倒すためのコツ
- article
GitHub Actions × Node.js:テストとデプロイを自動化する
- article
Pinia × TypeScript:型安全なストア設計入門
- article
Obsidian デイリーノート活用術:毎日の思考ログを資産に変える方法
- article
Git で特定のコミットを打ち消す!git revert の正しい使い方
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来