clickProduct

✨ Introduction

The clickProduct is designed to trace when users click on an awoo Product Recommendation. Every occurrence of this event signifies a potential transaction! It is an indispensable beacon for unveiling customer preferences, behaviors, and purchase intent. The accumulating count and the landscape of clickProduct offer profound insights into how users start their shopping journey with awoo recommendation system.

⭐ JS Snippet of clickProduct

Below is the JavaScript snippet for the clickProduct event. You should trigger it when a user clicks on an awoo Product Recommendation.

In the provided snippet, there are six parameters (pid, ppr, popr, cu, pname, ser) required to be set dynamically when the event is triggered. The value of those parameters is used to manifest the awoo Product Recommendation that the user clicks, and its rendering awoo SDK/API. 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 recommended product}',
    ppr: '{sales price of the recommended product}',
    popr: '{original price of the recommended product}',
    cu: '{currency code}',
    pname: '{name of the recommended product}',
    ser: '{service footprint}'
  });

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

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

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

Parameter	Definition	Type	Corresponding Datafeed Field
pid	id of the recommended product	string	Product ID
ppr	sales price of the recommended product	string	Sales Price
popr	original price of the recommended product	string	Original Price
cu	currency code	string	(see below for an explanation)
pname	name of the recommended product	string	Product Name
ser	service footprint	string	(see below for value range)

📘

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.

📘

What is 'ser' (service footprint) and its value range?

ser is the abbreviation for "service footprint," which indicates the awoo SDK/API (service) that is rendering the HTML components. Each awoo Pixel Event has its own (or not) corresponding range of ser value. See the value range for clickProduct event:

Value of 'ser'	SDK/API (service)	Webpage
'page'	awoo-category-page / awoo Page API	awoo Page
'productTagsProduct'	awoo-related-products / Products Tags API	product page
'relatedProducts'	awoo-cart-related-products / awoo-complete-related-products / Related Products API	cart page/ order-complete page
'popularProducts'	awoo-not-found-products / awoo-no-result-products / Popular Products API	404 not-found page/ awoo Search-No-Result Page
'popularTags'	awoo-keyword-popular-products / Popular Tags API	main page
'siteSearch'	awoo-search-result-page / Site Search API	awoo Search-Result Page

---

Notice that since every product shown on the awoo Page and awoo Search-Result Page is by default produced by awoo recommendation system, you should also trigger a clickProduct event when a user clicks on any product on those pages.

🌟 Triggering Condition

The clickProduct event should be triggered when a user clicks on an awoo Product Recommendation.

Beware that awoo Pixel's initialization should be executed before clickProduct 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 sendClickProduct(entry) {
    if (location.pathname.includes("category?tag=")) { // product recommendation on awoo page
      var serviceFootprint = 'page';
    } else {
      switch (true) {
        case (location.pathname.includes("cart")): // product recommendation on cart page
          var serviceFootprint = 'relatedProducts';
            break;
        case (location.pathname == "/"): // product recommendation on main page
          var serviceFootprint = 'popularTags';
            break;
        default:
          var serviceFootprint = '';
            break;
      }
    }

    var productCard = entry.target;

    var productId = productCard.querySelector('.product_id').textContent;
    var salesPrice = productCard.querySelector('.sales_price').textContent.replace(/[^0-9]/g, '');
    var originalPrice = productCard.querySelector('.original_price').textContent.replace(/[^0-9]/g, '');
    var productName = productCard.querySelector('.product_name').textContent;

    awpx('param', {
      pid: productId,
      ppr: salesPrice,
      popr: originalPrice,
      cu: 'JPY',
      pname: productName,
      ser: serviceFootprint
    });

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

  var awooProductRecommendations = document.querySelectorAll(".related-product");

  awooProductRecommendations.forEach(function(awooProductRecommendation) {
    awooProductRecommendation.addEventListener('click', sendClickProduct);
  });
</script>

Note that awoo SDK component has to be inserted into the awoo Page, cart page, and main page respectively, to have ser correctly set for every clickProduct event. In the above implementation, every attribute (pid, ppr, popr, pname) of the recommended product is extracted from the webpage using "querySelector." (Another JavaScript function "getAttribute" may also help!) Any non-numeric character is eliminated using the "replace" function from both the price-related parameters.

You should modify the actual implementation and class name based on your environment. Don't forget to handle the value properly for each parameter, to meet the format requirements and its corresponding datafeed field.

❗️

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 clickProduct event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Click - Just Links: Click Classes equals to "related-product".

In this particular case, the clickProduct event is triggered when a user clicks on a <a> link with class name equals to "related-product". Notice that the class name might vary on different websites.

As for dynamically setting the parameters, it leverages the GTM Built-In Variables: "Click Element" to indicate which awoo Product Recommendation the user is clicking on. With "querySelector" further implemented, the product info is finally extracted and set as the value of each parameter for the clickProduct event. Any non-numeric character is eliminated using the "replace" function from both the price-related parameters.

A JavaScript switch statement is also implemented to set the value of ser based on the webpage URL. The prerequisite for this implementation is that the awoo SDK component is inserted into the awoo Page, cart page, and main page respectively, to have ser correctly set for every clickProduct event.

You should modify the implementation based on your website URL and the actual class name. In certain situations, you might utilize "getAttribute" to dynamically extract info from an awoo Product Recommendation. Beware that awoo Pixel's initialization should be loaded before any triggered event.