Tracking Search Results via Google Tag Manager

Whether you’re a business dedicated to shopping, healthcare or SaaS, you’re likely in this day and age to have a site capable of producing search results. Whether those results are products, appointment slots or content, you’re going to want to know if there are zero results (or how many results they actually get).

So let’s talk about using a Google Tag Manager implementation for tracking the search results your intrepid site explorers are seeing, and just as importantly – what/when they aren’t!

Sites come in all shapes and sizes, so a one size fits all tag approach in tracking isn’t going to work here, but hopefully, we can show you a few techniques and get you on the right track for your particular needs.

Tope use cases that come to mind are:

• No Results Event
• No. Results On Page
• Reporting Incorrect Results to Queries

No Results Are Bad Results

In the land of delivering data to users, drawing a blank is never a good sign. As such the first thing we recommend is tracking when users see no search results.

Now if you are close with your site developers the easiest way to do this is having them push a custom event to the dataLayer when this happens and use that trigger for your Google Tag Manager event tracking. But let’s face it, that’s rarely the case now, is it?

Next up is using some JavaScript within a customHTML tag within Google Tag Manager to identify this scenario yourself. First of all, what does your no results page look like? Is there a clear message on the screen, such as no results found? Does it send you to an error 404 style page? The key here is to identify something unique about your no results page.

Using the inspect element of the dev tools is a great way to find and identify the key element and then create something like this in Google Tag Manager:

<script>
(function(){

var result = document.getElementById("elementID");
 if(result.innerText == "No Results Found!"){
  window.dataLayer.push({
    customEvent: "noResults"
  })
 }
})();
</script>

Doesn’t have an ID? Try and see if it is the only element on that page with document.querySelectorAll(‘elementClass’) in the console and see if you only get the one result.

Once you have this down you can use this customEvent to trigger your event tracking within GTM, now you can start estimating the number of users that are encountering this issue within Google Analytics event reports (by using the unique count).

You would then create an event tag, maybe something along the lines of this:

You would then create the customEvent called “noResults” to be used as the trigger for the above event.

Tracking Number of Results

That’s all well and good I can hear you saying, but what about actually tracking the number of results! So let’s look at an example format, an appointment-based site that uses cards to display available appointments.

In the mockup above we can see that there are 4 appointment slots showing on the first page, so let’s track the number of results a user sees on the first page, and send a count of this to Google Analytics.

Down the line we could then tie this event information to campaign or landing page to see whether users from certain pages or campaigns aren’t getting the results they are searching for, particularly useful for location-based campaigns.

Similar to above we need to inspect the results page of our site and create a customHTML tag to send this data along. One thing we might want to do is ensure we only push result counts if it is the first page of results because knowing there is only 1 result on page 50 isn’t really the insight we are looking for here.

<script> 
(function(){ 

 // The appointment card element:
 var results = document.querySelectorAll(".myAppointmentCards").length;

 // The element that denotes page number:
 var pageNumber = document.getElementById("myPage");

  //Check page number is 1, if so push to dataLayer
  if(pageNumber.innerText == 1){

   // I've opted to use Simo's generic event tag technique to keep things tidy:
    window.dataLayer.push({
     'event': 'GAEvent',
     'eventCategory' : 'Result Count',
     'eventAction' : results,
     'eventLabel' : undefined,
     'eventValue' : undefined
    }) 

  } 
})(); 
</script>

The primary difference here is the use of a generic event tag rather than a customEvent – this allows us to create an event and push it directly to GA rather than store it in a variable to then send in another event tag. If you haven’t seen this before then take a look at Simo’s blog to get set up to use them: Create a generic tag event

Definitely worth doing! However this is still doable the long way, you just need to push the results to a dataLayer variable and create a new UA event tag to send these values along to your Google Analytics account.

Now just set the trigger for your tag that ensures it fires on any relevant search pages, luckily we took care of the page number part within the tag, so we don’t need to over complicate our trigger. Alternatively, you could always instead push the page number as part of the event and remove the if statement if you so preferred.

That’s it, I hope that helps put someone out there onto the right track for getting some tidy data around search results. As always, feel free to reach out to our team if you’d like to get a free proposal!