is_page ) { $cat = is_front_page() ? 'Front' : 'Page'; } elseif ( $wp_query->is_home ) { $cat = 'Home Page'; } elseif ( $wp_query->is_single ) { $cat = ( $wp_query->is_attachment ) ? 'attachment' : 'Blog Post'; } elseif ( $wp_query->is_category ) { $cat = 'Category'; } elseif ( $wp_query->is_tag ) { $cat = 'Tag'; } elseif ( $wp_query->is_tax ) { $cat = 'Taxonomy'; } elseif ( $wp_query->is_archive ) { if ( $wp_query->is_day ) { $cat = 'Day Archive'; } elseif ( $wp_query->is_month ) { $cat = 'Month Archive'; } elseif ( $wp_query->is_year ) { $cat = 'Year Archive'; } elseif ( $wp_query->is_author ) { $cat = 'Author'; } else { $cat = 'Archive'; } } elseif ( $wp_query->is_search ) { $cat = 'Search'; } elseif ( $wp_query->is_404 ) { $cat = '404 Page'; } return $cat; } ?>

Rewrite a fragment based URL with Google Tag Manager for better Site Search in Google Analytics

hew, that is possibly the longest title I’ve ever written, but there’s always a first for everything. Today we are going to have a look at a scenario where I found the URL used while doing a site search on a site wasn’t really optimal to push into Google Analytics.

In my case, the URL looked something like this after performing a site search on the site.

www.domain.com/search/?query=foobar#tab=subcategory

I of course wanted to push this data as a Site Search query into Google Analytics but also take the actual category as a parameter. After some initial discussion with the clients IT departement they figured that they had to rewrite the entire search function which would take a lot of time. This is what I did in order to solve the issue directly in Google Tag Manager instead.

There is a possibility inside Google Analytics to not only insert the actual search query parameter, but also the Site search categories to segment the data even more. And segmentation is what really matters, you know that by now right?

Site Search Settings in Google Analytics

Under the View settings in Google Analytics, you can activate both the Query parameter as well as the Category parameter, and since this client actually had the category parameter in the URL, but have opted in using it in the fragment part (after the #) I thought that, hey! why not make use of that?

Let’s work the variables in Google Tag Manager

First of all, we need to extract the actual fragment part of the URL and store it in a macro variable inside GTM.

Creating a URL Fragment in Google Tag Manager

Start by creating a new variable in GTM and select the URL as Type.

Configurating the Fragment Variable in Google Tag Manager.

Then select Fragment as the Variable and give it a proper name. Click Create Variable.

I opted to name mine URL Fragment, which means that I can get get its value from {{URL Fragment}} inside any Tag or Trigger inside Google Tag Manager. I just love the simplicity here, don’t you?

This means that when I’m navigating to e.g. to http://dcarlbom.com/?s=test#tab=bacon , this is what the variable will hold.

URL Fragment Variable shown in the dataLayer in Google Tag Manager.

So, what this mean?

It mean that we can use this variable inside Google Tag Manager to do basically whatever we want with. And in our case we want to use it to push a virtual pageview into Google Analytics simulating an actual site search query with a category parameter.

In order for this to work, we also need to store the actual search query part of the URL as well, and there’s a very nifty global Javascript variable for just that, namely window.location.search

So, let’s store that in another macro we can use!

Creating the document search custom variable in Google Tag Manager.

Just to illustrate what we are actually viewing:

I just opened the Javascript Console and typed in document.URL  and it returns the actual URL in the browser window.

If I then type in window.location.search  it will result in the actual search query string we’re after. In our case right now, this is all there is. In some cases this query string can contain a lot more information and this is where your Regex knowledge will come in very handy.

With these variables in place, let’s create that virtual pageview we need and send it to Google Analytics.

Setting the Document Path i GTM

Google Analytics has a lot of different data you can push to it, and I always keep the handy analytics.js field reference close by.

Look in the field reference we see that the data we want to push into Google Analytics is page.

Creating the tag we need for the custom URL Fragment data in Google Tag Manager.

The Value above equals to: {{url path}}{{document search}}&{{URL Fragment}}

  1. Given that we know that the {{url path}}  is equal to ‘/’
  2. {{document search}}  equals ?s=test
  3. {{URL Fragment}}  equals tab=bacon

The resulting URL we create in this example is as follows:

/s=test&tab=bacon

And that’s a URL we can actually push into Google Analytics from GTM in order to get both the search query and the search category, and not having to involve the clients IT department saving the client loads of time and money.

Just make sure to trigger this Tag based on a search being made so that it doesn’t trigger on every pageview. In my case I just used the ?query= part as a trigger for this Tag and made sure that I also had this as a blocking rule on the original one. An ugly workaround for now, but it works.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Try Jasper AI (Free Trial)

Create amazing blog posts and marketing copy using extremely well performing templates.
Get original content 10X faster with AI.

© 2023 Daniel Carlbom