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=subcategoryI 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?
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.
Start by creating a new variable in GTM and select the URL as Type.
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.
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!
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.
The Value above equals to: {{url path}}{{document search}}&{{URL Fragment}}
- Given that we know that the {{url path}} is equal to ‘/’
- {{document search}} equals ?s=test
- {{URL Fragment}} equals tab=bacon
The resulting URL we create in this example is as follows:
/s=test&tab=baconAnd 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.