In the digital world, whether you’re writing stories for your loyal readers, creating creative content that your fans love, helping the digital community, or providing items and services for your customer, understanding your audience is at the heart of it all. Key to unlocking that information is access to tools for measuring your audience and understanding their behavior. In addition to making your page load faster, Accelerated Mobile Pages (AMP) provides multiple analytics options without compromising on performance. You can choose to use a solution like amp-pixel that behaves like a simple tracking pixel. It uses a single URL that allows variable substitutions, so it’s very customizable. See the amp-pixel documentation for more detail.
The amp-analytics component, on the other hand, is a powerful solution that recognizes many types of event triggers to help you collect specific metrics. Since amp-analytics is supported by multiple analytics providers, this means you can use amp-analytics to configure multiple endpoints and data sets. AMP then manages all of the instrumentation to come up with the data specified and shares it with these analytics solution providers.
To use amp-analytics, include the component library in your document's <head>:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> |
And then include the component as follows (for these examples, make sure to specify your own account number instead of the placeholder):
<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> |
<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> |
Referensi: Magnesium012mg - How to set up Analytics on your AMP page.