The tracking of AMP (Accelerated Mobile Pages) is different and somtimes also limited compared to normal website tracking. This article describes an easy and convenient way to track clicks on AMP pages using data-var attributes to pass dynamic tracking information with the click.

Personally I recommend using GTM (Google Tag Manager) to setup the AMP tracking, as you can configure and update your tags within the GTM web-interface. If you are interested, you can also have a look at my other article on AMP tracking, which describes a way to use a GA client id across your main website and possible AMP cache servers in oder to have a full picture of your users' behavior.

If you want to track clicks on AMP pages with GTM, you have the possibilty to directly define click triggers for elements with a certain CSS identifier (class or id). Nevertheless, if you want to track several different click items on your AMP page, it might be uncomfortable to setup a click trigger and an according tag for each of the elements you want to track the clicks for. To save time and to have a simple tracking setup, there is a better solution: using data-var attributes and according variables in GTM.

Example: You want to track clicks on several kinds of links on your AMP page as Google Analytics Events

Optimal Solution:

  • On each of the links that you want to track, specify a class name, so you can attach the GTM trigger
  • Add the following data attributes on the link HTML elements:
    • data-var-ec for the event category
    • data-var-ea for the event action
    • data-var-el for the event label

Code Example:

<a href="/buy-now/" class="trackedLink" data-var-ec="Navigation" data-var-ea="Top Navigation" data-var-el="Buy Now">

  • Setup according AMP variables in your GTM container (you only need to specify the part after data-var (i.e. "ec"). If you have further dashes, the variable name will automatically be converted in camel case (i.e. data-var-event-category will become eventCategory)
  • Finally setup your GA event tracking tag in the container and fill in the AMP variables for event category, action and label