clickTermSuggestion

✨ Introduction

The clickTermSuggestion is designed to trace when users click an awoo Term Suggestion. The landscape of this event will show you how awoo provides users with relevant and tailored suggestions based on their search queries, ultimately leading to increased engagement, improved user satisfaction, and enhanced conversion rates.

⭐ JS Snippet of clickTermSuggestion

Below is the JavaScript snippet for the clickTermSuggestion event. You should trigger it when a user clicks an awoo Term Suggestion.

In the provided snippet, there are two parameters (tname and ser) presented to manifest the awoo Term Suggestion that a user is clicking on, and the awoo SDK/API that provides the suggestions. Notice that you should also send a following search event (see implementation details here,) since every awoo Term Suggestion clicked will also trigger an awoo Search if you're integrating using awoo-search SDK. The value of tname will then be specified as the user's search query, or say it specifically, the value of sinput in the search event.

You should decide whether to send a following search event based on your actual implementation. If you're solely integrating awoo Term Suggestion API without using awoo Search API, then just send the clickTermSuggestion event. Check the following table for more details.

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

  awpx('event', 'clickTermSuggestion');
  
  // a following search event (optional)
  awpx('param', {
    sinput: '{text of the awoo Term Suggestion}',
    ser: '{service footprint}'
  });

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

<script type="text/javascript">
  awpx('param', {
    tname: 'milk chocolate',
    ser: 'termSuggestion'
  });

  awpx('event', 'clickTermSuggestion');

  // a following search event (optional)
  awpx('param', {
    sinput: 'milk chocolate',
    ser: 'termSuggestion'
  });

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

Parameter	Definition	Type	Format/Value Requirement
tname	text of the awoo Term Suggestion	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 providing the functionality. Each awoo Pixel Event has its own (or not) corresponding range of ser value. See the value range for clickTermSuggestion event:

Value of 'ser'	SDK/API (service)	Functionality
'termSuggestion'	awoo-search / Term Suggestions API	awoo Search

---

Since the only possible sevice that provides those suggestions and the following awoo Search is Term Suggestions API, the ser of the clickTermSuggestion event and search event (optional) should always be equal to 'termSuggestion'. You may predefine it in the script for convenience while implementing this event.

🌟 Triggering Condition

The clickTermSuggestion event should be triggered when a user clicks an awoo Term Suggestion.

Beware that awoo Pixel's initialization should be executed before clickTermSuggestion 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 implement a "mutation observer" to detect whether an awoo Term Suggestion appears, and utilize "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>
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.querySelector('.suggestion-item-wrapper')) {
        var suggestionItems = mutation.querySelectorAll('.suggestion-item');

        suggestionItems.forEach(function(suggestionItem) {
          suggestionItem.addEventListener('click', function(event) {
            
            var suggestionText = suggestionItem.textContent;

            awpx('param', {
              tname: suggestionText,
              ser: 'termSuggestion'
            });

            awpx('event', 'clickTermSuggestion');
  
            awpx('param', {
              sinput: suggestionText,
              ser: 'termSuggestion'
            });

            awpx('event', 'search');
          });
        });
      }
    });
  });

  var targetNode = document.body;
  var config = { childList: true, subtree: true };

  observer.observe(targetNode, config);
</script>

In this particular case, a mutation observer is implemented to check whether the "suggestion-item-wrapper" that has all "suggestion-item" as its child appears on the webpage. If it does appear, an eventListener is bound to every "suggestion-item" in order to send the event when users click any of those. The textContent of the "suggestion-item" is extracted as the value of tname and sinput.

Last but not least, the value of ser for both events is predefined to "termSuggestion". You should modify the actual implementation and class name 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 clickTermSuggestion event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Click - All Elements: Click Classes equals to "suggestion-item".

In this particular case, the clickTermSuggestion event is triggered when a user clicks on an HTML component with the class name equal to "suggestion-item". As for dynamically setting the parameters, the value of tname and sinput leverages the GTM Built-In Variables: "Click Text" to extract awoo Term Suggestion's text from the HTML component.

You should modify the actual implementation based on your website design. The class name used in this sample implementation may not apply to your situation. In certain cases, you might utilize "querySelector" to dynamically extract awoo Term Suggestion'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.