viewProductRecommendation

✨ Introduction

The viewProductRecommendation is designed to trace when an awoo Product Recommendation becomes visible to users on your website. This event silently captures user engagements that illuminate the path to enhanced shopping experience and conversion. The landscape of viewProductRecommendation can unveil valuable insights into user interests, and the overall efficacy of awoo recommendation system.

⭐ JS Snippet of viewProductRecommendation

Below is the JavaScript snippet for the viewProductRecommendation event. You should trigger it when an awoo Product Recommendation appears on the user's viewport. An event per 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 displayed on the user's viewport, 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', 'viewProductRecommendation');
</script>

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

  awpx('event', 'viewProductRecommendation');
</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 viewProductRecommendation event:

Value of 'ser'	SDK/API (service)	Webpage
'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

🌟 Triggering Condition

The viewProductRecommendation event should be triggered when an awoo Product Recommendation appears on the user's viewport. Every distinct awoo Product Recommendation should trigger the event once.

Beware that awoo Pixel's initialization should be executed before viewProductRecommendation 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 "intersection observer" to detect the visibility of an awoo Product Recommendation. 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 observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        
        if (location.pathname.includes("search")) { // product recommendation on search-no-result page
          var serviceFootprint = 'popularProducts';
        } 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', 'viewProductRecommendation');
        
        observer.unobserve(entry.target);
      }
    });
  }, {threshold: 0.5});

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

  awooProductRecommendations.forEach(function(awooProductRecommendation) {
    observer.observe(awooProductRecommendation);
  });
</script>

Note that awoo SDK component has to be inserted into the search-no-result page, cart page, and main page respectively, to have ser correctly set for every viewProductRecommendation 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 viewProductRecommendation event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Element Visibility - CSS Selector 'a[class="related-product"]'.

In this particular case, the triggering condition of viewProductRecommendation event leverages the Element Visibility functionality of GTM. The event is triggered when a hyperlink <a> with the class name "related-product" appears on the page. Since every awoo Product Recommendation should trigger a standalone viewProductRecommendation event, the timing of the triggering condition is set to "Once per element" instead of the default mode "Once per page." Finally, "Observe DOM changes" is switched on to constantly check whether the targeted element appears, in case the element is post-rendered instead of appearing on the webpage at first sight.

As for dynamically setting the parameters, it leverages the GTM Built-In Variables: "Click Element" to indicate which awoo Product Recommendation is appearing on the user's viewport. With "querySelector" further implemented, the product info is finally extracted and set as the value of each parameter for the viewProductRecommendation 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 search-no-result page, cart page, and main page respectively, to have ser correctly set for every viewProductRecommendation 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.