searchNoResult

✨ Introduction

The searchNoResult is designed to trace when users encounter an awoo Search-No-Result Page after initiating a search query with awoo Search. Essentially, it signifies a user's attempt to find a specific product that is currently not available on your platform, and fails to obtain any relevant result. The landscape of searchNoResult helps you optimize the search settings on the awoo AMP dashboard.

⭐ JS Snippet of searchNoResult

Below is the JavaScript snippet for the searchNoResult event. You should trigger it when a user encounters an awoo Search-No-Result Page.

In the provided snippet, there are two parameters (sinput and ser) presented to manifest the awoo Search-No-Result Page that a user encounters. The value of sinput is used to specify the user's search input into the awoo Search Bar, or say it specifically, the value of query parameter "text" of a Site Search API request.

Since the encounter of an awoo Search-No-Result Page is dynamically based on the user's search input, you won't be able to know what kind of search input will lead to zero results in advance. We highly suggest you set the value of sinput based on the URL or title text on the page. Check the following table for more details.

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

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

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

  awpx('event', 'searchNoResult');
</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 rendering the HTML components. Each awoo Pixel Event has its own (or not) corresponding range of ser value. See the value range for searchNoResult event:

Value of 'ser'	SDK/API (service)	Webpage
'siteSearch'	awoo-search-result-page / Site Search API	awoo Search-No-Result Page

---

Since the only possible sevice that renders an awoo Search-No-Result Page is awoo-search-result-page/Site Search API, the ser of the searchNoResult event should always be equal to 'siteSearch'. You may predefine it in the script for convenience while implementing this event.

🌟 Triggering Condition

The searchNoResult event should be triggered when an awoo Search-No-Result Page is encountered.

The tricky part of the trigger condition is that you have to implement a method to detect whether the user is encountering a search-no-result situation. If you're using awoo API, you may merely check if there's no product returned in the API response. If you're using awoo SDK, then you may use "mutation observer" to check the existence of any HTML component that can indicate the exact situation (usually a NotFound image or title.) Using "querySelectorAll" and "length" to count if the search result is equal to zero may also help!

Beware that awoo Pixel's initialization should be executed before searchNoResult 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. 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 observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.querySelector('div#searchNotFound')) {
        observer.disconnect();

        var searchInput = new URLSearchParams(location.search).get('text');

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

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

  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 a div with the id "searchNotFound" exists on the webpage, since this HTML component indicates a user is encountering an awoo Search-No-Result Page. You should modify the actual implementation based on your website design.

Notice that the value of sinput should be human-readable, so you have to decode it from UTF-8 if you are utilizing the parameter "text" or any other parameter in the URL.

❗️

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 searchNoResult event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Element Visibility - CSS Selector 'div[id="searchNotFound"]'.

In this particular case, the triggering condition of searchNoResult event leverages the Element Visibility functionality of GTM. The event is triggered when a <div> with the id name "searchNotFound" appears on the page to detect whether the user is encountering a search-no-result situation. Notice that an additional condition Page URL contains "search" is set to execute the detection only when it's a search-result page. Finally, "Observe DOM changes" is switched on to constantly check whether the targeted element appears, in case the element is post-rendered instead of appearing on the webpage at first sight.

As for dynamically setting the parameters, additional JavaScript code is implemented to leverage the "search_term" that is specified in the eventModel. The value of ser is predefined to 'siteSearch' for all searchNoResult events.

You should modify the actual implementation based on your website and the underlying dataLayer. In certain situations, you might utilize "querySelector" to dynamically extract title text from the awoo Search-Result Page, to represent the user's search input. Beware that awoo Pixel's initialization should be loaded before any triggered event.