AMP Analyticsでイベント情報を取得する方法

AMP Analytics設定

まずはAMP Analyticsの基本設定をしていきます。

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars" : {
        "gtag_id": "UA-XXXXXXXX-XX",
        "config" : {
        "UA-XXXXXXXX-XX": { "groups": "default" }
        }
      }
    }
  </script>
</amp-analytics>

これは公式のガイドにあるままです。

イベントトラッキングの設定を追加する

続いて、今回の目的であるクリックイベントを取得するためのイベントトラッキングデータの設定を追加します。

先ほどの設定で書いたjsonのvarsの次に連想配列として「triggers」を追加します。

"triggers": {
  "button": {
    "selector": ".tracking-click",
    "on": "click",
    "vars": {
      "category": "ui-components",
      "event_name": "click-${action}",
      "event_label": "${title}"
    }
  }
}

上のサンプルにあるキー・buttonの連想配列の「button」という文字列は、規定のものではなくただのキー名で、設定者が任意で決められます。また、ループで複数の設定を追加出来ます。

中身のデータは下記のようになっています。

varsの中身については、Google Analyticsのイベントデータに準拠します。バリューの中の、

${title}

などの変数については、イベントトラッキングしている要素（サンプルの場合は「.tracking-click」）に「data-vars-xxxx」属性を自分で設定して値を入れておくと、xxxxの部分が変数として使えます。なお、HTMLのdata-vars属性でハイフンを使うと、json内ではキャメルケースになります。（hoge-fugaクラスだったらhogeFuga）

<a href="hogehoge.com" class="tracking-click" data-vars-action="external" data-vars-title="タイトル">タイトル</a>

ここまでできたら、最初のトラッキングIDを入れただけの設定に、「triggers」のデータを合体させると下記のようになります。

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars" : {
        "gtag_id": "UA-XXXXXXXX-XX",
        "config" : {
        "UA-XXXXXXXX-XX": { "groups": "default" }
      },
      "triggers": {
        "button": {
          "selector": ".tracking-click",
          "on": "click",
          "vars": {
            "category": "ui-components",
            "event_name": "click-${action}",
            "event_label": "${title}"
          }
        }
      }
    }
  </script>
</amp-analytics>

AMPページでの注意点

amp-frameなどでは取得できない

amp-frameなど、一部のAMP要素ではクリックイベントが発生しないため、クリックイベントが取得できないことがあります。

その場合は、amp-frameをdivで囲うなどして対処します。

設定漏れ、設定忘れに注意

AMPページは検索エンジンなどがキャッシュして配信するケースもあるので、設定をミスしたり、選定漏れがあってもキャッシュには残ってしまいます。

AMPは原則的にはページの更新があったらキャッシュをクリアする仕組みですが、設定値を決める際などは慎重に決めましょう。

記述方法はバージョンによって異なる

AMP Analyticsの記述方法は、今回のようにgtagを使う方法もあれば、googleanalyticsというタイプを使うケースもあります。

<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
    "vars": {
        "account": "UA-XXXXX-Y"  // Replace with your property ID.
    },
    "triggers": {
        "trackClickOnHeader" : {
            "on": "click",
            "selector": "#header",
            "request": "event",
            "vars": {
                "eventCategory": "ui-components",
                "eventAction": "header-click"
            }
        }
    }
}
</script>
</amp-analytics>

基本的な考え方は一緒ですが、記述方法が微妙に違うため気をつけましょう。少しでミスがあるとトラッキングが効かなくなって、デバッガーもないのでハマります。

AMP Analyticsでクリックイベントを取得する方法を見てきました。

同じ方法でmatomoなどのGoogle Analytics以外の解析ツールでも使えるかもしれませんね。