viewSearchResultPage

✨ Introduction

The viewSearchResultPage is designed to trace when users view an awoo Search-Result Page after initiating a search query with awoo Search. This event serves as a cornerstone in understanding user engagement within search-driven environments powered by awoo. The landscape of viewSearchResultPage is an invaluable reference to decipher users' search experiences and tailor search settings on the awoo AMP dashboard.

⭐ JS Snippet of viewSearchResultPage

Below is the JavaScript snippet for the viewSearchResultPage event. You should trigger it when a user engages with the awoo Search-Result Page.

In the provided snippet, there are two parameters (sinput and ser) presented to manifest the awoo Search-Result Page that a user is viewing. 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 formation of an awoo Search-Result Page is dynamically based on the user's search input, you won't be able to know all of the result pages 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', 'viewSearchResultPage');
</script>

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

  awpx('event', 'viewSearchResultPage');
</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 viewSearchResultPage event:
Value of 'ser'
SDK/API (service)
Webpage
'siteSearch'
awoo-search-result-page
/
Site Search API
awoo Search-Result Page
Since the only possible sevice that renders an awoo Search-Result Page is awoo-search-result-page/Site Search API, the ser of the viewSearchResultPage event should always be equal to 'siteSearch'. You may predefine it in the script for convenience while implementing this event.

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

🌟 Triggering Condition

The viewSearchResultPage event should be triggered when an awoo Search-Result Page is loaded.

Beware that awoo Pixel's initialization should be executed before viewSearchResultPage 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 viewSearchResultPage 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 searchInput = new URLSearchParams(location.search).get('text');

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

  awpx('event', 'viewSearchResultPage');
</script>T

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

    <script type="text/javascript">
      var searchInput = new URLSearchParams(location.search).get('text');

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

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

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. You should modify the actual implementation 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 viewSearchResultPage event. The JavaScript snippet is inserted as a custom HTML tag, with the triggering condition set to Custom Event - Event Name "view_search_results".

In this particular case, the viewSearchResultPage event is triggered in keeping with the occurrence of the custom event "view_search_results," because it's being pushed to the dataLayer when an awoo Search-Result Page is loaded. As for dynamically setting the parameters, additional JavaScript code is implemented to leverage the "search_term" that is specified in the eventModel. Finally, the value of ser is predefined to 'siteSearch' for all viewSearchResultPage 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.

a sample implementation of viewSearchResultPage as a custom HTML on GTM

a sample triggering condition for viewSearchResultPage event on GTM

Edited by: Justin Sung