addToCart

✨ Introduction

The addToCart is designed to trace when a product is being added to the cart. This event helps you gauge the level of interest in a specific product and identify popular items among your customer base. Furthermore, it helps identify potential barriers to conversion, such as high shipping costs or complicated checkout processes. By leveraging the addToCart event effectively, you can drive sales, improve customer satisfaction, and ultimately achieve greater success in the competitive online marketplace.

⭐ JS Snippet of addToCart

Below is the JavaScript snippet for the addToCart event. You should trigger it when a product is being added to the cart.

In the provided snippet, there are six parameters (pid, ppr, popr, pqt, cu, pname) required to be set dynamically when the event is triggered. The value of those parameters is used to indicate the product that's being added to the cart. Notice that their format and value should be consistent with the corresponding fields specified in your datafeed. Check the following table for more details.

<script type="text/javascript">
  awpx('param', {
    pid: `{id of the product}`,
    ppr: `{sales price of the product}`,
    popr: `{original price of the product}`,
    pqt: `{quantity}`,
    cu: `{currency code}`,
    pname: `{name of the product}`
  });

  awpx('event', 'addToCart');
</script>

<script type="text/javascript">
  awpx('param', {
    pid: '7893-EOP',
    ppr: '4000',
    popr: '4200',
    pqt: 2,
    cu: 'JPY',
    pname: 'Fancy Sneakers'
  });

  awpx('event', 'addToCart');
</script>

Parameter	Definition	Type	Corresponding Datafeed Field
pid	id of the product	string	Product ID
ppr	sales price of the product	string	Sales Price
popr	original price of the product	string	Original Price
pqt	quantity	integer
cu	currency code	string	(see below for explanation)
pname	name of the product	string	Product Name

📘

What about 'cu' (currency code?)

The value of 'cu' should match the suffix currency code that is specified in the price-related fields of your datafeed, and comply with ISO 4217. You may predefine it in the snippet, since most of the time, there's only one currency code in use per datafeed.

🌟 Triggering Condition

The addToCart event should be triggered when a product is being added to the cart.

Beware that awoo Pixel's initialization should be executed before addToCart is triggered. Hence, you may need to add a "defer" attribute to those two scripts to have them executed in the order they appear in the webpage's HTML. To fulfill the triggering condition, you may utilize an "addEventListener" or "inline event handler" to execute the script. Check the following code block for sample implementation:

<script type="text/javascript" defer>
  // script of awoo Pixel's initialization
</script>

<script type="text/javascript" defer>
  function sendAddToCart(entry) {

    var quantity = document.querySelector('select[id="qty"]').value;

    awpx('param', {
      pid: '7893-EOP',
      ppr: '4000',
      popr: '4200',
      pqt: quantity,
      cu: 'JPY',
      pname: 'Fancy Sneakers'
    });

    awpx('event', 'addToCart');
  }

  var addToCartButton = document.querySelector('button[id="add_to_cart"]');

  addToCartButton.addEventListener('click', sendAddToCart);
</script>

In this particular implementation, an eventListener is bound to the addToCart button (identified as a button with the id name "add_to_cart") in order to send the event when users click it. Product information (pid, ppr, popr, cu, pname) is predefined based on the product shown on the webpage. The quantity is dynamically extracted from a select component (identified with the id name "qty") to be set as the value of pqt. You should modify the implementation based on your environment and the actual class name.

❗️

There should be only one awoo Pixel's initialization

Multiple awoo Pixel's initialization on a single webpage will cause error, so make sure you only have it loaded once per page.

🌠 Implement with GTM

For your better comprehension, below are the sample screenshots from GTM (Google Tag Manager) for the implementation of addToCart event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Custom Event - Event Name "add_to_cart".

In this particular case, the addToCart event is triggered in keeping with the occurrence of the custom event "add_to_cart," because it's being pushed to the dataLayer when a product is being added to the cart. As for dynamically setting the parameters, additional JavaScript code is implemented to leverage the product information that is specified in the eventModel.

You should modify the actual implementation based on your website and the underlying dataLayer. In certain situations, you might utilize "querySelector" to dynamically extract product information from the webpage if the dataLayer isn't well-structured. Beware that awoo Pixel's initialization should be loaded before any triggered event.

a sample implementation of addToCart as a custom HTML on GTM

a sample triggering condition for addToCart event on GTM