5 Ways to Track Site Search with Google Tag Manager and Google Analytics 4

Updated: August 10th, 2021

Site search tracking has always been a hidden gem for me when it comes to analyzing visitors’ behavior on a site. Why? Because you can quickly identify what your visitors are looking for on your site and whether you have to offer something relevant.

Google Analytics 4 Enhanced Measurement is capable of automatically tracking search queries (at least in most situations) but in order to see that data in reports, you have to do some additional configuration. Also, if your website’s search works differently than GA4 expects it to, then you will have to do some additional configurations in Google Tag Manager). In this blog post, I’ll cover various options of how to track site search with Google Analytics 4 and (if needed) with Google Tag Manager.

The tracking method depends on how the site search is implemented on your site.

 

Looking for Universal Analytics (GA3) instructions?

This blog post teaches how to track events with Google Analytics 4. If you are looking for a solution in Universal Analytics, read this blog post instead.

===

 

Video tutorial

If you prefer video content, here’s a tutorial from my Youtube Channel. If that method does not work, then come back to this blog post alternative options.

 

How to read this guide

This blog post is quite lengthy, so here is my tip on how to get the most out of it in the least amount of time.

• First, I will present 5 different site search tracking options and how to test them. Each option’s title starts with “Tracking Option #…”.
• Then I will explain how to register custom dimensions related to the site search in GA4
• Then at the end of this blog post, I will explain how to create a search_term report in Google Analytics 4 analysis hub (with exploration reports).

 

TABLE OF CONTENTS

+ Show table of contents +

• Why are Site Search Reports valuable?
• Option #1. Automatic search tracking
  • #1.1. Time to test
  • #1.2. What if your site search offers advanced filters/options?
• Option #2. Site search without query parameters
  • #2.1. Custom JavaScript Variable
  • #2.2. Create a Google Analytics 4 tag
  • #2.3. Test
• Option #3. Track auto-complete search
  • #3.1. Custom HTML tag (listener)
  • #3.2. Data Layer Variable and Custom Event Trigger
  • #3.3. Google Analytics 4 event tag
  • #3.4. Test
• Option #4. Track site search with the developer’s help
  • #4.1. A trigger and a variable
  • #4.2. Google Analytics 4 event tag
  • #4.3. Test
• Option #5. Track site search with DOM scraping
  • #5.1. A variable that returns the search page’s H1
  • #5.2. A variable that extracts the Search Query
  • #5.3. Trigger
  • #5.4. Create a GA4 event tag
  • #5.5. Test
• Register Custom Dimensions in GA4
• Create a site search report in GA4
• Search with zero results
• Final Words

 

Why are Site Search Reports valuable?

If you have configured everything correctly, you will get access to data like the most popular search terms, how often are they searched for, etc.

How do I use these reports?

#1. I check whether the search is showing relevant results to my visitors. I just pick the most popular queries, enter them myself on my site and check what does the search return.

• Are the top results relevant?
• Are there any non-sense results? Maybe the search is also returning some hidden pages that shouldn’t appear there? etc.

Checking search queries in such a way is very time-consuming and tedious, however, it’s a good way to evaluate whether the search is actually properly working on your site.

If you indeed have content related to the keyword X but it was not displayed in the results, you could talk to developers about how to improve this. If you are using a popular content management system (like WordPress), you could try to find a better-performing search plugin.

 

#2. I find new ideas for content. While you can do keyword research with tools like Google Search Console, Ahrefs, etc., your own site search is a gold mine too. If a significant number of visitors have landed on your site and are looking for X (and you don’t have that type of content), maybe it’s time to create one?

While it’s fairly difficult to aggregate the data (because people can look for the same thing while using different keywords), you can still get a sense of what are your visitors interested in.

What do I mean by saying “use different keywords to find the same thing”? For example, 5 people might be looking for an enhanced ecommerce guide but their search terms might look like this:

• enhanced ecommerce
• ecommerce
• e-commerce enhanced
• gtm ga eec
• enhanced google analytics

So, how can we track site search with Google Analytics 4? The answer is the classic “it depends”.

It depends on how the site search is coded on your site and how does it work.

 

Tracking option #1. Automatic search tracking (with GA4 Enhanced Measurement)

This option is the easiest one (and does not require Google Tag Manager at all). Try to use your website’s search feature. Enter any word in the search field and hit the Search button.

Did the page reload and the URL change?

If yes, is the search term displayed after the question mark? Does it look similar to this yoursite.com/?search=my+keyword? Or maybe like this yoursite.com/?s=my+keyword?

If the answer is yes, you’re lucky. If the search query is displayed in the URL after the question mark (but not after the #), this means that your search is working with query parameters. In my first example (yoursite.com/?search=my+keyword), the query parameter for the search term is search. In the second example, it is s.

Now, go to your  Google Analytics 4 property > Admin (click the gear icon in the lower-left corner) > Data Stream > Select your web stream and make sure that Enhanced Measurement is enabled.

If yes, then click the gear icon and then Show Advanced Settings under the Site Search section. Here you will see 5 default query parameters that Google Analytics 4 recognizes: q, s, keyword, search, query. If your website is using a different query parameter in the URL to store the search keyword, enter that parameter. You can have up to 10 parameters in total (separated by comma).

Save the changes.

 

#1.1. Time to test

Now you will have to enable the DebugView in GA4 (I mean, make the data visible here). There are several options for it, but now you can either enable the GTM preview mode or enable the GA Debugger Chrome extension.

Once you do that, then go to your website, enter a word in the site search field, and hit enter. You will be redirected to the search results page and in the URL you will see your search term as one of the URL parameters (a.k.a. query parameters).

Now, go to the DebugView of GA4, and soon you should see an event called view_search_results. This was automatically sent by enhanced measurement. If you cannot see any data in DebugView, make sure you are using it properly.

Click the view_search_results event and then click the search_term parameter. It should contain the word(s) that you entered in the site search field.

So if everything is looking good, skip to this chapter where I explain what to do next.

 

#1.2. What if your site search offers advanced filters/options?

On some websites, the search feature consists not only of the search field. There might be additional filters/features that can help users narrow down their search. If we talk, for example, about an apparel ecommerce website, additional filters can be size, gender, brand, etc.

If these additional parameters are also visible in the URL as query parameters, you can enter them in the settings of Enhanced Measurement, and GA4 will handle that automatically.

Let’s say, that I used the site search feature and entered the keyword pants. Also, I have selected “male” in the gender field. Consequently, the URL of the search results page looks like this: https://example.com/search/?q=pants&gender=male.

Let’s go to your Google Analytics 4 property > Admin > Data Streams and select your data stream. Then click the gear icon in the “Enhanced Measurement” section and then Show Advanced Settings under Site Search.

In the Additional Query Parameters field, enter gender. If the URL contains more parameters and you want to track them too, enter all of them (separated by comma).

Save the changes. Then go to your website and perform a new search with the gender field selected as well. In the DebugView of GA4, you will see a new view_search_results event. Click it.

Together with the search_term parameter, you will see a new parameter, q_gender. This was automatically tracked by enhanced measurement. If you configured a different parameter (e.g. brand), then the parameter’s name will be q_brand.

That’s awesome, right? After you configure this successfully, jump to this section of this article where I explain how to register custom dimensions. Every parameter that you want to see/use in GA4 reports, will have to be registered in GA4 as a custom dimension.

I’d really love it if standard parameters (like search_term) would be visible in the reports by default and would not require us to register them manually. I still hope that this will happen in the future.

 

Tracking option #2. Track site search without query parameters

Another situation how a search query can be displayed in the URL is like this yoursite.com/search/search+query.

In this case, the search term is not a query parameter, therefore, the built-in GA4 functionality will not be able to capture it. That’s where Google Tag Manager becomes handy.

There are many ways how to skin a cat in this type of situation but I’ll show you one of the possible ways. Here’s the plan:

1. We will extract the search term from the URL
2. We will manually send the view_search_results event (with GTM). That event will also include a parameter called search_term.

 

#2.1. Custom JavaScript Variable

The first two steps will be done with a little Custom JavaScript variable named cjs – search query. Here’s the code:

function() {
  var pagePath = window.location.pathname;
  var searchParam = '/search/'; //replace this with your page path before the search term
  if (pagePath.indexOf(searchParam) > -1) {
    return decodeURI(pagePath.split(searchParam)[1].split('/')[0])
  }
}

On line 3, you need to enter what does the Page Path of your URL look like before the search term. Let me illustrate.

• If your search URL is yoursite.com/search/your-search-term, you need to enter /search/ in the Custom JS variable (together with the opening and closing slash
• If your search URL is yoursite.com/search/results/your-search-term/, you need to enter /search/results/

If the Page Path does not contain the searchParam that you have defined, then this Custom JS variable will return undefined.

 

#2.2. Create a Google Analytics 4 tag

Let’s send the value of our Custom JavaScript variable to Google Analytics 4 (together with a view_search_results event). Go to Google Tag Manager > Tags > New > Google Analytics 4 event.

In the Event name field, enter view_search_results. Then click Event Parameters and enter search_term. In the value field of that parameter, insert the Custom JavaScript variable that you created in the previous chapter.

Update: in the screenshot below, I should be using “search_term”, not “search_query” parameter.

In the triggering section, click anywhere on the white space and then click the Plus icon in the top right corner to create a new trigger.

The trigger should use the following settings:

• Type – Page View
• This trigger fires on – Some Page Views
• Enter the following condition: cjs – search query (that’s your Custom JS variable) does not match regex (ignore case) ^(undefined|null|0|false|NaN|)$

This trigger will fire if the pageview occurs and the page URL contains the search query.

Save the trigger and then save the tag.

 

#2.3. Test

First, let’s test with the GTM preview mode. Click the Preview button in GTM’s interface, then enter the URL of your search results page. After you are redirected to the search page, come back to the Preview mode’s page and click the most recent Container Loaded event. There you should see the GA4 event tag fired.

If yes, let’s test whether the data to Google Analytics was sent properly.

Go to GA4 DebugView. If needed, find your device (in the top left corner of the DebugView) and then check if you see the view_search_results page appear in the event stream. If yes, click it and check if the value of the search_term parameter is correct.

After you configure this successfully, jump to this section of this article where I explain how to register custom dimensions.

 

Tracking option #3. Track auto-complete search

This method is an advanced one.

Some websites use auto-complete search functionality (when you start typing a search term and the results are starting to show up after a couple (or so) seconds.

In a nutshell, here’s the process of how things will work:

• A visitor starts typing a search query in the search field
• If he/she pauses or stops for a couple of seconds, a virtual pageview is sent to Google Analytics together with a modified page field (just like we did in chapter #2).

This option/solution is offered by Simo Ahava but I have adapted it to Google Analytics 4.

 

#3.1. Custom HTML tag (listener)

Go to Google Tag Manager > Tags > New > Custom HTML and paste the following code:

<script>
(function() {
    // Set searchField to the search input field.
    // Set timeout to the time you want to wait after the last character in milliseconds.
    // Set minLength to the minimum number of characters that constitutes a valid search.
    var searchField = document.querySelector('input#search-field'),
        timeout = 2000,
        minLength = 3;

    var textEntered = false;

    var timer, searchText;
    
    var handleInput = function() {
      searchText = searchField ? searchField.value : '';
      if (searchText.length < minLength) {
        return;
      }
      window.dataLayer.push({
        event: 'customSearch',
        customSearchInput: searchText
      });
      textEntered = false;
    };
    
    var startTimer = function(e) {
      textEntered = true;
      window.clearTimeout(timer);
      if (e.keyCode === 13) {
        handleInput();
        return;
      }
      timer = setTimeout(handleInput, timeout);
    };
    
    if (searchField !== null) {
      searchField.addEventListener('keydown', startTimer, true);
      searchField.addEventListener('blur', function() {
        if (textEntered) {
          window.clearTimeout(timer);
          handleInput();
        }
      }, true);
    }
  })();
</script>

In the triggering section, create a new trigger called DOM Ready. If the search field is on every page, you can set the trigger to fire on All DOM ready events. Otherwise, you can make it more precise (e.g. fire only on certain pages where it is possible to use the site search).

IMPORTANT: this code will not work out of the box. You will have to modify it (at least line 6 with var searchField). Read this guide for further instructions. And when you’re done editing the code, come back here.

 

#3.2. Data Layer Variable and Custom Event Trigger

When the aforementioned Custom HTML tag is activated, it starts looking for interactions with the autocomplete search field on your website. If that happens, then the search data is pushed to the Data Layer. If we want to use that data, we have to create a Data Layer Variable and a Custom Event Trigger.

In GTM, go to Variables > New > Data Layer Variable and enter the following settings:

Important: the name of the variable must be exactly customSearchInput (case-sensitive).

Then go to Triggers > New > Custom Event trigger and enter the following settings:

Here the event name must be precisely customSearch.

Save everything.

 

#3.3. Google Analytics 4 event tag

In Google Tag Manager, go to Tags > New > GA4 Event tag and enter the following settings:

• Event name: view_search_results
• Parameter name: search_term, value: the Data Layer Variable that you have just created.
• Trigger: The Custom Event trigger that you created above.

Save the tag.

 

#3.4. Test

First, let’s test with the GTM preview mode. Click the Preview button in GTM’s interface, then enter the URL of your website. After you are redirected to the search page, enter something in the search field. Come back to the Preview mode’s page and you should see the customSearch event on the left side of the preview mode. Click it. There you should see the GA4 event tag fired.

If yes, let’s test whether the data to Google Analytics was sent properly.

Go to GA4 DebugView. If needed, find your device (in the top left corner of the DebugView) and then check if you see the view_search_results page appear in the event stream. If yes, click it and check if the value of the search_term parameter is correct.

After you configure this successfully, jump to this section of this article where I explain how to register custom dimensions.

 

Tracking option #4. Track site search with the developer’s help

If none of the abovementioned site search tracking options work for you, this means that:

• The URL of the search page does not contain the search term at all
• Your search is not based on auto-complete

In that case, your plan B is to ask for a developer’s help. You could ask him/her to push the search term to the Data Layer every time a visitor completes a search.

Here’s a sample dataLayer.push code that a developer should incorporate somewhere in his code:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event' : 'search',
  'searchTerm' : 'your search term' //this should be dynamically replaced with an actual search query
});
</script>

 

#4.1. A trigger and a variable

After a developer implements this code, we need to create a Custom Event Trigger for search and a Data Layer Variable for searchTerm.

In GTM, go to Triggers > New > Trigger Configuration > Custom and enter the following settings:

Save the trigger. Then go to Variables > User-defined Variables > New > Data Layer Variable and enter the following settings:

 

#4.2. Google Analytics 4 event tag

Go to Tags > New > GA4 event tag and enter the following settings:

• Event name: view_search_results
• Parameter name: search_term, value: the Data Layer Variable that you have just created.
• Trigger: The Custom Event trigger that you created above.

 

#4.3. Test

First, let’s test with the GTM preview mode. Click the Preview button in GTM’s interface, then enter the URL of your website. After you are redirected to the search page, enter something in the search field. Come back to the Preview mode’s page and you should see the search event on the left side of the preview mode. Click it. There you should see the GA4 event tag fired.

If yes, let’s test whether the data to Google Analytics was sent properly.

Go to GA4 DebugView. If needed, find your device (in the top left corner of the DebugView) and then check if you see the view_search_results page appear in the event stream. If yes, click it and check if the value of the search_term parameter is correct.

After you configure this successfully, jump to this section of this article where I explain how to register custom dimensions.

 

Tracking option #5. Track site search with DOM scraping

The final option of this guide is the riskiest one. You should try it ONLY if all of the other options mentioned in this article did not work.

Important: This is just an example. Your case might look different, therefore, you might need to adapt my solution.

In this chapter, I will show you a hypothetical situation where:

• Page URL does not contain the search term
• The search is not auto-complete
• A developer is not available
• BUT the search term is displayed on a page (e.g., as Heading 1). Like in the example below:

After I enter the search keyword, it is displayed at the top of the screen (surround by quotation marks). If I do the right-click on that search term, I’ll find out that the entire Search: “sample page” is a single element h1.

Therefore, I will need to extract it and then strip all of the unnecessary parts.

Caveat: in my case, this solution will only work if visitors DO NOT translate my website. If they do, then “Search:” will also be translated to something different, therefore, the CJS variable will not work.

 

#5.1. A variable that returns the search page’s H1

First, let’s create a GTM variable that will pick the entire h1’s value. My hypothesis is that the element h1 with class archive-title is the only element on a page and using the CSS Selector h1.archive-title should be enough to pick that element (because if not, we will need to come up with a more specific way to pick that element).

To check that, open your browser’s JavaScript console and enter the command document.querySelectorAll(‘h1.archive-title’) and hit ENTER.

P.S. you will most likely see different CSS classes on your website, therefore, you will need to come up with a different selector. If you have no idea what is going on, consider joining my Intermediate/Advanced Google Tag Manager course.

Back to the JS console. How many results do you see there? If one, that’s good. If many, then you need to be more precise and update your selector.

In my case, I was lucky, and the h1.archive-title CSS Selector returned only one element on a page.

In GTM, go to Variables > New > DOM Element and enter the following settings:

Save the variable and enable the preview mode. Refresh the page with the search results and click on the DOM Ready event. Check the value of your DOM Ready variable. If it’s null, check whether you configured the settings of the variable exactly as I did.

 

#5.2. A variable that extracts the Search Query

In my example, the DOM Element Variable returns the Search: “sample page”. I need to get rid of Search: “ in the beginning and ” at the end.

Let’s create a Custom JS variable for that. I’ll show you everything step by step:

First, let’s create an anonymous function:

function() {

}

Then, let’s define the variable that will return the h1 (of our search page). This is not necessary but since I will be referring to it multiple times, that’s more convenient:

function() {
  var searchTitle = {{DOM - h1.archive-title}};
}

See that thing surrounded by {{ }}? That’s our DOM variable from the previous chapter. If you named it in a different way, then make sure you enter the correct name in the Custom JS variable’s code too.

Now, let’s make sure that this Custom JS variable returns the search query only if the DOM element actually contains “Search:”. We can do that with an IF statement.

function() {
  var searchTitle = {{DOM - h1.archive-title}};
  if (searchTitle && searchTitle.indexOf('Search:') > -1) {
     // something will happen
  }
}

If the Page Title (h1) does not contain “Search:”, then the variable will return undefined.

Then, let’s extract the actual search term from the Search: “sample page”. We are interested only in sample page. There are many ways to achieve this and I’m pretty sure the mine is not optimal but it still does the job.

First, let’s get rid of the Search: “ . I use replace() method for that where I locate Search: “ and replace it with nothing.

function() {
  var searchTitle = {{DOM - h1.archive-title}};
  if (searchTitle && searchTitle.indexOf('Search:') > -1) {
     var searchQuery = searchTitle.replace('Search: “','');
  }
}

After this is implemented, our CJS variable will return sample page” instead of Search: “sample page” but there’s still the quotation mark at the end. Let’s add one more replace().

function() {
  var searchTitle = {{DOM - h1.archive-title}};
  if (searchTitle && searchTitle.indexOf('Search:') > -1) {
     var searchQuery = searchTitle.replace('Search: “','').replace('”','');
  }
}

And finally, our Custom JS variable should return the new (fake) page path together with a search query parameter. If the search term consists of multiple words, the spaces between them will be encoded (thanks to encodeURI method).

function() {
  var searchTitle = {{DOM - h1.archive-title}};
  if (searchTitle && searchTitle.indexOf('Search:') > -1) {
    return searchTitle.replace('Search: “','').replace('”','');
  }
}

Now go to Variables > New > Custom JavaScript Variable and paste the abovementioned code. Name the variable cjs – search query.

If the H1 of the search page is Search: “google tag manager”, this Custom JavaScript variable will return google tag manager.

 

#5.3. Trigger

Let’s create a trigger that is fired when the aforementioned Custom JavaScript variable contains some value (in other words, when the search keyword element is visible).

In Google Tag Manager, go to Triggers > New > DOM Ready. Enter the following settings:

• Some DOM Ready events
• {{cjs – search query}} does not match regex (ignore case) ^(undefined|null|0|false|NaN|)$

{{cjs – search query}} is the name of the Custom JS variable that you have just created. It might be different in your case.

 

#5.4. Create a GA4 event tag

Go to Tags > New > GA4 event tag and enter the following settings:

• Event name: view_search_results
• Parameter name: search_term, value: the Custom JavaScript Variable that you have just created.
• Trigger: The DOM Ready trigger that you created above.

Caveat: in my case, this solution will only work if visitors DO NOT translate my website. If they do, then “Search:” will also be translated to something different, therefore, the CJS variable will not work.

 

#5.5. Test

First, let’s test with the GTM preview mode. Click the Preview button in GTM’s interface, then enter the URL of your search results page. After you are redirected, go back to the Preview mode’s page and click the most recent DOM Ready event on the left side of the preview mode. There you should see the GA4 event tag fired.

If yes, let’s test whether the data to Google Analytics was sent properly.

Go to GA4 DebugView. If needed, find your device (in the top left corner of the DebugView) and then check if you see the view_search_results page appear in the event stream. If yes, click it and check if the value of the search_term parameter is correct.

After you configure this successfully, read the next chapter of this article where I explain how to register custom dimensions.

 

Register Custom Dimensions in Google Analytics 4

If you want to use some parameters in GA4 reports, you will have to register them as custom definitions in the GA4 interface. This does not apply to standard parameters, like Page Title, but for some reason, parameters related to Enhanced Measurement still must be registered.

Hopefully, this will be changed in the future but right now you have to even register parameters such as search_term.

To do that,

go to Configure > Custom Definitions. Since we sent 2 custom parameters with the menu link click, we must register them both here.

Click Create custom dimensions and enter the following settings:

• Dimension name means the label of the dimension that you are going to see in the reports. It can be Site Search Term, search_term, or anything else.
• Scope – select Event
• Description. You can leave this field empty. This is a description for internal use.
• Event Parameter – here you must enter exactly search_term (it’s the parameter name that is sent with every view_search_results event)

If you are tracking more parameters (for example, q_gender from tracking option #1), you should register them too. Create all needed dimensions one by one and save them. After ~24 hours you will be able to start seeing/using custom dimension(s) in your reports.

Note: custom dimensions are not retroactive. If you sent the search_term parameter for 1 week and only then created a custom dimension in the GA4 interface, your reports will show data only from that moment when you registered a custom dimension. So, you should do that as soon as possible.

Note 2: I hope that in the future, these automatically tracked dimensions will not be treated as custom definitions and we won’t have to register them manually. Hopefully, this will happen in the future. So keep an eye on the changes in the GA4 interface.

 

Create a site search report in Google Analytics 4

Now, the last part in the site search tracking saga, reporting. The most basic report is available in All Events > view_search_results and then you will find a widget with the more popular search terms (or, you can also go to Engagement > Events > view_search_results).

But this is not customizable. So if you want to have more power, you’ll have to create a report in Analysis Hub.

In Google Analytics 4, go to Explore > Free Form

Here you will find 3 columns:

1. Variables
2. Tab Settings
3. and the actual output of the report.

In the Variables column, click the Plus icon in the Dimensions section and find search_term. Select it and click Apply.

Then drag search_term dimension to the Rows section. Remove any other dimensions that are in the Rows section. Clear any dimensions in the Columns section.

Then, in the Values section, add the Event Count metric (drag it from the Metrics section).

In the Filters section, enter the following condition: Event Name exactly matches view_search_results.

Done! You will now see the report and if you wish, you can add some additional metrics/dimensions/segments.

Also, you can change the date range in the top-left corner of the Analysis Hub.

 

Search with zero results

What if your visitor sees something like this when he/she enters a search term?

Let’s send an event to GA whenever this happens. First, we need to inspect that error message. In my case, it’s a div with class is archive-subtitle.

Let’s create a DOM element variable with the following CSS Selector div.archive-subtitle. Now, let’s create a trigger with the following settings:

By the way, the caveat here is the same as in the tracking method #5. If a visitor translates the page, this zero-search-results tracking will not work. Therefore, it is highly recommended to implement this with the help of a developer (and ask him/her to push the data to the data layer). Or try to find some other method, not DOM Scraping.

Back to the topic. Create a trigger that will be activated if the subtitle DOM element contains the words We could not find any results for your search.

Finally, let’s create a GA4 Event tag with the following settings:

Assign the previously created DOM Ready trigger to this GA Event tag.

With it, we will send the search query that returned 0 searches and will be able to quickly identify which search terms are worth our time to invest.

 

Track Site Search with Google Analytics 4 and GTM: Final Words

Hopefully, this guide will help you solve most of your challenges related to site search tracking with Google Analytics 4. Most often (based on my experience), you will deal with the regular search + query parameter and a search without query parameter (while the search term is still visible in the URL). In that case, the Enhanced Measurement in GA4 should handle it without any problems.

Got any other questions? Let me know.