AMP ページへのアナリティクスの設定方法
2016年10月6日木曜日
この記事は Arudea Mahartianto、Google AMP スペシャリストによる Google Developers Blog の記事 "Google Developers Blog: How to set up Analytics on your AMP pages" を元に翻訳・加筆したものです。元の記事は Google アナリティクス ブログに投稿されました。詳しくは元記事をご覧ください。
デジタルの世界では、忠実な読者向けの話を書いている方、ファンが愛するクリエイティブなコンテンツを作成している方、デジタル コミュニティを手伝っている方、お客様にアイテムやサービスを提供している方など、どのような方にとっても、対象者を理解することがすべての中心になります。そのために鍵となるのは、対象者を計測してその行動を理解するためのツールにアクセスできるかどうかです。Accelerated Mobile Pages（AMP）は、ページを高速に読み込めるようにすることに加え、パフォーマンス面で妥協する必要のない複数のアナリティクス オプションを提供しています。
AMP では、単純なトラッキング ピクセルとして動作する amp-pixel のようなソリューションを選択できます。amp-pixel はさまざまな変数置換を利用できる単一の URL なので、とても柔軟にカスタマイズできます。詳細については、amp-pixel のドキュメントをご覧ください。
一方、amp-analytics コンポーネントは、さまざまなイベント トリガーを認識し、特定の指標についての情報を収集できる強力なソリューションです。amp-analytics は複数のアナリティクス プロバイダがサポートしているため、amp-analytics を使って複数のエンドポイントやデータセットを設定することができます。AMP は、すべての計測データを管理して指定されたデータを作成し、アナリティクス ソリューション プロバイダと共有します。
amp-analytics を使用するには、ドキュメントの
そして、次のようにコンポーネントを含めます（この例では、プレースホルダの位置にアカウント番号を指定してください）。
JSON フォーマットは非常に柔軟なので、誤りが起こる可能性がある JavaScript コードを含めずに、いくつかの種類のイベントを記述することができます。
この例を拡張すると、別のトリガー
リクエストできるデータセットの詳しい説明や、amp-analytics をサポートしているアナリティクス プロバイダの完全なリストについては、amp-analytics のドキュメントをご確認ください。Amp By Example サイトでは、実装例をさらにご覧いただくことができます。
AMP ページで A/B テストなどのユーザー エクスペリエンスの実験を行いたい場合は、amp-experiment 要素を利用できます。この要素で行った設定は、amp-analytics や amp-pixel にも反映されるため、実験の統計分析を簡単に行うことができます。
AMP アナリティクスでは、サイトのユーザー エクスペリエンスを AMP 化して増幅させる際に活用できる分析機能がさまざまに開発されています。チームが予定している作業の概要は、AMP プロジェクト ロードマップをご覧ください。何か足りない機能があると思った方は、GitHub でリクエストしてください。
Posted by Yoshifumi Yamaguchi - Developer Relations Team
デジタルの世界では、忠実な読者向けの話を書いている方、ファンが愛するクリエイティブなコンテンツを作成している方、デジタル コミュニティを手伝っている方、お客様にアイテムやサービスを提供している方など、どのような方にとっても、対象者を理解することがすべての中心になります。そのために鍵となるのは、対象者を計測してその行動を理解するためのツールにアクセスできるかどうかです。Accelerated Mobile Pages（AMP）は、ページを高速に読み込めるようにすることに加え、パフォーマンス面で妥協する必要のない複数のアナリティクス オプションを提供しています。
AMP では、単純なトラッキング ピクセルとして動作する amp-pixel のようなソリューションを選択できます。amp-pixel はさまざまな変数置換を利用できる単一の URL なので、とても柔軟にカスタマイズできます。詳細については、amp-pixel のドキュメントをご覧ください。
一方、amp-analytics コンポーネントは、さまざまなイベント トリガーを認識し、特定の指標についての情報を収集できる強力なソリューションです。amp-analytics は複数のアナリティクス プロバイダがサポートしているため、amp-analytics を使って複数のエンドポイントやデータセットを設定することができます。AMP は、すべての計測データを管理して指定されたデータを作成し、アナリティクス ソリューション プロバイダと共有します。
amp-analytics を使用するには、ドキュメントの
<head> にコンポーネント ライブラリを含めます。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
そして、次のようにコンポーネントを含めます（この例では、プレースホルダの位置にアカウント番号を指定してください）。
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"defaultPageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Name of the Article"
}
}
}
}
</script>
</amp-analytics>
JSON フォーマットは非常に柔軟なので、誤りが起こる可能性がある JavaScript コードを含めずに、いくつかの種類のイベントを記述することができます。
この例を拡張すると、別のトリガー
clickOnHeader も追加できます。 <amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"defaultPageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Name of the Article"
}
},
"clickOnHeader": {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "examples",
"eventAction": "clicked-header"
}
}
}
}
</script>
</amp-analytics>
リクエストできるデータセットの詳しい説明や、amp-analytics をサポートしているアナリティクス プロバイダの完全なリストについては、amp-analytics のドキュメントをご確認ください。Amp By Example サイトでは、実装例をさらにご覧いただくことができます。
AMP ページで A/B テストなどのユーザー エクスペリエンスの実験を行いたい場合は、amp-experiment 要素を利用できます。この要素で行った設定は、amp-analytics や amp-pixel にも反映されるため、実験の統計分析を簡単に行うことができます。
AMP アナリティクスでは、サイトのユーザー エクスペリエンスを AMP 化して増幅させる際に活用できる分析機能がさまざまに開発されています。チームが予定している作業の概要は、AMP プロジェクト ロードマップをご覧ください。何か足りない機能があると思った方は、GitHub でリクエストしてください。
Posted by Yoshifumi Yamaguchi - Developer Relations Team