AMP ページにアナリティクス コードを設定する方法 | Google Analytics 日本版 公式ブログ

Google Analytics 日本版 公式ブログ - 2016年10月7日(金) 15:59
このページは、外部サイト Google Analytics 日本版 公式ブログ の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は 「AMP ページにアナリティクス コードを設定する方法」 からご覧ください。
この記事は、Google アナリティクス ソリューション 英文ブログ記事 「How to set up Analytics on your AMP page」を元に構成しております。

デジタルの世界では、定期購読者向けに記事を書く場合でも、利用者の好む広告コンテンツを作成する場合でも、デジタル コミュニティの運営をサポートする場合でも、顧客に商品やサービスを販売する場合でも、その対象となるユーザー像を把握することが極めて重要です。そして、ユーザー像を把握するには、ユーザー情報を収集してユーザー行動を分析するためのツールの利用が不可欠です。AMP(Accelerated Mobile Pages)は、ページの読み込みを速くする機能に加え、ページのパフォーマンスを損なわない複数の分析機能も備えています。

たとえば、シンプルなトラッキング ピクセルのように機能する amp-pixel というソリューションがあります。この amp-pixel は変数の置換ができる単一の URL を使用しているため、とても柔軟にカスタマイズできます。詳しくは、amp-pixel に関するドキュメントをご覧ください。

一方、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 Project Roadmap をご覧ください。ご希望の機能が見当たらない場合は、GitHub でリクエストしてください。

投稿者: Arudea Mahartianto - Google AMP 担当スペシャリスト
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

今日の用語

ワイヤーサービス
プレスリリースを、メディアに配信し、さらにサービス事業者のWebサイトや提携メデ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]