Using Google Analytics 4, you can you can set up ecommerce events to collect information about the shopping behavior of your users. The events enable you to quantify your most popular products and see the influence of promotions and product placement on revenue.

View item

If a product is visible, push the product to Google Tag Manager.

type ProductVisibleEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
}

function mapTweakwiseToGoogle(item: IApiProduct){
  return  {
    item_id: item.itemno,
    item_name: item.title,
    item_brand: item.brand,
    item_list_id: "search", // for recommendations, use specific name
    item_list_name: "search",
    item_variant: item.attributes.find(o => o.name == 'color').values[0],
    price: item.price,
    position: 0 // todo: determine position based on current page & index of product
  };
}

window["twn-starter-config"].on = {
  // ...
  'twn.product.visible': function (event: ProductVisibleEvent) {
  	const item = event.data;
    dataLayer.push({
      event: 'view_item_list',
      ecommerce: {
        item_list_id: "search",
        item_list_name: "search",
        items: [
          mapTweakwiseToGoogle(item);
        ]
      }
    });
  }
});

Click item

If a product tile has been clicked/hit, push to GTM that a product was clicked.

type ProductClickEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
}

function mapTweakwiseToGoogle(item: IApiProduct){
  return  {
    item_id: item.itemno,
    item_name: item.title,
    item_brand: item.brand,
    item_list_id: "search",  // for recommendations, use specific name
    item_list_name: "search",
    item_variant: item.attributes.find(o => o.name == 'color').values[0],
    price: item.price,
    position: 0 // todo: determine position based on current page & index of product
  };
}

window["twn-starter-config"].on = {
  // ...
  'twn.product.click': function (event: ProductClickEvent) {
  	const item = event.data;
    
    dataLayer.push({
      event: 'select_item',
      ecommerce: {
        item_list_id: "search",
        item_list_name: "search",
        items: [
          mapTweakwiseToGoogle(item);
        ]
      }
    });
    
  }
});