searchInput

✨ Introduction

The searchInput is designed to record the user's search input into the awoo Search Bar. This event is designed to trace user interactions with awoo Search, especially when the user is of two minds deciding what to input. The landscape of searchInput plays a pivotal role in gathering search queries, search refinement actions, and search parameters utilized by users.

⭐ JS Snippet of searchInput

Below is the JavaScript snippet for the searchInput event. You should trigger it when the user's search input into the awoo Search Bar has changed, or a user loses focus of the awoo Search Bar after inputting.

In the provided snippet, there are two parameters (sinput and ser) presented to manifest the user's search input. The value of sinput represents what a user types in the awoo Search Bar, while the value of ser indicates the awoo SDK/API that a user is interacting with. Check the following table for more details.

<script type="text/javascript">
  awpx('param', {
    sinput: '{search input by user}',
    ser: '{service footprint}'
  });

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

<script type="text/javascript">
  awpx('param', {
    sinput: 'milk dark chocol',
    ser: 'siteSearch'
  });

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

Parameter	Definition	Type	Format/Value Requirement
sinput	search input by user	string	➖
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 searchInput event:

Value of 'ser'	SDK/API (service)	Functionality
'siteSearch'	awoo-search / Site Search API	awoo Search

---

Since the only possible sevice that a user interacts with while inputting is awoo-search/Site Search API, the ser of the searchInput event should always be equal to 'siteSearch'. You may predefine it in the script for convenience while implementing this event.

🌟 Triggering Condition

The searchInput event should be triggered when the user's search input into the awoo Search Bar has changed, or a user loses focus of the awoo Search Bar after inputting.

Beware that awoo Pixel's initialization should be executed before searchInput 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" to trigger 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 watchInputValue(inputBox, callback){
    var inputElement = document.querySelector(inputBox);

    if (inputElement){
      var previousValue = inputElement.value;

      inputElement.addEventListener('input', function(){
        var currentValue = inputElement.value;
        if (currentValue!==previousValue){
          previousValue = currentValue;
          callback(currentValue);
        }
      });
    
      inputElement.addEventListener('blur', function(){
        var currentValue = inputElement.value;
        callback(currentValue);
      });
    }
  }

  watchInputValue('#SearchInput', function(userInput){

    awpx('param', {
      sinput: userInput,
      ser: 'siteSearch'
    });

    awpx('event', 'searchInput');
  });
</script>

In the above implementation, a JavaScript "watchInputValue" function is implemented to detect the value change in the awoo Search Bar (with the input box specified as an element with the id name "SearchInput".) If the input box does exist, it adds two "eventListener" to check whether there's different input value or the user has lost focus of the input box. Under both circumstances, what the user has already input will be specified as the value of sinput, and the searchInput will be triggered.

Last but not least, the value of ser is predefined to "siteSearch" for every searchInput event. 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 searchInput event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to All Pages - Page View.

In this particular case, a JavaScript function "watchInputValue" with "eventListener" is implemented to detect the value change in the awoo Search Bar (see detailed explanations in the above section.) This custom HTML will be loaded on every page, since the awoo Search Bar typically appears on every page of your website.

You should modify the actual implementation based on your website design. Beware that awoo Pixel's initialization should always be loaded before any triggered event!