google amp analytics track mobile page

AMP (Accelerated Mobile Pages) is a new optimization for mobile web pages which is to release recently to increase the speed of web pages on your mobile phone. It’s a very new dimension for all the developers although the new learning curve for AMP HTML is limited as it is mainly based on existing web technologies. There is less CSS and less of everything basically but the output and browsing experience will be better than we developers used to have before. Now you know what Google AMP is let’s discuss about its two important elements which are included in AMP HTML.

The AMP-ANALYTICS element in detail

The <amp-analytics> is a new command which will be used to measure variety of activities on an AMP document and it will give details about the data that it is send to the server which is specified in a JSON (JavaScript Object Notation) configuration object.

Let us explain this in more simple words, below example amp html code for <amp-analytics> is configured to send a request to amphtmltemplates.com once loaded for the first time and each time the <a> tag is clicked.

<amp-analytics>
    <script type=”application/json”>
        { “requests”: { “pageview”: https//google.com/analytics?
        url=${canonicallUrl}&title=${title}&acct=${account}”,
        “event”: “https//amphtmltemplates.com/analytics?
        eid=${eventId}&elab=${eventLabel}&acct=$(account)”},
        “vars” : {“account” : “ABC123”},
        “triggers” : { “track pageview”:{“on”: “visible”,”request”: pageview},
        “track anchor clicks”: { “on”: “click”,
        “selector”: ”a”,
        “request”: “event”,
        “vars”: { “eventId”: “42”,
        eventLabel”: “clicked on a link”} } } }
    </script>
</amp-analytics>

 

What’s new in AMP HTML?

  • AMP attribute “Type
    <amp-analytics type=”Google”>……..</amp-analytics>
    It’s a new attribute which is introduced to be used in one of the built-in analytics providers.
    The thing we are using right now is “googleanalytics” which is used for adds support. But now with this new improvement it’ll be easy to put adds on your web page.
  • AMP “Config
    <amp-analytics config=https://google.com/analytics.config.json></amp-analytics>
    This little command is used to a load a configuration from a specified remote URL. But “https” should be used to apply this. I.e.
  • AMP “Request
    This command is used in “triggers” to get response from it and then to transmit data to another platform. It is used in “https URL” and these values might include placeholder tokens that can reference others requests.
“requests”: { “base”: https://amphtmltemplates.com/analytics?a=${account}&u=${canonicalUrl}&t=${title},
”pageview”: “${base}&type=pageview”,
“event”: “${base}&type=event&eventId=${eventId}”
  • AMP “vars
    vars”: {“account”: “2396-74120-8223”, “countryCode”: “nl” }
    It is used to define key value pairs or existing variables that can be referenced.
  • AMP triggers
    This little command shows its action when an analytics request is send.
  • “triggers”: {“default pageview”: {“on”: “visible”,”request”: :pageview”} ,
     “anchor clicks” : {“on”: “click”, “selector” : “a”, “request”: “event”, “vars” : {“eventId”: XXX} } }
    • on” (required) The event to listener for. Valid values are “visible” and “click”
    • selector” A CSS selector used to refine which elements should be tracked. Use value * to track all elements.
    • request”(required) Name of the request to send (as specified in the REQUEST section).
    • vars” An object containing key-value pairs used to override ”vars” defined in the top level config, or to specify vars unique to this trigger.
  • AMP “transport” –  it specifies how to send a request. This value is an object with fields that shows us which transport methods are acceptable.
  • AMP “Beacon” – Indicates navigator.sendBeacon which can be used to transmit the request. This will send a POST request, with credentials, and an empty body.
  • AMP “Xhrpost” – indicates XMLHttpRequest which also can be used to transmit the request and the outcome is same as “beacon”
  • AMP “Image” – indicates the request can be send by generating an image tag and it will send a GET request.

If more than one of the above transport methods are enabled, the precedence is beacon>xhrpost>image. If the client’s user agent does not support a method, the next highest precedence method enabled will be used. By default, all three methods above are enabled.

Published by AMP Coder

Support engineer and developer at AMPtemplates.com. From HTML Code to Template to Customer.

Leave a Reply

Your email address will not be published. Required fields are marked *