gastby に google tag manager のタグを設定する

gatsby で 構築したサイトに、google tag manager の タグを設定したくなり、gatsby-plugin-google-tagmanager | GatsbyJS を使ってみました。 インストール、設定した結果を記載します。

前提

環境情報

以下、使用した gatsby、node.js 関連の version 情報になります。

• node.js

  % node -v
  v8.4.0
  

• npm

  % npm -V
  npm@5.3.0 /usr/local/lib/node_modules/npm
  

• gatsby

  % gatsby -V
  1.1.7
  

使用している starter について

Vagr9K/gatsby-material-starter: A blog starter with Material design in mind for GatsbyJS. を使用しています。
先日、Github Page を gatsby で構築する | Monotalk で記事にしましたので、こちらよろしければご確認ください。

インストール、設定

インストール

gatsby-plugin-google-tagmanager | GatsbyJSの記載内容そのままなのですが、以下でインストールは可能です。

npm install --save gatsby-plugin-google-tagmanager
----------------------------------------------------
+ gatsby-plugin-google-tagmanager@1.0.7
added 1 package in 17.097s
----------------------------------------------------

設定

• plugin 記述の追加
  gatsby-config.js に plugin 記述を追加します。
  

      {
        resolve: `gatsby-plugin-google-tagmanager`,
          options: {
          id: config.siteGTMID,
        },
      },
  

  gatsby-material-starter は、設定が、SiteConfig.js に外だしされていますので、GTM の ID も外だしの想定で config.siteGTMID としました。

• SiteConfig.js に ID を追加
  SiteConfig.js に GTMID を追加します。
  

  module.exports = {
    ....
    siteGTMID: "xxxxxxxxxx",
    ...
  }
  

不要な GA の設定を削除する

gatsby-material-starter には、最初から GA の plugin が組み込まれています。
GTM 経由で GA はの pageview 計測を行うためこの設定を削除します。

• SiteConfig.js に トラッキング ID を削除
  以下を削除します。
  

    siteGATrackingID: "xxxxxxxxxxxxxx", // Tracking code ID for google analytics.
  

• plugin 記述の削除
  gatsby-config.js の plugin 記述を削除します。
  

      {
        resolve: "gatsby-plugin-google-analytics",
        options: {
          trackingId: config.siteGATrackingID
        }
      },
  

• gatsby-plugin-google-analytics のアンインストール
  

  npm uninstall gatsby-plugin-google-analytics
  ------------------------------------------------
  removed 1 package in 12.984s
  ------------------------------------------------
  

後は、gastby build して build 後のファイルを Upload すると GTM タグが出力されます。
GTM 自体の設定を忘れると pageview が記録されないのでご注意ください。
GTM 経由で、GA の pageview を測定する手順が以下が参考になるかと思います。
Googleタグマネージャの設置とGoogleアナリティクスでイベント計測 - Qiita

以上です。