使用事例
Important: this component does not support your currently selected format email!
このガイドでは、ユーザー エンゲージメントをトラッキングするための一般的な使用事例をご紹介します。
使用事例の追加を希望される場合は、Google までお知らせください。ご自分の使用事例を公開することもできます。詳しくは、公開方法についての記事をご覧ください。
ページビューをトラッキングする
amp-pixel
と amp-analytics
を使用してページビューをトラッキングする方法について説明します。
amp-pixel を使用する
以下の例では、指定の URL にページビュー データを送信する際に amp-pixel
を使用しています。
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
amp-analytics を使用する(ベンダーなし)
以下の例では、指定の URL にページビュー データを送信する際に amp-analytics
を使用しています。
<amp-analytics> <script type="application/json"> { "requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
amp-analytics を使用する(googleanalytics)
以下の例では、Google アナリティクスにページビュー データを送信しています(Google アナリティクスのページ トラッキングもご覧ください)。
<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" // Replace with your property ID. }, "triggers": { "trackPageview": { // Trigger names can be any string. trackPageview is not a required name. "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
ページクリックをトラッキングする
ページクリックを amp-analytics
を使用してトラッキングし、イベントデータを指定の URL と Google アナリティクスに送信する方法について説明します。
指定の URL にデータを送信する
以下の例では、selector
属性を使用して指定の URL に click
イベントを送信します。イベントはユーザーがリンク(<a href>
)をクリックするたびに送信されます。
<amp-analytics> <script type="application/json"> { "requests": { "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackAnchorClicks": { "on": "click", "selector": "a", "request": "event", "vars": { "eventId": "42", "eventLabel": "clicked on a link" } } } } </script> </amp-analytics>
Google アナリティクスにデータを送信する
以下の例では、trigger
の selector
属性を使用して、特定の要素がクリックされたときに click
イベントを Google アナリティクスに送信します(Google アナリティクスの AMP イベント トラッキングもご覧ください)。
<amp-analytics type="googleanalytics" id="analytics3"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" // Replace with your property ID. }, "triggers": { "trackClickOnHeader" : { "on": "click", "selector": "#header", "request": "event", "vars": { "eventCategory": "ui-components", "eventAction": "header-click" } } } } </script> </amp-analytics>
スクロールをトラッキングする
ページ スクロールをトラッキングするには amp-analytics
を使用します。以下の例では、scrollspec
属性を使用して、ユーザーがページを垂直方向に 25%、50%、90% スクロールしたときに、指定の URL に scroll
イベントが送信されるようにしています。また、ページを水平方向に scroll
幅の 90% スクロールしたときにもイベントが発生します。
<amp-analytics> <script type="application/json"> { "requests": { "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "scrollPings": { "on": "scroll", "scrollSpec": { "verticalBoundaries": [25, 50, 90], "horizontalBoundaries": [90] } } } } </script> </amp-analytics>
ソーシャル インタラクションをトラッキングする
ソーシャル インタラクションをトラッキングするには、amp-analytics
を使用して、イベントデータを指定の URL と Google アナリティクスに送信します。
指定の URL にデータを送信する
以下の例では、selector
属性を使用して、指定の URL に click
イベントを送信します。イベントはユーザーがツイート(#tweet-link
)をクリックするたびに送信されます。
<amp-analytics> <script type="application/json"> { "requests": { "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackClickOnTwitterLink": { "on": "click", "selector": "#tweet-link", "request": "event", "vars": { "eventId": "43", "eventLabel": "clicked on a tweet link" } } } } </script> </amp-analytics>
Google アナリティクスにデータを送信する
以下の例では、trigger
の selector
属性を使用して、特定のソーシャル ボタンがクリックされたときにイベントを送信します(Google アナリティクスの AMP ソーシャル インタラクション トラッキングもご覧ください)。
<amp-analytics type="googleanalytics" id="analytics4"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" // Replace with your property ID. }, "triggers": { "trackClickOnTwitterLink" : { "on": "click", "selector": "#tweet-link", "request": "social", "vars": { "socialNetwork": "twitter", "socialAction": "tweet", "socialTarget": "https://www.examplepetstore.com" } } } } </script> </amp-analytics>