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

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

Next.jsで作ったアプリケーションに
Googleタグマネージャー を設置するやり方をメモします。
Typescriptにて記述しています。

環境

  • React 16.3.2
  • Next.js 5.1
  • typescript 2.8.3

サンプルコード

ディレクトリ構成

└── page
    └── _document.tsx

読み込ませる場所の候補は色々とあると思うのですが
今回は page/_document.jsに記述しました。

page/_document.jsは全テンプレートの雛形のようなもので
ここで定義した内容が基本的には全ページに出力されます。

gtmIDを設定してそのまま使えるようになっています。

page/_document.tsx
import * 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/