AMP用にGoogleアナリティクスのセッションを統合したよ

はじめに

こんにちは。今日知人の結婚式があるですが、私用で欠席するので昨日着でバルーン付きの祝電を送らせてもらいました。
台風による気圧の変化でおかしくなっていないかだけ心配です

喜んでくれたらいいなと先輩風ふかせてみました、筆者です

さて、今回はGatsbyプロジェクトをAMP対応させたのですが、その際にGoogleアナリティクスの設定も行いました。

Googleのドキュメントには、セッション統合した方がいいと書いてあったのでそれを対応したので記事にします。
参考になれば幸いです

事の発端

これ↓

セッション統合とは

ふむふむ

AMPページはAMPキャッシュドメインから配信されるため、サイト本体とはドメインが異なります。AMPリンカーを使用すれば、AMPキャッシュとサイト内のページを行き来するユーザージャーニーをトラッキングすることができます。AMPリンカーはamp-analyticsの機能で、AMPクライアントIDをユーザー識別子としてユーザーセッションの統合を行うものです。

つまりGoogleのドメインであるAMPページ内にある自分のドメインの導線踏んだ時に、離脱した判定とかになるっぽい。

ドメインが違うのでその解釈は正しいものの、同じ自分のコンテンツと解釈するとその動きはよくないっすね

セッション統合のメリット

ふむふむ

AMPキャッシュとサイト本体のドメインとの間でAMPクライアントIDを同期することにより、各種ユーザー関連指標（例:セッション継続時間、直帰率、セッションあたりの閲覧ページ数）の精度を高めることができます。

セッションを同一ドメインと同様に認識してくれるイメージでしょうかね

AMP用にGoogleアナリティクスのセッション統合する

1. AMPページのタグ設定

先ほどドキュメントには、グローバルサイトタグかタグマネージャーでの設定の方法が記載されていますが、どちらも使ってないので**analytics.js(type="googleanalytics")**で設定する方法で行こうと思います。

こんな感じです↓

<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
            vars: {
                account: 'UA-XXXXXX-X'
            },
            linkers: {
                enabled: true
            }
        }
    </script>
</amp-analytics>

amp-analyticsのREADMEがとても参考になりました

2. 非AMPページのタグ設定

こちらすごく簡単です
以下プラグインを使用しているので、allowLinkerをtrueに指定するだけです

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-XXXXXX-X',
        allowLinker: true // 追加
      }
    }
  ]
}

3. 参照元除外の設定

アナリティクスの設定画面から参照元除外設定を行います。

参照元除外するドメインはcdn.ampproject.orgです。

4. 反映されている確認する

1. シークレットモードでブラウザ開く
2. DevtoolsからSPのエミュレータ起動
3. 自分のサイトのAMPページが出てくるまでググる
4. AMPページ表示
5. Devtoolsでwww.google-analytics.comに送信されるネットワークリクエスト内に含めれるcidパラメータを確認
6. AMPページ内の導線から自分のドメインのページへ遷移
7. 再度5を行い、cidが同一であればOK

以下で確認しました。

方法 2: Chrome Developer Tools で確認する

おわりに

これでアナリティクスのデータがきれいになるぞ
それでは！