AMP: Building Accelerated Mobile Pages

Tracking the addition of items to the cart

To track when products are added to the cart, we just need to target the add-to-cart button. If we pass through the product ID as well, this would allow us to identify the most-added items in our analytics. First, let's set up a click trigger on the add-to-cart button, which has the CSS class btn-add-to-cart:

"triggers": {  "addToCart": {    "on": "click",    "selector": ".btn-add-to-cart",    "request": "event",    "vars": {      "eventCategory": "Cart",      "eventAction": "Product added"    }  }}

Next, we'll add a data-vars attribute to the add-to-cart button. Recall from Chapter 8, Programming in AMP - amp-bind, that, when we implemented the cart, we used an amp-mustache template variable, {{product_id}}, to populate the ...