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>

我想在点击 A标记时跟踪分析。我正在使用id跟踪它。我希望能够跟踪点击了哪个产品，并将产品名称作为eventLabel传递给google analytics。我怎么能实现这个目标？

Answer 1

对不起，我明显错过了关于主题的AMP。

遵循：

1）包含分析：

this.route.paramMap.subscribe(paramMap => paramMap.get('id'));

2）添加模板:(到正文）

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

3）将此JSON用于事件跟踪：

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

所以已完成的代码应如下所示:(这只是一个示例，将您的值添加到其中）

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

AMP列表元素分析

1 个答案: