viewTagPage

✨ Introduction

The viewTagPage is designed to trace when users explore an awoo Page on your website. This event emerges as a pivotal asset in our analytics procedures, functioning as a discerning observer to capture users' interactions with the hub of awoo services. The landscape of viewTagPage is the central component to evaluate the performance of the awoo Tag.

⭐ JS Snippet of viewTagPage

Below is the JavaScript snippet for the viewTagPage event. To correctly trace a user's engagement with an awoo Page, you should trigger it when an awoo Page is loaded.

In the provided snippet, there are two parameters (tname and ser) presented to indicate the awoo Page that a user is viewing. The value of tname is used to specify the tag title of an awoo Page, or say it specifically, the two terms that are used for the query parameter "tags" of an awoo Page API request.

Since the formation of an awoo Page is dynamically in accordance with the awoo Tag, you won't be able to know all of the tags (combination of terms) in advance. We highly suggest you set the value of tname based on the URL or title text on the page. Check the following table for more details.

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

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

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

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

Parameter	Definition	Type	Format/Value Requirement
tname	tag title of the page	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 viewTagPage event:
Value of 'ser'
SDK/API (service)
Webpage
'page'
awoo-category-page
/
awoo Page API
awoo Page
Since the only possible sevice that renders an awoo Page is awoo-category-page/awoo Page API, the ser of the viewTagPage event should always be equal to 'page'. You may predefine it in the script for convenience while implementing this event.

Value of 'ser'	SDK/API (service)	Webpage
'page'	`awoo-category-page` / awoo Page API	awoo Page

🌟 Triggering Condition

The viewTagPage event should be triggered when an awoo Page is loaded.

Beware that awoo Pixel's initialization should be executed before viewTagPage 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 viewTagPage 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>
  // script of awoo Pixel's initialization
</script>

<script type="text/javascript" defer>
  var encodedTagName = new URLSearchParams(location.search).get('tags').replace(/,/g, ' ');

  awpx('param', {
    tname: decodeURIComponent(encodedTagName),
    ser: 'page'
  });

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

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

    <script type="text/javascript">
      var encodedTagName = new URLSearchParams(location.search).get('tags').replace(/,/g, ' ');

      awpx('param', {
        tname: decodeURIComponent(encodedTagName),
        ser: 'page'
      });

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

The value of tname should be human-readable, so you have to decode it from UTF-8 if you are utilizing the parameter "tags" in the URL. Also don't forget to replace commas with half-width space to meet the format requirements!

❗️
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 viewTagPage event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Page View - Page URL contains 'category?tags=". In this particular case, the value for tname is dynamically extracted from the awoo Page's URL.

You should modify the actual implementation based on your website URL. In certain situations, you might utilize "querySelector" to dynamically extract title text from the awoo Page. Beware that awoo Pixel's initialization should be loaded before any triggered event.

a sample implementation of viewTagPage as a custom HTML on GTM

a sample triggering condition for viewTagPage event on GTM

Edited by: Justin Sung