AMP list element analytics

Question

  <amp-list class="mx1 md-mxn1" [src]="'api/' + products.filter + '-' + products.category + '-products.json'" src="some.json" height="1000" width="300" layout="responsive">
    <template type="amp-mustache">
      <a href="{{ Url }}" target="_self" id="commerce-listing-product" class="commerce-listing-product text-decoration-none inline-block col-6 md-col-4 lg-col-3 px1 mb2 md-mb4 relative">
        <div class="flex flex-column justify-between">
          <div>
            <amp-img class="commerce-listing-product-image mb2" src="{{ imageUrl }}" width="340" height="340" layout="responsive" alt="{{ name }}" noloading=""></amp-img>
            <h2 class="commerce-listing-product-name h6">{{ productName }}</h2>
          </div>
          </div>
      </a>
    </template>
  </amp-list>

i want to track analytics on click of the A tag. I am tracking it using id. i want to be able to track which product is clicked on and pass the product name as eventLabel to google analytics. how can i achieve this?

Answer 1

Sorry i clearly missed the AMP on topic.

Follow this:

1) Include Analytics:

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

2) Add the template: (to body)

<amp-analytics type="googleanalytics" id="analytics1">
  ...
</amp-analytics>

3) Use this JSON to event-tracking:

{
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}

So completed code should look like this: (this is just an EXAMPLE add your values into it)

<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#commerce-listing-product",
      "request": "event",
      "vars": {
        "eventCategory": "List Element",
        "eventAction": "Click",
        "eventLabel": "{{URL}}",            <--- NOT REQUIRED
        "eventValue": "100millioninionions" <--- NOT REQUIRED

      }
    }
  }
}
</script>
</amp-analytics>