جدول المحتويات

amp-analytics
- Introduction Setup Pageview UI elements appearance tracking Anchor click Scroll event Timer AMP Carousel Tracking Form

websites

amp-analytics

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 alt="...">
  </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.

a link
another link

<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.

a special link.
a not so special link.

<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>

AMP Carousel Tracking

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 مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub

Written by @sebastianbenz