AMP ページにアナリティクス コードを設定する方法
2016年10月7日金曜日
この記事は、Google アナリティクス ソリューション 英文ブログ記事 「How to set up Analytics on your AMP page」を元に構成しております。
デジタルの世界では、定期購読者向けに記事を書く場合でも、利用者の好む広告コンテンツを作成する場合でも、デジタル コミュニティの運営をサポートする場合でも、顧客に商品やサービスを販売する場合でも、その対象となるユーザー像を把握することが極めて重要です。そして、ユーザー像を把握するには、ユーザー情報を収集してユーザー行動を分析するためのツールの利用が不可欠です。AMP(Accelerated Mobile Pages)は、ページの読み込みを速くする機能に加え、ページのパフォーマンスを損なわない複数の分析機能も備えています。
リクエスト可能なデータセットの詳しい説明や、amp-analytics をサポートしている分析プロバイダの一覧については、amp-analytics ドキュメントをご覧ください。また、他の実装例については、Amp By Example サイトをご覧ください。
AMP ページでユーザー エクスペリエンスの A/B テストなどを実施する場合は、amp-experiment 要素を利用できます。この要素の中で行われた設定は、amp-analytics と amp-pixel からも見えるため、テストの統計分析が容易になります。
AMP 分析に関しては、サイトでのユーザー エクスペリエンスを強化した際のインサイトを取得できるよう、現在もさまざまな開発が行われています。現在の取り組みの概要については、AMP Project Roadmap をご覧ください。ご希望の機能が見当たらない場合は、GitHub でリクエストしてください。
投稿者: Arudea Mahartianto - Google AMP 担当スペシャリスト
デジタルの世界では、定期購読者向けに記事を書く場合でも、利用者の好む広告コンテンツを作成する場合でも、デジタル コミュニティの運営をサポートする場合でも、顧客に商品やサービスを販売する場合でも、その対象となるユーザー像を把握することが極めて重要です。そして、ユーザー像を把握するには、ユーザー情報を収集してユーザー行動を分析するためのツールの利用が不可欠です。AMP(Accelerated Mobile Pages)は、ページの読み込みを速くする機能に加え、ページのパフォーマンスを損なわない複数の分析機能も備えています。
たとえば、シンプルなトラッキング ピクセルのように機能する amp-pixel というソリューションがあります。この amp-pixel は変数の置換ができる単一の URL を使用しているため、とても柔軟にカスタマイズできます。詳しくは、amp-pixel に関するドキュメントをご覧ください。
一方、amp-analytics というコンポーネントは、多くの種類のイベント トリガーを認識して特定のデータの収集をサポートするパワフルなソリューションです。amp-analytics は複数の分析プロバイダによってサポートされているため、これを使えば複数のエンドポイントとデータセットを設定できます。そうすれば、AMP であらゆる測定ソリューションを管理して指定したデータを検出し、複数の分析ソリューション プロバイダとデータを共有できます。
amp-analytics を使うには、対象ドキュメントの <head> 内に、次のコンポーネント ライブラリを含めます。
そして、このコンポーネントを次のように含めます(この例のプレースホルダの部分は、ご自身のアカウント番号に置き換えてください)。
JSON 形式は複数の異なるイベントを記述するうえで柔軟性が極めて高く、ミスにつながる恐れのある JavaScript コードが一切ありません。
上記の例を拡張し、次のように別のトリガー「clickOnHeader」を追加することもできます。
一方、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 ページでユーザー エクスペリエンスの A/B テストなどを実施する場合は、amp-experiment 要素を利用できます。この要素の中で行われた設定は、amp-analytics と amp-pixel からも見えるため、テストの統計分析が容易になります。
AMP 分析に関しては、サイトでのユーザー エクスペリエンスを強化した際のインサイトを取得できるよう、現在もさまざまな開発が行われています。現在の取り組みの概要については、AMP Project Roadmap をご覧ください。ご希望の機能が見当たらない場合は、GitHub でリクエストしてください。
投稿者: Arudea Mahartianto - Google AMP 担当スペシャリスト