AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • websites

amp-analytics

Playground で開く

Introduction

The amp-analytics element can be used to measure activity on an AMP document. Currently, amp-analytics supports different kinds of events:

  • Pageview
  • Anchor Clicks
  • Timer
  • Scrolling
  • AMP Carousel changes
  • Form

This sample demonstrates which events can be measured and how they can be configured. For a complete overview of all available options and parameters, have a look at the official documentation.

Setup

Import the amp-analytics component in the header.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

We need amp-iframe to embed an analytics dashboard.

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

 

<amp-iframe class="fixed-dashboard"
  width="200"
  height="240"
  layout="fixed"
  sandbox="allow-scripts"
  frameborder="0"
  src="https://amp.dev/documentation/examples/components/amp-analytics/embed?test=1&user=&account=ampdev">
  <amp-img src="/static/samples/img/pixel-white.png"
    layout="fixed-height"
    height="350"
    width="auto"
    placeholder>
  </amp-img>
</amp-iframe>

Pageview

This is a simple amp-analytics configuration to fire a single request when the page becomes visible. Note how we declare a variable eventId in the request and define the concrete value in the vars block.

Important: amp-analytics should be configured in the document body.

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "trackPageview": {
            "on": "visible",
            "request": "event",
            "vars": {
              "eventId": "pageview"
            }
          }
        }
      }
    </script>
</amp-analytics>

UI elements appearance tracking

This is a more sophisticated view tracking. This sample fires an analytics request when a specific element becomes visible. The element is specified via id and must be an AMP element (amp-img, amp-iframe, amp-ad,...).

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "trackPageview": {
            "on": "visible",
            "request": "event",
            "visibilitySpec": {
              "selector": "#cat-image-id",
              "visiblePercentageMin": 20,
              "totalTimeMin": 500,
              "continuousTimeMin": 200
            },
            "vars": {
              "eventId": "catview"
            }
          }
        }
      }
    </script>
</amp-analytics>

This image will trigger an analytics request, if at least 20% of it are visible for 500ms with a minimum time of 200ms continuous visibility.

<amp-img id="cat-image-id"
  src="/static/samples/img/cat-looking-up-300x200.jpg"
  width="300"
  height="200"
  attribution="visualhunt"
  alt="a cat"
  layout="responsive"></amp-img>

This sample fires an analytics request when the image becomes visible as a result of an action.

<button on="tap:an-image.toggleVisibility">Toggle image</button>
<amp-img hidden
  id="an-image"
  src="/static/samples/img/amp.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP">
</amp-img>

The elementShown event is issued when the image becomes visible

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "elementShown": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "defaultPageview": {
            "on": "visible",
            "request": "elementShown",
            "selector": "#an-image",
            "vars": {
              "eventId": "imageShownAfterButtonClick"
            }
          }
        }
      }
    </script>
</amp-analytics>

Anchor click

User interactions can be tracked as well. This configuration will track clicks on any anchor links in the page.

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "trackAnchorClicks": {
            "on": "click",
            "selector": "a",
            "request": "event",
            "vars": {
              "eventId": "clickOnAnyAnchor"
            }
          }
        }
      }
    </script>
</amp-analytics>

Try it by clicking one of the links.

<ul>
  <li><a>a link</a></li>
  <li><a>another link</a></li>
</ul>

It is also possible to fire click events only for specific links. Select specific elements to tracking by specifying a selector id. This sample only tracks clicks on anchors with the id anchor-id.

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "trackAnchorClicks": {
            "on": "click",
            "selector": "#anchor-id",
            "request": "event",
            "vars": {
              "eventId": "clickOnSpecialAnchor"
            }
          }
        }
      }
    </script>
</amp-analytics>

Only one of these links will trigger the clickOnSpecialAnchor event.

<ul>
  <li><a id="anchor-id">a special link</a>.</li>
  <li><a id="another-anchor-id">a not so special link</a>.</li>
</ul>

Scroll event

Use scroll events to fire a request under certain conditions when the page is scrolled.

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "scrollPings": {
            "on": "scroll",
            "scrollSpec": {
              "verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
            },
            "request": "event",
            "vars": {
              "eventId": "scroll"
            }
          }
        }
      }
    </script>
</amp-analytics>

Timer

Timer events fire in the specified interval.

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "pageTimer": {
            "on": "timer",
            "timerSpec": {
              "interval": 10,
              "maxTimerLength": 600
            },
            "request": "event",
            "vars": {
              "eventId": "timer"
            }
          }
        }
      }
    </script>
</amp-analytics>

It is possible to track amp-carousel events with amp-analytics (this works only for type="slides"). Here is a sample carousel:

Slide 1
Slide 2
Slide 3
 
<amp-carousel width="400"
  height="300"
  layout="responsive"
  type="slides">
  <div class="slide"
    data-slide-id="slide1">Slide 1</div>
  <div class="slide"
    data-slide-id="slide2">Slide 2</div>
  <div class="slide">Slide 3</div>
</amp-carousel>

You can use the fromSlide and toSlide variables for tracking which slides are viewed. The value is either taken from the data-slide-id attribute of the slide when present, else it represents the index of the slide (starting from 0).

The amp-carousel-change event is issued when there is any change in the slide that is currently visible:

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "ampCarouselChange": {
            "on": "amp-carousel-change",
            "request": "event",
            "vars": {
              "eventId": "carousel-change-${toSlide}"
            }
          }
        }
      }
    </script>
</amp-analytics>

The amp-carousel-next event is issued when there is a traversal to the next slide:

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "ampCarouselNext": {
            "on": "amp-carousel-next",
            "request": "event",
            "vars": {
              "eventId": "carousel-next-${toSlide}"
            }
          }
        }
      }
    </script>
</amp-analytics>

The amp-carousel-prev event is issued when there is a traversal to the previous slide:

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "ampCarouselPrev": {
            "on": "amp-carousel-prev",
            "request": "event",
            "vars": {
              "eventId": "carousel-prev-${fromSlide}"
            }
          }
        }
      }
    </script>
</amp-analytics>

Form

You can track events triggered by amp-form. Find a list of supported event here.

Try to insert any name as a name input in the form to see the amp-form-submit-success event.

Try to insert the word "error" as a name input in the form to see the amp-form-submit-error event. 

<amp-analytics>
  <script type="application/json">
      {
        "requests": {
          "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
        },
        "triggers": {
          "formSubmit": {
            "on": "amp-form-submit",
            "request": "event",
            "selector": "#testForm",
            "vars": {
              "eventId": "form-submit"
            }
          },
          "formSubmitSuccess": {
            "on": "amp-form-submit-success",
            "request": "event",
            "selector": "#testForm",
            "vars": {
              "eventId": "form-submit-success"
            }
          },
          "formSubmitError": {
            "on": "amp-form-submit-error",
            "request": "event",
            "selector": "#testForm",
            "vars": {
              "eventId": "form-submit-error"
            }
          }
        }
      }
    </script>
</amp-analytics>
<p>
  Try to insert any name as a name input in the form to see the
  <code>amp-form-submit-success</code> event.
</p>
<p>
  Try to insert the word "error" as a name input in the form to see the
  <code>amp-form-submit-error</code> event.
</p>
<form id="testForm"
  method="post"
  action-xhr="/documentation/examples/api/submit-form-input-text-xhr"
  target="_top">
  <input type="text"
    name="name"
    placeholder="Name..."
    required>
  <input type="submit"
    value="Subscribe">
</form>
さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする
説明されていない機能ですか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する