Overview
It is obvious that if you have a WooCommerce shop then you want to learn about your customers and what they are doing on the shop pages as much as possible.
In this topic we will learn how to track users' search queries with the help of Google Analytics site search. With its help it is possible to find all users' search queries right from GA dashboard.
Setting Up Google Analytics Site Search Tracking
1. First of all make sure that GooGle Analytics is installed and properly configured on your site. If all is fine here then proceed to the next steps.
2. Login to Google Analytics dashboard and choose the site in which you’d like to enable site search tracking.
Choose needed website view
3. Inside this website view click the Admin option.
Admin option
4. Click on View Settings under the View column.
GA admin columns
5. Scroll down and find Site Search Tracking option. Turn it on.
Then find Query parameter option and set string s for it.
Also check Strip query parameters out of the URL option.
Site search tracking option
6. All is set. Now you are able to see site search tracking reports. Of course, first you need to collect some data so GA can show it to you.
After just go to Behavior » Site Search page to view all available data related to your shop search queries.
GA site search page
GA Site Search Tracking for AJAX search results
It is not so hard to enable GA site search tracking for standard WooCommerce products search. The problems can come out if your store has a search form with AJAX search results.
Default behavior of GA site search tracking is to look inside the current page URL and find the corresponding search query parameter that was specified for Query parameter option ( s for WordPress search ).
But with AJAX search results the page doesn't reload and there are no any query parameters. So one of the ways to handle such AJAX searches is to programmatically send a GA page view with a search query on each AJAX response. Just if this response was on the separated pages. Code can look like that:
ga('send', 'pageview', '/?s=mykeyword');The major problem here is to call this line of code on each AJAX search request.
Each AJAX search plugin uses different WordPress AJAX actions with a unique set of parameters, so it is not possible to properly handle all of them and create some script that will work for all AJAX search plugins.
But we can come from the other side and catch such search requests on frontend when users just type something in the search box. It can be done with very simple js code.
So the idea is to look for inputs inside form HTML element with role="search" and also for input element with type="search". We use these two selectors to cover more search forms, because some of them can have input elements with type="text" or form without role attribute.
So to make a thing work just use the following javascript code:
jQuery(document).ready(function ($) {
'use strict';
var $searchField = $('form[role="search"] input, input[type="search"]');
var keyupTimeout = '';
var searchTimeout = 300;
$searchField.on( 'keyup input', function(e) {
if ( e.keyCode != 40 && e.keyCode != 38 ) {
var searchFor = $searchField.val();
searchFor = searchFor.trim();
searchFor = searchFor.replace( /<>{}[]/]/gi, '' );
searchFor = searchFor.replace( /ss+/g, ' ' );
if ( searchFor !== '' ) {
clearTimeout( keyupTimeout );
keyupTimeout = setTimeout( function() {
var sPage = '/?s=' + encodeURIComponent( 'ajax-search:' + searchFor );
if ( typeof ga !== 'undefined' && ga !== null ) {
ga( 'send', 'pageview', sPage );
}
}, searchTimeout );
}
}
});
});
Note that it is necessary to load the jQuery library for proper work.
So the script does the following: watch form search form input tag. When user paste or write something - wait for 300 ms ( to not to send to GA every character of search query ), make sure that search query is not empty and send it to GA as page view with s query parameter and search terms that is started with ajax-search: to understand that it is AJAX searches.
So when script the is implemented and some data is collected, just open GA website dashboard -> Behavior -> Site Search page. Here you can see all available search terms. AJAX searches will have ajax-search: string in the beginning of the search term.
AJAX search terms inside GA dashboard
To make things even easier, we created a WordPress plugin that implements GA site search tracking for AJAX searches. It is a simple plugin that contains the js script that was mentioned above and some code to place this javascript inside website pages. Download plugin.
So here are steps to enable Google Analytics site search tracking for AJAX search forms:
1. Follow all steps from the Setting Up Google Analytics Site Search Tracking chapter.
2. Download plugin for AJAX searches tracking.
3. Install it by going to WordPress dashboard -> Plugins -> Add new. Click on Upload Plugin button, choose and upload previously downloaded plugin archive. After installation, activate the plugin.
4. Done. Collect some data and visit GA dashboard to make sure that all search terms are processed in the right way.
GA search tracking with Advanced Woo Search plugin
Advanced Woo Search plugin provides the features to search for WooCommerce products in both ways: AJAX search results and search results page. The most important thing is that it has built-in integration with Google Analytics. This means that all users searches, no matter how they were performed, will be properly collected via GA Site Search Tracking.
Enabling GA Tracking
Enabling GA tracking for Advanced Woo Search plugin is very easy and takes only few steps:
1. Follow all steps from the Setting Up Google Analytics Site Search Tracking chapter.
2. Open Advanced Woo Search settings page -> General tab and find Use Google Analytics option. Turn it on.
Google Analytics option for AWS plugin
With these two steps all preparation is over. Now GA search tracking is set up and you must start to receive corresponding data.
All search history can be found under Behavior » Site Search page inside GA dashboard for related websites.
GA site search page
In this report AJAX searches and those that were performed on separate pages are divided. AJAX searches inside the report have ajax-search: string in the beginning ).
Enabling Site Search Categories
Also, with the PRO plugin version it is possible to group search terms in categories. Inside GA dashboard these groups will be called categories, but for AWS PRO it is search form filters.
So it is possible to create several filters inside one search form. For example, we have an electronic store and it is needed to divide search results into categories like Phones, Laptops, Photo, etc. And we want to track searches that were performed for this of these categories.
Here is a steps to do that:
1. Create several filters for your search form. To do that open plugin settings page and choose the needed search form. Then go to the Search Results tab.
2. At the very top of this page you can find the table with all active filters for the current search form. By clicking on Add new filter button it is possible to add a new search form filter. Also you can copy, edit or delete any available filter by clicking on the corresponding button near each filter inside the table.
Table of filters for current search form
So just create as many search form filters as you need. In this example we created filters Phones, Laptops and Photo. Filter name can be edited via Filter name option.
3. When all filters are created, we can proceed to customization of each of them. For each filter it is possible to set a unique set of options related to search results. For example, display some product related information, set search results layout, change search behaviour.
For newly created filters we will limit each filter to search for products only inside one corresponding product category. For example, Photo filter will search only for products inside Photo category. The same goes for other ones.
To limit search to specific categories just find Exclude/include products section. Set Filter relation to Include and for Filter option set following settings:
Product Category -> Category to limit search results.
Search only inside one specific product category
Do this for all created filters.
4. Search form filters are created and must be visible inside shop pages.
Search form filters
Shop visitors are now able to search for any products in the store and also use filters to search only inside specific products categories.
5. The last step is to enable site search categories feature for GA. Open Admin -> View Settings page and find Site search categories option. Turn it on.
For Category parameter option set awscat string.
Site search categories option
6. So all options are properly configured and search terms data must start to collect inside GA. Visit Behavior -> Site Search page to view dashboard with search terms.
Inside it you can also see search categories. It is the search form filter that was previously created. They must be named like Filter:All, Filter:Photo, etc. You can find how many searches were performed with each of the created filters and check the statistics of search terms for every filter individually.
GA site search categories
Custom GA events for search queries
Additionally, when the GA tracking option is enabled, Advanced Woo Search sends some custom events to GA.
Events for search queries has following parameters:
Event Category = AWS search
Event Action = AWS Search Term
Event Label = {search query terms}
To view these actions open Google Analytics website view -> Behaviour -> Events tab. Find AWS search event category and click on it to view all data related to AWS plugin search terms.
AWS plugin custom events for GA
Comments