search

✨ Introduction

The search is designed to trace when users execute an awoo Search. This event is crucial for understanding user search intent, preferences, and behavior. With every search query being recorded, the landscape of search is a fundamental reference to identify popular search queries, uncover trends, and refine your marketing strategies on awoo AMP dashboard.

⭐ JS Snippet of search

Below is the JavaScript snippet for the search event. You should trigger it when a user executes an awoo Search.

In the provided snippet, there are two parameters (sinput and ser) presented to manifest the search that a user is executing. The value of sinput is used to specify the user's search query in the awoo Search Bar, or say it specifically, the value of query parameter "text" of a Site Search API request. Check the following table for more details.

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

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

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

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

Parameter	Definition	Type	Format/Value Requirement
sinput	search query 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 search event:

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

---

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

🌟 Triggering Condition

The search event should be triggered when a user executes an awoo Search.

Beware that awoo Pixel's initialization should be executed before search 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 watchSearchEvents(inputId, buttonId, callback){
    var inputElement = document.querySelector(inputId);
    var buttonElement = document.querySelector(buttonId);

    if (inputElement && buttonElement){
      buttonElement.addEventListener('click', function(){
        var searchInput = inputElement.value;
        callback(searchInput);
      });

      inputElement.addEventListener('keydown', function(event){
        if (event.key === 'Enter'){
          var searchInput = inputElement.value;
          callback(searchInput);
        }
      });
    }
  }
  

  watchSearchEvents('#SearchInput', '#SearchButton' ,function(searchInput){
    
    awpx('param', {
      sinput: searchInput,
      ser: 'siteSearch'
    });

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

In the above implementation, a JavaScript "watchSearchEvents" function is implemented to check for the appearance of the awoo Search Bar (with the input box specified as an element with the id name "SearchInput" and search button specified as "SearchButton" respectively.) If the awoo Search Bar does exist, it adds two "eventListener" to listen for the user's click on the search button and the "Enter" keydown, which both indicate that an awoo Search is being executed. The user's search query in the input box is then returned to be set as the value of sinput as soon as either action is triggered.

Last but not least, the value of ser is predefined to "siteSearch" for every search 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 search 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 "watchSearchEvents" with "eventListener" is implemented to detect whether a user is executing an awoo Search (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!