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

Phew, 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.

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 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.

Google Tag Manager URL Fragment

 

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

Google Tag Manager URL Fragment

 

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.

You_searched_for_test_-_dcarlbom_com

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!

window.location.search GTM

 

Just to illustrate what we actually are viewing:

javascript console

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 v2

Since the update to Google Tag Manager V2 it’s not very easy to find the old trusty “Document Path” we’re accustomed with in Version 1, but just keep in mind that you can always have a look at the analytics.js field reference to see what kind of data you can actually push.

This shows us that what we’re looking for here is page and that’s the field we want to set as below.

Document Path in GTM

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:

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.

Tell your friends...Share on Facebook6Tweet about this on TwitterShare on Google+0Share on LinkedIn12