AMP x Google AnalyticsでのユーザーSync

Tips
AMP
Google Analytics

(旧ブログから移行しました。)

このブログも例によって GA を入れているのですが、最近 AMP もはじめました。
AMP をはじめたくらいから GA の結果がちょっとおかしな感じになりました。新規ユーザーが異常に多い...
ちょっと嬉しくなりつつもそう甘くはないと自戒し、AMP 導入で GA の計測結果がおかしくなった的なブログをいくつか目にしました。
どうやら解消できそうなので、対応して新規ユーザーの少なさを再確認しようと思います。

まず、おさらいしておくと、AMP の導入によって以下 3 つの方法で Page を閲覧することになります。

a. Original Page  今までと同じ閲覧方法 b. Original AMP Page  オリジナルドメイン下での AMP ページ閲覧 c. Cached AMP Page  検索結果から Cache された AMP ページ閲覧

2019/07 時点で 1,2 のユーザーは同一ユーザーとして扱われるのですが、 1,2 と 3 は別のユーザーとして扱われます。
つまり、AMP のメジャーな遷移である、 「検索」→「Cached AMP」→「Original Page」が 2 ユーザーとしてカウントされてしまうのです。

何時ぞやに Google がそれを解消できるようにしてくれたので、その方法を Share します。今回は例によって WordPress での実装方法です。

まず、Google Analytics の AMP ページへの導入です。
下記を Head に

<script
  async
  custom-element="amp-analytics"
  src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>

下記を body 直下に

<amp-analytics type="googleanalytics" id="hogehoge">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXXXXXX-Y"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

こんなかんじ。

UserSync するために、以下 2 つを header.php に追記します。

1. Meta タグ追記

これは AMP ページへの対応です。
AMP リクエスト識別関数is_amp_endpoint()を使って、AMP ページのみに Meta タグを挿入します。

<?php if(is_amp_endpoint()): ?>
    <meta name="amp-google-client-id-api" content="googleanalytics">
<?php endif; ?>

2. Google Analytics Script 修正

これは通常ページへの対応です。 GA の有効化 Script はもともとあるかと思いますが、これをユーザー Sync に対応させます。
これは AMP ページと非 AMP ページが同一ドメインに存在する場合の記述方法です。
create メソッドに{'useAmpClientId': true}と Option を追記します。

<script>
  window.ga =
    window.ga ||
    function () {
      (ga.q = ga.q || []).push(arguments);
    };
  ga.l = +new Date();
  ga("create", "UA-117915432-2", "auto", { useAmpClientId: true });
  ga("send", "pageview");
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

これだけ!
最後に動作確認を行います。確認手順はこんな感じです。

  • Web インスペクタ > Network Filter にcollect
  • cidがユーザー識別子にあたるので、それを確認

a. Original Page

Original Page
b. Original AMP Page
Original AMP
![Original AMP]() c. Cached AMP Page
Cached AMP

いいね!!!

Original ページの cid が消滅し、AMP ページと同一になるので、導入直後は Analytics 上のデータに変動があるかもしれません。
単純にユーザー数が減るわけですもんね。
また、現在 Cache のドメインがgoogle.comなのですが、google.co.jpで試してみたところ、cid に相違がありました。co.jp は対応がまだなようです。

しかしながら、これで正しいデータが取得できるようになりました!ぜひ試してみてください(^ ω ^)

Ryoma HOSHINO
I'm a little developer for people, education, society, world