checkout

✨ Introduction

The checkout is designed to trace the beginning of the checkout process. This event serves as a beacon, illuminating the path users take as they progress through the final stages of a transaction. By leveraging the checkout event effectively, you can glean insights into purchase patterns, identify potential bottlenecks, and refine strategies to streamline the buying process.

⭐ JS Snippet of checkout

Below is the JavaScript snippet for the checkout event. You should trigger it when a checkout process begins.

The value of the array pds is used to describe the basket of products with which the user starts a checkout process. The information of each product (pid, ppr, popr, pqt, cu, pname) should be formatted into JSON, and jointly set as an object in the pds array. Notice that their format and value should be consistent with the corresponding fields specified in your datafeed. Furthermore, the value of the parameter pc specifies the total product count of the basket. Usually, the value of pc should be equal to the sum of the quantity (pqt) of each product. Check the following table for more details.

<script type="text/javascript">
  awpx('param', {
    pds: [
      { // information of the 1st product
        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}'
      },
      { // information of the 2nd product
        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}'
      },
      // add more products if needed
    ],
    pc: {total product count}
  });

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

<script type="text/javascript">
  awpx('param', {
    pds: [
      {
        pid: '7893-EOP',
        ppr: '4000',
        popr: '4200',
        pqt: '2',
        cu: 'JPY',
        pname: 'Fancy Sneakers'
      },
      {
        pid: '3246-Y2U',
        ppr: '1030',
        popr: '1250',
        pqt: '1',
        cu: 'JPY',
        pname: 'Blue Socks'
      },
      {
        pid: '0027-Y2Z',
        ppr: '2290',
        popr: '2500',
        pqt: '3',
        cu: 'JPY',
        pname: 'Nice Sweaters'
      }
    ],
    pc: 6
  });

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

Parameter	Definition	Schema/Type
pds	array of product information (in JSON format)	Key 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 string cu currency code string (see below for explanation) pname name of the product string Product Name
Key	Definition	Type
pid	id of the product	string
ppr	sales price of the product	string
popr	original price of the product	string
pqt	quantity	string
cu	currency code	string
pname	name of the product	string
pc	total product count	integer

📘

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 checkout event should be triggered when a checkout process begins.

Beware that awoo Pixel's initialization should be executed before checkout 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 the "querySelector" to extract product information from the webpage, and implement an "addEventListener" to send the event. 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 sendCheckout(entry) {

    var products = [];
    var productCount = 0;

    var cartRows = document.querySelectorAll('.cartRow');

    cartRows.forEach(function(item){
      var productId = item.querySelector('.item_id').textContent;
      var salesPrice = item.querySelector('.item_discount').textContent.replace(/[^0-9]/g, '');
      var originalPrice = item.querySelector('.item_value').textContent.replace(/[^0-9]/g, '');
      var quantity = item.querySelector('select[id="qty"]').value;
      var productName = item.querySelector('.item_name').textContent;

      products.push({
        pid: productId,
        ppr: salesPrice,
        popr: originalPrice,
        pqt: quantity,
        cu: 'JPY',
        pname: productName
      });

      productCount += parseInt(quantity);
    });

    awpx('param', {
      pds: products,
      pc: productCount
    });

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

  var checkoutButton = document.querySelector('button[id="checkout"]');

  checkoutButton.addEventListener('click', sendCheckout);
</script>

In this particular implementation, an eventListener is bound to the checkout button (identified as a button with the id name "checkout") to send the checkout event when users click it. While the checkout button is being clicked, the array of pds is dynamically constructed by iterating every table row (identified with the class name "cartRow") on the cart page, to indicate the basket of products with which the user starts a checkout process. Information about the product (pid, ppr, popr, pqt, cu, pname) is directly extracted from every cartRow using "querySelector." Notice that an additional "replace" function is implemented to eliminate non-numeric characters for the value of ppr and popr. You should modify the implementation based on your environment and the actual id/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, even you have implemented multiple awoo Pixel Events per webpage.

🌠 Implement with GTM

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

In this particular case, the checkout event is triggered in keeping with the occurrence of the custom event "begin_checkout," because it's being pushed to the dataLayer when the checkout process begins. As for dynamically setting the parameters/keys, 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.

Edited by: Justin Sung