viewTag

✨ Introduction

The viewTag is designed to trace when an awoo Tag becomes visible to users on your website. This event functions as a subtle observer, capturing user engagements with the diverse range of awoo Tags that categorize and define your products. The landscape of viewTag can unveil valuable insights into user interests, and the overall efficacy of awoo tagging system.

⭐ JS Snippet of viewTag

Below is the JavaScript snippet for the viewTag event. You should trigger it when an awoo Tag appears on the user's viewport. An event per awoo Tag.

In the provided snippet, there are two parameters (tname and ser) required to be set dynamically when the event is triggered. The value of those parameters is used to manifest the awoo Tag and its rendering awoo SDK/API. Notice that their format and value should meet certain requirements and be within a specific range. Check the following table for more details.

<script type="text/javascript">
  awpx('param', {
    tname: '{name of the tag}',
    ser: '{service footprint}'
  });

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

<script type="text/javascript">
  awpx('param', {
    tname: 'graduation black',
    ser: 'page'
  });

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

Parameter	Definition	Type	Format/Value Requirement
tname	text content of the tag	string	(1) Two terms should be separated by half-width space. (2) Any symbol, such as '#' or '@', should be eliminated.
ser	service footprint	string	(see below for value range)

📘

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 viewTag event:

Value of 'ser'	SDK/API (service)	Webpage
'page'	awoo-category-page / awoo Page API	awoo Page
'productTags'	awoo-product-tags / Products Tags API	product page
'popularTags'	awoo-keyword-popular-tags / Popular Tags API	main page
'classifyProductType'	awoo-classify / Classify ProductType API	category page
'classify'	awoo-classify / Classify API	category page

---

Since Classify ProductType API and Classify API share the same awoo-classify SDK, you should set the value of ser based on the underlying API implementation. Check AMP developer guide to tell the difference.

🌟 Triggering Condition

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

Beware that awoo Pixel's initialization should be executed before viewTag 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 Tag. 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("category?tag=")) { // awoo tag on awoo page
          var serviceFootprint = 'page';
        } else {
          switch (true) {
            case (location.pathname.includes("product?pid=")): // awoo tag on product page
              var serviceFootprint = 'productTags';
               break;
            case (location.pathname.includes("category?cid=")): // awoo tag on category page
              var serviceFootprint = 'classifyProductType';
                break;
            case (location.pathname == "/"): // awoo tag on main page
              var serviceFootprint = 'popularTags';
                break;
            default:
              var serviceFootprint = '';
                break;
          }
        }

        awpx('param', {
          tname: entry.target.textContent,
          ser: serviceFootprint
        });

        awpx('event', 'viewTag');
        
        observer.unobserve(entry.target);
      }
    });
  }, {threshold: 0.5});

  var awooTags = document.querySelectorAll(".awoo-tag");

  awooTags.forEach(function(awooTag) {
    observer.observe(awooTag);
  });
</script>

Note that the prerequisite for this implementation is that awoo SDK component is inserted into the main page, product page, and category page respectively, to have ser correctly set for every viewTag event. Every awoo Tag is also defaulted to have a class name "awoo-tag" if you're using awoo SDK instead of awoo API. You should modify the actual implementation based on your environment.

❗️

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 viewTag event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Element Visibility - CSS Selector 'a[class="awoo-tag"]'.

In this particular case, the triggering condition of viewTag event leverages the Element Visibility functionality of GTM. The event is triggered when a hyperlink <a> with the class name "awoo-tag" appears on the page. Since every awoo tag should trigger a standalone viewTag 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, the value of tname leverages the GTM Built-In Variables: "Click Text" to extract awoo Tag's text from the <a> element. Additional JavaScript code (a switch statement) is implemented to set the value of ser based on the webpage URL. The prerequisite for this implementation is that awoo SDK component is inserted into the main page, product page, and category page respectively, to have ser correctly set for every viewTag event.

You should modify the actual implementation based on your website URL and the underlying dataLayer. In certain situations, you might utilize "querySelector" to dynamically extract awoo Tag's text from the webpage if the dataLayer is not well-structured. Beware that awoo Pixel's initialization should be loaded before any triggered event.