2020-03-10

やたら詳しいgatsby-plugin-google-analytics

gatsby.jsにてgoogle analyticsを導入するプラグインを可能な限り詳しく紹介する。

目標

日本語での解説ページが少ないのでオプションなど細かい部分まで説明したい。

公式ドキュメント(英語)を参考に記事を作っていく。

gatsby-plugin-google-analyticsとは

gatsby.jsのサイトにGoogle Analyticsを簡単に導入するためのプラグインである。

インストール

npm install --save gatsby-plugin-google-analytics
gatsby-config.jsにプラグインを登録する。次は公式からのコード引用

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // The property ID; the tracking code won't be generated without it
        trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
        // Defines where to place the tracking script - `true` in the head and `false` in the body
        head: false,
        // Setting this parameter is optional
        anonymize: true,
        // Setting this parameter is also optional
        respectDNT: true,
        // Avoids sending pageview hits from custom paths
        exclude: ["/preview/**", "/do-not-track/me/too/"],
        // Delays sending pageview hits on route update (in milliseconds)
        pageTransitionDelay: 0,
        // Enables Google Optimize using your container Id
        optimizeId: "YOUR_GOOGLE_OPTIMIZE_TRACKING_ID",
        // Enables Google Optimize Experiment ID
        experimentId: "YOUR_GOOGLE_EXPERIMENT_ID",
        // Set Variation ID. 0 for original 1,2,3....
        variationId: "YOUR_GOOGLE_OPTIMIZE_VARIATION_ID",
        // Any additional optional fields
        sampleRate: 5,
        siteSpeedSampleRate: 10,
        cookieDomain: "example.com",
      },
    },
  ],
}

とりあえず動けばOKなら

とりあえず早く終わらせたいユーザ向けに解説する。

まずはnpm installしてgatsby-config.jsへの登録を済ませたらもう設置できている。

公式によると一点だけ注意があり、plugins配列の一番先頭に記述してロードしたほうが良いらしい。

プラグイン登録のオプションは最低でも次の１，２を設定しておけばよい。できれば３，４も入れておきたい。それ以降は特殊なオプションだと考えればOKだ。

オプションの解説

上記サンプルに記述されているオプションを一つづつ見ていく。

trackingId

トラッキングID。Google Analyticsにログインして左下の「管理」から各サイトの「プロパティ設定」を開くと現れる。

最重要だ。これを設定しなければ動作しないだろう。
head

Google Analystics用のスクリプトをheadに設定するかしないかを設定する。

デフォルトではfalseになっているが、trueにしておかないとgatsby.js内では動作しないというwebサイトをいくつか見つけた。
anonymize

ドイツ等一部の国では_anonymizeIPというものを使用しなければならないらしい。解説が難解であり該当地域ではないためこのオプションに関しては解説の必要はないとする。リンク先URLは日本語なので読んでみるのも良いだろう。

Otherwise you are not allowed to use it.

しかしこの一文が気になる。該当地域でなければ使う事が許可されていないかのような記述にも見えるが、単純に「そうでなければ使用できません」といった感じか。

trueにしておけば問題なさそうにみえる(trueで必要ならON、不要ならOFFに自動でなりそうな記述)
respectDNT

このオプションをtrueにすればGoogle Analyticsは“Do Not Track”(トラッキングしないで)がONになっているユーザーをロードしない。よりプライバシーに配慮したサイトにするならばtrueにするほうが良い。

公式ドキュメントにはDo Not Trackの詳細が書かれていないがChromeの場合はこちらに記述がある。

他のブラウザでもそれぞれ設定があるようだ。

できれば訪問者に配慮してtrueにしておきたい。
exclude

特定のパスからのアクセス解析を排除するオプション。サンプルを見る限り内部リンクのみが対象だろうか。

exclude: ["/preview/**", "/do-not-track/me/too/"]と記述するように例がある。

殆どのユーザは設定する必要がないだろう。
pageTransitionDelay

gatsby-plugin-transition-linkのようなプラグインを使っている場合、新しいページがマウントされるまで待つ。

アニメーションのような効果で画面遷移するアレ、そのまま映像制作で「トランジション」と呼ばれるアレが設定されている場合はこのオプションでディレイをつける必要がある模様。

設定に数字が記入されているが、これが秒なのかミリセカンドなのか等の記述はない。設定する場合は手探りする必要がありそうだ。

殆どのユーザは設定する必要がなく0でよいだろう。
optimizeId

Google OptimizeをA/Bテストで利用する場合このオプションを付ける。

これは少し専門的な知識が必要な項目だ。

Google Optimizeは無料でA/Bテストの環境を提供している。ABテストとは、いくつかのパターンを用意してどれが優れているかを試すことだ。

私自身これを利用したことがないためこれ以上は説明できない。頭の片隅に入れておいていずれ試したい項目だ。

Google Optimizeを利用しないなら設定は必要ない。
experimentId

上記Google Optimizeに関するオプションでSERVER_SIDE エクスペリメントを実行する場合にエクスペリメントIDを入力する項目だ。

Google Optimizeを利用しないなら必要ない。
variationId

上記エクスペリメントIDの他にもバリエーションIDが必要となる。オリジナルでは0がセットされている。

これもGoogle Optimizeを利用しないなら必要ない。
これ以降（コード内：Any additional optional fieldsと書いてある箇所）

Google Analyticsのドキュメントにある項目の設定が可能。尚、全て日本語で解説が用意されているためその他のオプションはリンク先を見てほしい。

一応設定項目一覧を公式から引用しておく。
- name: string, tracker name
- clientId: string
- sampleRate: number
- siteSpeedSampleRate: number
- alwaysSendReferrer: boolean
- allowAnchor: boolean
- cookieName: string
- cookieDomain: string, defaults to'auto'if not given
- cookieExpires: number
- storeGac: boolean
- legacyCookieDomain: string
- legacyHistoryImport: boolean
- allowLinker: boolean

注意すること

gatsby developモードで稼働中、このプラグインは無効となる。

公式ではgatsby buildの後gatsby serveでテストするようにとのこと。

サイト外へのリンクを解析する

公式ではアウトバウンドリンクと呼ばれている。自分のサイトから「外部のサイトに出ていく」リンクである。

<a>タグ等の代わりにOutBoundLinkをタグとして使ってクリックをトラッキングする仕組み。

次が使用例。

import React from "react"
import { OutboundLink } from "gatsby-plugin-google-analytics"

export default () => (
  <div>
    <OutboundLink href="https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/">
      Visit the Google Analytics plugin page!
    </OutboundLink>
  </div>
)

公式からコードを引用

カスタムイベントをトラッキングする

申し訳ないが日本語サイトはおろか英語フォーラムでも詳しい使用例が殆ど見つけられなかった。

コードから察するにJSのイベント（ここではボタン）をトラッキングするという機能だろう。

trackCustomEventをインポートして利用できる。

import React
import { trackCustomEvent } from 'gatsby-plugin-google-analytics'

export default () => {
  <div>
    <button
      onClick={e => {
        // To stop the page reloading
        e.preventDefault()
        // Lets track that custom click
        trackCustomEvent({
          // string - required - The object that was interacted with (e.g.video)
          category: "Special Button",
          // string - required - Type of interaction (e.g. 'play')
          action: "Click",
          // string - optional - Useful for categorizing events (e.g. 'Spring Campaign')
          label: "Gatsby Plugin Example Campaign",
          // number - optional - Numeric value associated with the event. (e.g. A product ID)
          value: 43
        })
        //... Other logic here
      }}
    >
      Tap that!
    </button>
  </div>
}

公式からコードを引用

特定のイベントをpreventDefaultで停止させて割り込む仕組みのようだ。category, actionは必須項目。そのほかにもある。

category: string - required

action: string - required

label: string

value: integer

nonInteraction: bool

transport: string

hitCallback: function