amp-analyticsの基本からクリックイベント・スクロール量の計測を行うサンプルコードまで – AMP HTML入門

記事更新日 2017年4月12日

記事公開日 2016年11月25日

去年2015年10月のAMP発表当時はGoogle Analyticsでのトラッキングのためにamp-pixelを使う必要がありましたが、amp-analyticsコンポーネントの導入によって簡単にトラッキングコードを作成することができるようになりました。2016年10月にはGoogle Tag ManagerでもAMPがサポートされるようになり、ますますAMPの環境が整ってきたという印象です。ということでここではGoogle Analyticsの基本からamp-analyticsの説明、ページビューのトラッキング、クリックイベントのトラッキング、スクロール量の計測を行うためのコードを紹介します。

まずはGoogle Analyticsの基本の基本を押さえる

Google AnalyticsではMeasurement Protocolを使用してユーザーインタラクションデータを送信します。エンドポイント




https://www.google-analytics.com/collect

にGETリクエストかPOSTリクエストを送ることによってGoogleのサーバにデータが蓄積されていきます。このときのプロトコルはHTTPSでなければいけません。例えばページビューがあったということをGoogle Analyticsに伝えるためには、上記のエンドポイントに




https://www.google-analytics.com/collect?t=pageview&amp;...

のようにパラメータを追加してリクエストを送信します。t=pageviewの部分でヒットの種類をpageviewに指定しています。ヒットの種類はpageview以外にもscreenview（スクリーンビュー）、 event（イベント）、 transaction（トランザクション）、 item（商品）、social（ソーシャル）、exception（例外）、timing（タイミング）があります。パラメータは他にもたくさんあって、AnalyticsのプロパティIDもそのうちの一つです。Google Tag Managerでタグやらトリガーやらを設定したりしますが、それはこのリクエストパラメータを指定していることに他なりません。最低限このことだけは知っておきましょう。

その他のパラメータについて詳しく知りたい場合はGoogle DevelopersのMeasurement Protocol のパラメータリファレンスを参照してください。

amp-analyticsの基本

amp-analyticsコンポーネントを使用するためにはhead要素内でamp-analyticsスクリプトを読み込みます;




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

その上で、body要素内にamp-analytics要素を入れます;




<body>
    ...
    <amp-analytics type="googleanalytics" id="amp_analytics">
    <script type="application/json">
      ...
    </script>
    </amp-analytics>
    ...

ここではamp-analytics要素のtype属性に”googleanalytics”を指定していますが、他のベンダーを利用する場合にはしかるべき値を指定します。Adobe Analyticsの場合なら”adobeanalytics”です。サポートしているベンダーの一覧はAMP Projectのamp-analyticsページを参照してください。この記事ではGoogle Analyticsに限定します。

script要素内での…にはJSON形式でどのようなトラッキングを行うのかを書きます。JSONの基本的な形は以下のようになります;




{
    "vars": {
        var-name: var-value,
        ...
    },
    "requests": {
        request-name: request-value,
        ...
    },
    "triggers": {
        trigger-name: trigger-object,
        ...
    },
    "transport": {
        "beacon": *boolean*,
        "xhrpost": *boolean*,
        "image": *boolean*
    }
}

script要素内に直接JSONを書くこともできますが、amp-analyticsコンポーネントのconfig属性にURLを渡すことで、JSONを外部から読み込むことも可能です。Google Tag ManagerでAMPページのトラッキングを設定すると




<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-TLPGVLC&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

のようなコードをbodyタグの先頭に貼り付けることになりますが、これがまさにその場合です。

varsプロパティ

では各プロパティについて詳しく見ていきます。まずはvarsプロパティです。amp-analyticsではリクエストのための変数を定義することができます。amp-analyticsのtype属性で”googleanalytics”を指定している場合はデフォルトで




'vars': {
    'eventValue': '0',
    'documentLocation': 'SOURCE_URL',
    'clientId': 'CLIENT_ID(AMP_ECID_GOOGLE)',
    'dataSource': 'AMP',
},

が定義されています。これらに加えて変数を定義したい場合は<script type="application/json">...</script>の中に追加していきます。最低限定義しないといけないのはaccountです。accountプロパティにはAnalyticsのプロパティIDを指定します;




"vars": {
    "account": "UA-XXXX-Y"
}

こうしてvarsプロパティ内で定義した変数は、以下で説明するrequestsプロパティ内のrequest-valueで${var-name}の形で使用することができます。accountもデフォルトで定義されているbasePrefixのreqeust-value内で使用されています。

requestsプロパティ

requestsプロパティは通常のトラッキングでは特に指定することはないと思います。amp-analyticsのtype属性で”googleanalytics”を指定している場合はデフォルトで




'requests': {
  'host': 'https://www.google-analytics.com',
  'basePrefix': 'v=1&amp;' +
        '_v=a1&amp;' +
        'ds=${dataSource}&amp;' +
        'aip=true&amp;' +
        '_s=${requestCount}&amp;' +
        'dt=${title}&amp;' +
        'sr=${screenWidth}x${screenHeight}&amp;' +
        '_utmht=${timestamp}&amp;' +
        'cid=${clientId}&amp;' +
        'tid=${account}&amp;' +
        'dl=${documentLocation}&amp;' +
        'dr=${documentReferrer}&amp;' +
        'sd=${screenColorDepth}&amp;' +
        'ul=${browserLanguage}&amp;' +
        'de=${documentCharset}',
  'baseSuffix': '&amp;a=${pageViewId}&amp;' +
        'z=${random}',
  'pageview': '${host}/r/collect?${basePrefix}&amp;' +
        't=pageview&amp;' +
        'jid=${random}&amp;' +
        '_r=1' +
        '${baseSuffix}',
  'event': '${host}/collect?${basePrefix}&amp;' +
        't=event&amp;' +
        'jid=&amp;' +
        'ec=${eventCategory}&amp;' +
        'ea=${eventAction}&amp;' +
        'el=${eventLabel}&amp;' +
        'ev=${eventValue}' +
        '${baseSuffix}',
  'social': '${host}/collect?${basePrefix}&amp;' +
        't=social&amp;' +
        'jid=&amp;' +
        'sa=${socialAction}&amp;' +
        'sn=${socialNetwork}&amp;' +
        'st=${socialTarget}' +
        '${baseSuffix}',
  'timing': '${host}/collect?${basePrefix}&amp;' +
        't=timing&amp;' +
        'jid=&amp;' +
        'plt=${pageLoadTime}&amp;' +
        'dns=${domainLookupTime}&amp;' +
        'tcp=${tcpConnectTime}&amp;' +
        'rrt=${redirectTime}&amp;' +
        'srt=${serverResponseTime}&amp;' +
        'pdt=${pageDownloadTime}&amp;' +
        'clt=${contentLoadTime}&amp;' +
        'dit=${domInteractiveTime}' +
        '${baseSuffix}',
},

が設定されているからです。ここで先ほど定義したaccountがbasePrefix内で使用されているのが分かります。書式としては




"requests": {
    request-name: request-value,
    ...
}

になっており、 request-nameにはtriggerプロパティで指定する際のリクエスト名を、request-valueにはhttpsのURLを指定します。request-valueは一番最初に説明したMeasurement Protocolのエンドポイント＋パラメータになります。例えばpageviewというリクエストの場合のrequest-valueは




'${host}/r/collect?${basePrefix}&amp;' + 't=pageview&amp;' + ...

です。この中で${host}にはhttps://www.google-analytics.comという文字列が展開され、${basePrefix}には'v=1&' + '_v=a1&' + 'ds=${dataSource}&' ...という文字列が展開され、その中の${dataSource}にはAMPという文字列が展開される（上記のvarsのデフォルトとして設定されている）ため、最終的にpageviewというリクエストは




https://www.google-analytics.com/collect?v=1&amp;_v=a1&amp;ds=AMP&amp;...&amp;t=pageview&amp;...

にリクエストを送信しますよ、という内容になっています。リクエスト名とリクエスト先のURLをkey-valueペアにしたものがrequestsプロパティです。

デフォルトの設定を見てわかる通り、amp-analyticsでのリクエストは今のところ

ページトラッキング用のリクエストpageview
イベントトラッキング用のリクエストevent
ソーシャルトラッキング用のリクエストsocial
タイミングトラッキング用のリクエストtiming

があらかじめ用意されています。あとはこれらに対してトリガーを設定してやるとトリガーイベント発生時にリクエストを送信することができます。

デフォルトに無いプロパティを設定したい場合は<script type="application/json">...</script>の中に追加していきます。通常のトラッキングであればpageview, event, social, timingで足りるのかなと思います。

triggersプロパティ

triggersプロパティでは いつリクエストを送信するのか を指定します。デフォルトでは




'triggers': {
  'performanceTiming': {
    'on': 'visible',
    'request': 'timing',
    'sampleSpec': {
      'sampleOn': '${clientId}',
      'threshold': 1,
    },
  },
}

が設定されています。書式としては




"triggers": {
  trigger-name: trigger-object,
  ...
}

になっており、トリガー名とその設定をkey-valueペアとして並べていきます。もっとも簡単なページビューでは




"triggers": {
    "trackPageview": {
        "on": "visible",
        "request": "pageview"
    }
}

となります。visibleイベントが発生する（ページが読み込まれる）とpageviewリクエストを送信する、つまり先ほど書いた




https://www.google-analytics.com/collect?v=1&amp;_v=a1&amp;ds=AMP&amp;...&amp;t=pageview&amp;...

に対してリクエストを飛ばすことになります。

trigger-objectで指定するkey-valueペアは以下の通りです;

key	value
on	必須。どのイベントに対して発火させるかを指定します。可能な値は`click`、`scroll`、`timer`、`visible`、`hidden`です。
request	必須。イベント発火時にどのリクエストを送信するかを`request-name`で指定します。reqeusts内で定義されている必要があります。
vars	トップレベルのvarsを上書きする場合、もしくはトリガー固有の変数を指定する場合にkey-valueペアで指定します。
selector	`"on":"click"`で必須。CSSセレクターを指定することで、特定の要素がクリックされたときのみリクエストを送信することができます。複数のセレクターは”,”で繋げることができます。
scrollSpec	`"on": "scroll"`で必須。`scroll`トリガーの条件を指定することができます。詳しくはスクロール量の計測で説明します。
timerSpec	`"on": "timer"`で必須。`timer`トリガーの条件を指定することができます。
sampleSpec	リクエストを送信する前にサンプルを選別することができます。例えばすべてのサンプルのうち半数だけカウントする、といったことをする場合に指定します。

transportプロパティ

書式は




"transport": {
    "beacon": *boolean*,
    "xhrpost": *boolean*,
    "image": *boolean*
}

です。beaconはnavigator.sendBeaconで空ボディのPOSTリクエストをクレデンシャル付きで送る場合、xhrpostはXMLHttpRequestで空ボディのPOSTリクエストをクレデンシャル付きで送る場合、imageはImageタグを生成してGETリクエストを送信する場合にtrueにします。trueが2つ以上指定された場合はbeacon > xhrpost > imageの順で適用されます。デフォルトではすべてtrueとなっています。

Google Analyticsの場合ではこのプロパティはデフォルトでは未指定なので、beaconでリクエストが送られます。

amp-analyticsでtype=googleconversionを指定すると、transportプロパティは




"transport": {
  "beacon": false,
  "xhrpost": false,
  "image": true
}

となります。つまりAdwardsのコンバージョン測定をAMPで行う場合にはbeaconやxhrpostではなく、imageでリクエストが送信されることになります。

ページビューのトラッキング

長々と説明してきましたが、ようやく実践的なトラッキングコードを見ていきます。まずはページビューです。




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

今まで説明してきた中で出てきたように、varsのaccountは必須です。ここでGoogle AnalyticsのプロパティIDを指定します。triggersではtrackPageviewという名前のトリガーを設定しています。この名前は自由につけれます。トリガーの種類はvisibleでrequestはpageviewです。これでページビューがあったときにGoogle Analyticsにデータが送信されます。

Analyticsで見たときに「タイトル」として表示されるのは、デフォルトではtitle要素で指定した文字列ですが、これをvarsを使って変更することができます。例えば




{
    "vars": {
        "account": "UA-50210815-10"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview",
            "vars": {
                "title": "My page",
                "ampdocUrl": "https://example.com/amp.html"
            }
        }
    }
}

のようにすると、Google Analyticsで見たときに「My Page」がタイトルとして表示されるようになります。

クリックイベントのトラッキング

ついでクリックイベントのトラッキングです。




<amp-analytics type=googleanalytics id=google_analytics>
<script type=application/json>
{
    "vars": {
        "account": "UA-50210815-10"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        },
        "elementClicks": {
            "on": "click",
            "selector": ".tracking-click",
            "request": "event",
            "vars": {
                "eventCategory": "elementClick",
                "eventAction": "${clickId}-click",
                "eventLabel": "${title}",
                "eventValue": "${totalEngagedTime}"
            }
        }
    }
}
</script>
</amp-analytics>

ここではelementClicksという名前のトリガーを追加しました。トリガーとなるイベントには"on": "click"でクリックイベントを指定します。selectorの値を.tracking-clickにしているので、tracking-clickというクラスをもった要素すべてがクリックイベントのトラッキング対象となります。イベントトラッキングなのでrequestはeventです。

あらかじめ定義されているeventリクエストの内容を見ると




{
    'event': '${host}/collect?${basePrefix}&amp;' +
          't=event&amp;' +
          'jid=&amp;' +
          'ec=${eventCategory}&amp;' +
          'ea=${eventAction}&amp;' +
          'el=${eventLabel}&amp;' +
          'ev=${eventValue}' +
          '${baseSuffix}',
}

となっている通り、eventCategory、eventAction、eventLabel、eventValue変数を設定する必要があります。それぞれ

値	説明
eventCategory	文字列で必須。通常は”Video”や”ui-components”のようにインタラクション対象のオブジェクト名にしますが、ここでは`elementClick`にしています。
eventAction	文字列で必須。”play”や”header-click”のようなインタラクションの種類。ここでは`${clickId}-click`としています。`clickId`については後ほど説明します。
eventLabel	文字列。”Fall Campaign”のように、イベントの分類のために指定します。ここでは`${title}`にして要素がクリックされたページのタイトルを入れています。
eventValue	文字列。イベントに関連づけられた数値でデフォルト値は0です。ここでは`${totalEngagedTime}`にしています。これも後ほど説明します。

のように設定します。

ここで出てきた${title}や${totalEngagedTime}ですが、これらはAMPであらかじめ定義されている変数で、amp-pixel、amp-list、amp-analyticsで${variable-name}として使用することができます。${title}にはその名の通り、ページのタイトルが代入されます。${totalEngagedTime}は、ファーストビューが表示されてからユーザーがエンゲージするまでの時間が秒を単位とした数字として代入されます。AMPではこの他にも多数の変数が定義されていて、amp-analyticsで${var-name}として使用することができます。変数の一覧はAMP HTML URL Variable Substitutionsにあるので目を通しておくと色々できて便利です。

またeventActionで指定した${clickId}-clickですが、これはamp-analytics特有の変数代入を使っています。visibleイベントとclickイベントに関しては、HTML内のdata属性から変数を渡してやることができるというものです。例えば上記の${clickId}という変数の場合、




<a href="..." class="tracking-click" data-vars-click-id="hoge">トラッキングリンク</a>

のようにdata-vars-*という形でdata属性値を指定しておくことで、amp-analytics側でhogeという値を${clickId}で拾うことができます。amp-analytics側ではキャメルケース（ハイフンをなくしてハイフンの次の文字を大文字にする）に従うことに注意してください。この要素がクリックされると、Google AnalyticsのイベントでeventActionが”hoge-click”として集計されることになります。要素毎に異なるdata-vars-click-id属性を指定しておくことで、ページ内のtracking-clickクラスをもった要素の中でどれがクリックされたのかをeventActionの値から知ることができるようになります。ただしdata-vars-*で指定する値はURLエンコードされて送信されるため、日本語だと読めなくなって不便なので注意が必要です。

ページ内のスクロール量の計測

最後にページ内のスクロール量の計測です。ランディングページなどではユーザーがどこまでスクロールしてどの辺りで離脱しているのかを知ることができるので有用だと思います。




<amp-analytics type=googleanalytics id=google_analytics>
<script type=application/json>
{
    "vars": {
        "account": "UA-50210815-10"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        },
        "elementClicks": {
            "on": "click",
            "selector": ".tracking-click",
            "request": "event",
            "vars": {
                "eventCategory": "elementClick",
                "eventAction": "${clickId}-click",
                "eventLabel": "${title}",
                "eventValue": "${totalEngagedTime}"
            }
        },
        "scrollPings": {
            "on": "scroll",
            "scrollSpec": {
                "verticalBoundaries": [0,10,20,30,40,50,60,70,80,90,100]
            },
            "request": "event",
            "vars": {
                "eventCategory": "Scroll Depth",
                "eventAction": "scroll",
                "eventLabel": "${verticalScrollBoundary}%",
                "eventValue": "${verticalScrollBoundary}"
            }
        }
    }
}
</script>
</amp-analytics>

scrollPingsという名前でトリガーを定義しています。今回はスクロールされたらリクエストを送信したいので、"on": "scroll"を指定します。scrollSpecはtriggersプロパティの説明で少し触れましたが、リクエストを送る際に条件を指定するためのもので"on": "scroll"では必須プロパティです。scrollSpecではverticalBoundariesとhorizontalBoundariesを指定することができます。2つのうち最低1つは指定しておかないとスクロールイベントが発火しません。値は配列で、イベントが発火する境界をカンマ区切りの数値で指定します。




"scrollSpec": {
    "verticalBoundaries": [0,10,20,30,40,50,60,70,80,90,100]
}

の場合だと、ページが縦に0%, 10%, …, 100%スクロールされた段階でリクエストが送信されます。配列内の数字は0から100までを指定できますが、パフォーンス低下を防ぐために5の倍数で丸められます。

requestではeventを指定してイベントタイプのリクエストを送信します。varsではクリックイベントのトラッキングと同様、eventCategory等を設定します。eventLabelとeventValueで使われているverticalScrollBoundary変数ですが、これもAMPであらかじめ定義されている変数です。これでeventLabelに”10%”や”20%”といったスクロール量のラベルをつけることができます。

最後に

amp-analyticsの自体はJSONで指定するプロパティの意味が分かってしまえば大したことありません。Google Tag ManagerでAMPページの設定をする場合でも、あれこれ設定した結果吐き出されるのはここで説明したJSONです。そのJSONファイルをamp-analyticsのconfig属性で指定することになります。ということでGoogle Tag ManagerでAMPページのトラッキング設定をするための予備知識としても、amp-analyticsに慣れ親しんでおくといいと思います。

『amp-analyticsの基本からクリックイベント・スクロール量の計測を行うサンプルコードまで – AMP HTML入門』のトップへ戻る

amp-analyticsの基本からクリックイベント・スクロール量の計測を行うサンプルコードまで – AMP HTML入門

まずはGoogle Analyticsの基本の基本を押さえる

amp-analyticsの基本

varsプロパティ

requestsプロパティ

triggersプロパティ

transportプロパティ

ページビューのトラッキング

クリックイベントのトラッキング

ページ内のスクロール量の計測

最後に

参考ページ

まずはGoogle Analyticsの基本の基本を押さえる

amp-analyticsの基本

varsプロパティ

requestsプロパティ

triggersプロパティ

transportプロパティ

ページビューのトラッキング

クリックイベントのトラッキング

ページ内のスクロール量の計測

最後に

参考ページ

関連記事

AMP HTMLページの検証にAMPBenchを使ってみた

Facebookの投稿Feedを取得してAMP HTMLのamp-facebookで表示させる手順のまとめ

AMP Projectが広告表示を高速化させたAMP4ADSの準備を進めている件

AMP (Accelerated Mobile Pages) プロジェクト入門：新しいフレームワークとしてのAMP HTMLを用いてWebサイトを制作する