Why you should monitor your internal site search queries and how do that with Google Analytics

Posted by SolidShops on November 20, 2012 at 11:00 AM

This post is mainly about the technical aspect of configuring internal site search queries using Google Analytics (GA). It describes how to link your internal site search queries using both a query parameter and a user friendly/clean URL.

Internal site search analytics provide useful insights about what a visitors of a website or webshop expects. There’s a ton to be learned from the internal site search and it can provide cheap and easy indicators on how to improve a website. It might show that certain content is unable to be found, even if it’s present or it might be an indicator for certain products that are trending.

I recommend reading this article by Louis Rosenfeld on Smashing Magazine as a more in-depth introduction to why it’s helpful to start monitoring internal site search results.

Setting up GA site search using a query parameter

I’m assuming you are accustomed to working with GA, so we’ll dive right into it. In the admin panel of the GA account there is a section called Site Search Settings. This section is used to link the search queries to the GA account.

GA assumes that the internal site search uses a GET variable to process the search query, so an internal site search page URL would have to look like this: http://www.domainname.com/search.php?q=Hannah+Williams+And+The+Tastemakers

By defining the query parameter, GA will look for all the URLs containing the q GET variable, because the value of that q variable, in this case “Hannah Williams And The Tastemakers” is what a visitor has searched for. The variable q can be anything as long as the search GET variable occurs in the URL.

Setting up GA site search using user friendly (or clean) URLs

User friendly URLs have a trade off: GA isn’t able to look for a certain query parameter because the search query looks like this: http://www.domainname.com/search/Hannah+Williams+And+The+Tastemakers There is no GET variable, so how can this URL be linked to the GA internal site search system?

The GA API allows to override the actual URL with a manually constructed URL. Below is how to do it in SolidShops, but basically it can be done in any CMS or framework and in any programming or scripting language.

How to configure GA site search using SolidShops

Having made good use of the SolidShops framework, it means a Google Analytics partial (or objects) was created and included in all the templates (or pages) of the shop. That way, if any adjustments are made to the partial it will be applied to all the pages of the shop where the partial has been included.

The code of the GA partial will more or less look like this:

<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-11111111-1']);
 _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>

Now, using the SolidShops template language it is possible to overwrite the URL that is passed to GA with a custom URL. In order to do this, the _trackPageview variable needs to be overwritten with the custom URL as an additional argument. Make sure this overwriting only happens when a visitor is on a search page, if not it could seriously mess up the GA statistics.

In code this would look like this:

<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-11111111-1']);
 _gaq.push(['_trackPageview']);
 
 {% if solid.getUrlsegment(1) == 'search' %}
 _gaq.push(['_trackPageview', '/search/index.php?q={{ solid.getUrlsegment(2) }}']);
 {% endif %}

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
</script>

The if-loop makes sure that the URL overwriting only occurs when the visitor is on the search section. Next, create the custom opt_pageURL argument. The opt_pageUrl argument has to start with a “/”. The search path isn’t necessary, because GA will automatically categorize any URL containing a query parameter as a search URL, but it keeps things consistent.

The same goes for index.php: it isn’t necessary and can be any extension or filename you want or can even be omitted, but again, it’s there for the sake of consistency. Note that the the domain of your URL will be added automatically.

Add the GET variable by using the “?” to indicate the start of the GET array, then add the query parameter q followed by a “=” and finally add the actual search query. In SolidShops the search query is the second URL segment (i.e. http://shopname.solidshops.com/search/beer%2goggles).

Don’t forget to add the trailing colon to close the string. Additional information about the _trackPageview or any other GA method can be found on the GA API documentation page.

The final step is to change the configuration in GA as described in the “Setting up GA site search using the query parameter”-section earlier in this article and you’re done. Happy analyzing!

Posted in Releases