How to track website searches in WordPress with Google Tag Manager

tag manager dashboard

Recently, we were lucky enough at Twentyone to be able to attend the Search Leeds conference, coming back with several key insights into some of the things happening in the digital marketing industry.

One of the most interesting talks we saw was from Stephen Kenwright at Branded3, who emphasised the importance of tracking your website searches.

Stephen explained that by tracking what people are searching for on your website, you can get crucial insights into your audience and what they are looking for. Most importantly, you can see how well your website performs as its own search engine.

For example, you can see how relevant the search results are to a user’s query, or find out which searches return ‘not found’ results. This is a key thing to be aware of, as dead-end searches like this can affect bounce rates on your website, ultimately affecting user engagement.

Tracking website searches in WordPress without plugins

We thought that Stephen’s point about tracking dead-end website search queries would be particularly useful for some of our own clients. Stephen’s slides note that it’s possible to do this via Google Tag Manager (GTM), so we quickly got to work on implementing this on some of our clients’ search-enabled Wordpress websites.

At Twentyone, we regularly use Google Tag Manager as part of our SEO and Conversion Rate Optimisation services to help us understand aspects like user engagement, as well as to improve goal tracking. We’ve previously written about the benefits of Google Tag Manager, but since we know there’s very little resource available around the implementation of search tracking for WordPress in GTM, we’ve decided to write this handy step-by-step guide for you.

A step by step video guide to setting up WordPress website search tracking with GTM

To set up website search tracking in WordPress with Google Tag Manager, you need to follow these 6 simple steps:

  1. Modify the search.php file in WordPress.
  2. Create a new variable type of ‘Dom Element’ in GTM.
  3. Create a new variable type of ‘URL’ in GTM.
  4. Create a new variable type of ‘Lookup Table’ in GTM.
  5. Create a new trigger type of ‘Dom Ready Page View’ in GTM.
  6. Create a tag type of “Universal Analytics’ in GTM.

Step 1. Modifying the search.php file in WordPress

First we need to capture whether a result was found or not for the performed search on your website. We do this by creating an identifier on a page element of the search.php file within your website theme, which is then used to display the returned results:

  1. Using an FTP client (we use FileZilla or Transmit on Mac), locate the search.php file in your WordPress theme, for example /wp-content/themes/<yourtheme>/search.php.
  2. Find the line of code which returns the message when no results are found. It’s normally something like: <p><?php _e( ‘Sorry, but nothing matched your search terms. Please try again with some different keywords.’, ‘twentyseventeen’ ); ?></p>.
  3. Change this line to: <p id=”no-search-results’‘><?php _e( ‘Sorry, but nothing matched your search terms. Please try again with some different keywords.’, ‘twentyseventeen’ ); ?></p>.

Step 2. Create a new variable type of ‘Dom Element’ in GTM.

Next we need to create a variable with the ‘type’ of ‘Dom Element’ in Tag Manager for the identifier we created in Step 1:

  1. Create a new variable type of ‘Dom Element’.
  2. Choose ‘css selector’ as the selection method.
  3. In the element selector type the name of the id you gave to the search.php file in step 1 e.g #no-search-results.
  4. Name the variable as ‘Search Result’.

Step 3. Create a new variable type of ‘URL’ in GTM.

Next we need to capture the search that the user entered into the search box on your WordPress website. When performing a search on a WordPress site you are redirected to the search results page and the search query forms part of the url parameters of the results page. So, for example if we searched for ‘widgets’ on a website with the domain of www.mydomain.com then we would be presented with the search results at a URL of: https://www.mydomain.com/?s=widgets. So, we just need to capture the query after the ‘/?s=’ by doing the following:

  1. Create another new variable with a type of ‘URL’.
  2. Choose component type’ of ‘Query’.
  3. In the query key type ‘s’.
  4. Name the variable as ‘Search Query’.

Step 4. Create a new variable type of ‘Lookup Table’ in GTM.

Next, we need to capture whether the search query by the user returned with ‘Results’ or ‘No Results’ and we need to use this as our ‘Action’ when setting up the Tag.

As discussed in Step 1, when a user searches on a WordPress site and there are no results to return, the WordPress search page displays a default message of something like “Sorry, but nothing matched your search terms. Please try again with some different keywords.”. Obviously, we need to simplify this as all we really need is a value such as ‘No Results’ as the ‘Action’ in Tag Manager:

  1. Create a new variable type of ‘Lookup Table’.
  2. In the input variable select the {{Search Result}} we created in Step 2.
  3. In the input click ‘+ ADD ROW’ and type in the default message that your website shows for no results e.g ‘Sorry, but nothing matched your search terms. Please try again with some different keywords.’.
  4. In the output type ‘No Results’.
  5. Check the ‘Set Default Value’ box and enter ‘Results’ as a value.
  6. Name the variable ‘Search Value Results’.

Step 5. Go to Triggers and create a new trigger type of ‘Dom Ready Page View’.

Before we piece it all together and create a Tag, we need to create a trigger that specifies which webpage to trigger the tag on. In this case, we want this Tag to trigger on the WordPress search results page.

  1. Go to Triggers and create a new trigger type of ‘Dom Ready Page View’.
  2. Set the trigger to fire on ‘Some DOM Ready Events’.
  3. Set the options to trigger on a ‘Page URL’ that ‘starts with’ and finally type in your default search results page url. For example ‘https://www.mydomain.com/?s=’.
  4. Save the trigger as ‘Search Results Page’.

Step 6. Create a new tag type of ‘Universal Analytics’ in GTM.

Now we need to put it all together and build the Tag.

  1. Create a new tag type of “Universal Analytics’.
  2. Set track type to ‘Event’.
  3. In category type ‘Search Used’.
  4. Set the action to the variable we created named {{Search Value Results}} in step 4.
  5. Set the label to the variable we created named {{Search Query}} in step 3.
  6. Set it to trigger on the ‘Search Results Page’ trigger we created in step 5.

That’s all there is to it!

Once you’ve submitted and published the trigger, you can then test it by going to ‘preview’ mode Tag Manager and performing a search on your website.

Typically, we also create an ‘event goal’ in Google Analytics with a category equal to ‘Search Used’, so that we can monitor this as a conversion in GA.

 

By following these simple steps, you can easily monitor the way your website users are engaging with the search functionality on your website. You can report on queries that return ‘No Results’ and use this data to make informed marketing decisions. For example, if you have an ecommerce website and people regularly search for a product that you don’t stock, then you might decide to find a supplier of that product and add it to your inventory. Equally, you can identify regular searches on your website which might suggest that people are finding it difficult to find certain items, which might indicate you need to look at the structure and UX of your website.

If you have any questions or need any more help or assistance, don’t hesitate to get in touch with us! You can give us a call on 01254 660 560, or email us at hello@twentyone.agency. Let’s talk!

By | eCommerce, News, SEO | 26th Jun, 2017

Technologies We Work With
  • Magento
    Magento
  • WordPress
    WordPress
  • WooCommerce
    WooCommerce
  • OpenCart
    OpenCart
  • MailChimp
    MailChimp
  • Google Ads
    Google Ads