purchase

✨ Introduction

The purchase is designed to trace the completion of a purchase order. This event serves as a crucial tool, enabling you to track and measure the success of your efforts in driving revenue and achieving business objectives in the e-commerce realm. Needless to say, the landscape of purchase event is a convincing indicator of how awoo AMP helps boost the conversion rate!

⭐ JS Snippet of purchase

Below is the JavaScript snippet for the purchase event. You should trigger it when a purchase order has been completed.

The value of the array pds is used to describe the basket of products that the user has purchased. 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 will be equal to the sum of the quantity (pqt) of each product.

Apart from the above, the value of the remaining three parameters is used to manifest the order that a user just made. Since there's a chance that a discount is applied, the value of rv isn't necessarily equal to the sum of the sales price ppr of each product. The value of oid serves as a unique identifier to distinguish order on the awoo AMP dashboard. Last but not least, please make sure you meet the dataType specification of those parameters to avoid any data loss and wrong evaluation. Check the following table for more details.

<script type="text/javascript">
  awpx('param', {
    pds: [
      { // information of the 1st purchased item
        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 purchased item
        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 items if needed
    ],
    pc: {total product count},
    cu: '{currency code}',
    rv: {revenue},
    oid: '{identifier of the order}'
  });

  awpx('event', 'purchase');
</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,
    cu: 'JPY',
    rv: 15900,
    oid: 'AWOOISNO1'
  });

  awpx('event', 'purchase');
</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
pc	total product count	integer
cu	currency code	(see below for explanation)
rv	revenue	integer
oid	identifier of the order	string

📘

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. Also, notice that every value of 'cu' (within pds or not) in the purchase event should share the same currency code.

🌟 Triggering Condition

The purchase event should be triggered when a purchase order has been completed, which is typically on an order-complete page.

Beware that awoo Pixel's initialization should be executed before purchase 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. 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>
  var products = [];
  var productCount = 0;

  var revenue = parseInt(document.querySelector('.order_revenue').textContent.replace(/[^0-9]/g, ''));
  var orderNumero = document.querySelector('.order_serial').textContent;

  var purchasedItems = document.querySelectorAll('.purchasedItem');

  purchasedItems.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('.item_quantity').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,
    cu: 'JPY',
    rv: revenue,
    oid: orderNumero
  });

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

In this sample implementation, the purchase event is assumed to be triggered when an order-complete page is loaded. The array of pds is dynamically constructed by iterating every purchased item on the webpage (identified with the class name "purchasedItem",) to indicate the basket of products that the user has purchased. Information about the product (pid, ppr, popr, pqt, cu, pname) is directly extracted from the HTML component using "querySelector." Notice that an additional "replace" function is implemented to eliminate non-numeric characters for the value of ppr and popr.

Last but not least, an identifier of the order and revenue is also extracted from the webpage using "querySelector." You should make sure the value of those parameters meets its dataType specification. Additional JavaScript functions parseInt() and String() may come in handy! Don't forget to 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, 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 purchase event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Custom Event - Event Name "purchase".

In this particular case, the purchase event is triggered in keeping with the occurrence of the custom event "purchase," because it's being pushed to the dataLayer when a purchase order is completed. As for dynamically setting the parameters/keys, additional JavaScript code is implemented to leverage the product information that is specified in the eventModel. Notice that the JavaScript function parseInt() and String() are utilized to make sure the value of rv and oid meet its dataType specification respectively.

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 and order details from the webpage if the dataLayer isn't well-structured. Beware that awoo Pixel's initialization should be loaded before any triggered event.