Accelerated Mobile Pages(AMP)プラットフォームを使用すると、静的コンテンツを高速で表示するウェブページを作成できます。AMP には、ユーザー インタラクションの測定を可能にする <amp-analytics>
要素が含まれています。この要素には、Google アナリティクスをサポートする機能が組み込まれています。
ページビューを測定するための基本設定
AMP ページに Google アナリティクスの基本インストールを設定するには、次のコード スニペットをコピーし、<GA_MEASUREMENT_ID>
を Google タグ ID に置き換えます。Google タグ ID はこちらからご確認ください。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
複数の送信先へのデータ送信
1 つの <amp-analytics>
タグで複数の送信先にデータを送ることが可能です。この場合、config
コマンドに新しい測定 ID <GA_MEASUREMENT_ID_NEW>
を追加します。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" },
"<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
仕組み
<amp-analytics>
要素は AMP の拡張コンポーネントであり、スクリプトタグ内で custom-element
として明示的に有効化されています。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics>
要素ブロックでは、Google の測定サービスに対するサポートを有効化するため、<amp-analytics>
の type
属性が「gtag」に(gtag.js のサポートを有効にする)、data-credentials
属性が「include」に(Cookie を有効にする)設定されています。
<amp-analytics type="gtag" data-credentials="include">
...
</amp-analytics>
AMP では、JavaScript の使用が制限(専用のライブラリに限定)されているため、設定は JSON を使って行われます。有効な <GA_MEASUREMENT_ID>
を持つ gtag_id
プロパティが vars
ブロックに追加され、その下に <GA_MEASUREMENT_ID>: {}
を持つ config プロパティが値として追加されています。
イベントの測定
triggers
を指定して値を定義し、AMP ページのイベントを測定します。トリガーの設定では、次のようなプロパティが使用されます。
selector
: ターゲット要素を指定する CSS セレクタです。on
: イベントのタイプを指定します。vars
:event_name
でイベントのタイプを指定し、必要に応じて他のパラメータを追加します。
この例では、Google アナリティクスの基本的なイベントを設定する方法を示します。「button」というトリガーを作成し、ID 値「the-button」を持つ要素がクリックされると発動するようにします。このトリガーは、event_name
の値「login」と method
の値「Google」を Google アナリティクスに送信します。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#the-button", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
Google アナリティクス イベントは、Google アナリティクスで使用されるイベントのカテゴリで、主にキャンペーンのレポートを作成する際に使用されます。イベントの値は、vars ブロックで event_category
パラメータ、event_label
パラメータ、value
パラメータを使用して指定できます。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#login", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
トリガーの設定について詳しくは、amp-analytics
ドキュメントをご覧ください。
パラメータの変更
デフォルトの Google アナリティクス パラメータをオーバーライドするか、新しいパラメータを追加するには、config
ブロックの parameter
セクションに必要な値を追加します。この例では、デフォルトのページビューおよびイベントの値をオーバーライドして、page_title
と page_location
を設定しています。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "page_title": "Beethoven symphonies", "page_location": "https://www.example.com/beethoven.html" } } } } </script> </amp-analytics>
ドメインのリンク
ドメイン リンカーを利用すると、別々のドメイン上にある複数の関連サイトを 1 つにまとめて測定できます。リンクするドメインを指定するには、"linker": { "domains": [...] }
プロパティを使用します。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": { "domains": ["example.com", "example2.com"] } } } } } </script> </amp-analytics>
Google アナリティクスが設定されている AMP ページでは、AMP キャッシュから正規ドメインにリンクする機能がデフォルトで有効になっています。ドメイン トラフィックをリンクする Google アナリティクスの機能を無効にするには、config パラメータに "linker": "false"
を追加します。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": "false" } } } } </script> </amp-analytics>
サイトの速度(ユニバーサル アナリティクス)
Google アナリティクスは、サイトのトラフィックのごく一部のサイト速度データを自動的に収集するように構成されています。サンプルレートを変更して、収集するデータを増減できます。たとえば、レートを 100% に設定する場合、ハイライト表示された部分のコードを設定に追加します。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 100 } } } } </script> </amp-analytics>
サイトの速度データの収集を停止するには、ハイライト表示された部分のコードを追加します。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 0 } } } } </script> </amp-analytics>
AMP と非 AMP のトラフィック
デフォルトで、AMP トラフィックではウェブ トラフィックとは異なるクライアント ID が使用されます。AMP ページの読み込みは通常のウェブページと比べて高速で、トラフィック パターンも異なるため、AMP と非 AMP のトラフィックでは指標にも差が出ることが一般的です。
AMP のトラフィックの測定には別個のプロパティを使用したほうが、指標の分析精度が上がり、トラフィックをより正確に把握できます。同一プロパティ内で AMP と非 AMP のトラフィックを識別する必要がある場合、次の方法が考えられます。
- データソース ディメンションまたはカスタム ディメンションを使用します(ユニバーサル アナリティクスの場合)。
- カスタム イベント パラメータを使用します(Google アナリティクス 4 の場合)。
設定のデバッグ
AMP 検証ツールを使用すると、ウェブページが AMP HTML の仕様に適合しているかどうかを確認できます。検証ツールを有効にするには、ページの URL に #development=1
を追加します。
amp-analytics
拡張を使用すると、設定のデバッグやトラブルシューティングに役立つ警告やエラー メッセージが出力されます。ウェブブラウザのコンソールで記録されたエラー メッセージを表示するには、ページの URL に #log=1
を追加してください。
サンプルコードの全文
この例は、ページ上に 1 つのボタンがある完全な AMP ページを示しています。この設定では、標準のページビュー データと「button-click」イベントが Google アナリティクスに送信されます。
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="self.html" />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Make it so.</h1>
<div>
<button type="button" id="the-button">Engage!</button>
</div>
</body>
</html>
関連資料
- AMP: AMP プロジェクト
- AMP: AMP とは
- AMP: amp-analytics
- gtag.js: AMP で gtag.js を使用する
- ユニバーサル アナリティクス ヘルプセンター: Accelerated Mobile Pages(AMP)
- Google アナリティクス 4 ヘルプセンター: Accelerated Mobile Pages(AMP)