とあるクリエイターのエンジニアブログT-CREATOR

技術記事小技メモブログ書籍レビュー

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

Next.jsReactTypeScriptJavaScript
【設定方法】Next.jsで作ったアプリケーションにGoogleタグマネージャー を設置するサンプル
Memo
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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/

終わりに

最後までご覧いただきありがとうございます。
この記事では【設定方法】Next.jsで作ったアプリケーションにGoogleタグマネージャー を設置するサンプルについて紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。