viewProduct

✨ Introduction

The viewProduct is designed to trace when users explore specific products on your website. This event offers profound insights into user preferences, popular products, and the overall effectiveness of your product showcase. The landscape of viewProduct can stand as a crucial reference point for optimizing your online storefronts.

⭐ JS Snippet of viewProduct

Below is the JavaScript snippet for the viewProduct event. To correctly trace a user's engagement with various product pages, you should embed it into every product page.

In the provided snippet, there are five parameters (pid, ppr, popr, cu, pname) required to be set dynamically when the event is triggered. The value of those parameters is used to indicate the product displayed on the product page. 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}',
    cu: '{currency code}',
    pname: '{name of the product}'
  });

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

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

  awpx('event', 'viewProduct');
</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
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 viewProduct event should be triggered when a product page is loaded.

Beware that awoo Pixel's initialization should be executed before viewProduct 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. Placing viewProduct snippet just before the closing </body> tag helps preserve the execution order of the scripts as well. Check the following code block for sample implementations:

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

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

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

<html>
  <body>
    
<!-- Your HTML content goes here -->

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

      awpx('event', 'viewProduct');
    </script>
  </body>
</html>

❗️
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 viewProduct event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Custom Event - Event Name "view_item".

In this particular case, the viewProduct event is triggered in keeping with the occurrence of the custom event "view_item," because it's being pushed to the dataLayer when a product page is loaded. As for dynamically setting the parameters, additional JavaScript code is implemented to leverage the product information that is specified in the eventModel. Finally, the value of cu is predefined to 'JPY' corresponding to its datafeed.

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 is not well-structured. Beware that awoo Pixel's initialization should be loaded before any triggered event.

a sample implementation of viewProduct as a custom HTML on GTM

a sample triggering condition for viewProduct event on GTM

Edited by: Justin Sung