clickTag

✨ Introduction

The clickTag is designed to trace when users click on an awoo Tag. This event is an indispensable beacon for unveiling users' shopping intention and their unique preferences. The accumulating count of clickTag offers nuanced insights into the popularity of the awoo Tag, and the effectiveness of your tagging strategy on awoo AMP dashboard.

⭐ JS Snippet of clickTag

Below is the JavaScript snippet for the clickTag event. You should trigger it when a user clicks on an 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', 'clickTag');
</script>

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

  awpx('event', 'clickTag');
</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 clickTag 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 clickTag event should be triggered when a user clicks on an awoo Tag.

Beware that awoo Pixel's initialization should be executed before clickTag 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 sendClickTag(entry) {
    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', 'clickTag');
  }

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

  awooTags.forEach(function(awooTag) {
    awooTag.addEventListener('click', sendClickTag);
  });
</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 clickTag 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 clickTag event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Click - Just Links: Click Classes equals to "awoo-tag".

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

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 clickTag 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.