Skip to content

Instantly share code, notes, and snippets.

@tomdavies
Created Nov 29, 2012
Embed
What would you like to do?
ExpressionEngine Google Analytics Site Search

Google Analytics Site Search

New GA.js script allows to track EE searches

Google updated their Analytics code from their former Urchin script (urchin.js) to their own Google Analytics (gs.js) that now allows to track:

  • Site Search (e.g EE site search)
  • Events (e.g file downloads) (still in closed beta Jan.11.2008)

Preparation

  1. Set up a Google Analytics(GA) account for your site (follow instructions, make sure to use the new ga.js code!

And add the tracking code on all EE pages (I used a Global Variable in the footer part of my templates).

  1. Activate the GAnalytics Site Search function as per official google guide here, or use this easy to follow blog post.

Challenge

GA looks for URL encoded search strings, but EE uses POST to send its search (not URL encoded). So the setup part after “Query Parameter” seems to be somewhat moot…

Solution

1)(Still) Set up the GA “Query Parameter”

You can use any parameter of your choice. I used the standard google “q” as the q=Expression+Engine in:

http://www.google.ca/search?hl=en&q=Expression+Engine 

So just enter a single “q” and save.

2) Manually record search result hits

Enter your EE-CP and go to your “Search Results” template (most likely found under search/results). On this page we need to modify the GA code, so if you used a Global Variable you need to replace it with the actual code

Instead of tracking the page using the standard GA script call

pageTracker._trackPageview(); 

We generate a hit on a “virtual” URL, i.e GA lets you make up an URL and register a page view for that URL. This is done by exchanging the standard call (above) with:

pageTracker._trackPageview('/search?q={exp:search:keywords}'); 

(note the EE-tag {exp:search:keywords} only works on the search results page)

Now, after someone searched for: “best CMS” using EE search we generated a GA hit for the “virtual” page: “www.yourdomain.com/search?q=best CMS”. And since we told GA to look out for search term after the Query Parameter: “q”, the search is tracked.

The reason we want this is that GA has a separate search tracking module

Further Issues

  • Case sensitivity: GA tracks cmS, CMS or Cms as different searches.
  • Term separation: GA converts spaces to ; but turns + into a space. E.g “...q=Best CMS” is recorded as Best CMS whereas “...q=Best+CMS” is recordes as “Best CMS”
  • HTML entities: apostrophes may be encoded as ' which will look like a separate query param to GA. This makes e.g. the word “don’t” appear as “don” in GA.

JS solution

Use JS to convert the EE output before generating the virtual URL page hit:

...
terms='{exp:search:keywords}';
searchterms=terms.toLowerCase().replace(/\s/g,'+');
var div = document.createElement('div');
div[removed] = searchterms;
var decoded_searchterms = div.firstChild.nodeValue;
pageTracker._trackPageview('/search?q='+decoded_searchterms);
... 

assign keyword string to JS variable terms, then convert string to lower case (toLowerCase) and replace “space” with “+” (RegEx) before generating page hit.

Final ga.js Code

Note: it should be document dot write not d.write, but the WIKI won’t allow that.

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  d.write(unescape("[removed][removed]"));
</script>

<script type="text/javascript">
  var pageTracker = _gat._getTracker("UA-XXXXXX-X");
  pageTracker._initData();
  terms='{exp:search:keywords}';
  searchterms=terms.toLowerCase().replace(/\s/g,'+');
  var div = document.createElement('div');
  div[removed] = searchterms;
  var decoded_searchterms = div.firstChild.nodeValue;
  pageTracker._trackPageview('/search?q='+decoded_searchterms);
</script> 

Tracking keywords if there is no match

If there is no results to a keyword search redirect to a different template page, in this case noresults:

{exp:search:simple_form search_in="everywhere" no_result_page="search/noresults"} 

Use the same code Final GA.js code as above however you may wish to change the pageTracker code to differentiate between searches that had results had searches that had no matches.

pageTracker._trackPageview('/search_noresults?q='+searchterms); 
@mycroquet

This comment has been minimized.

Copy link

@mycroquet mycroquet commented Mar 22, 2018

Why does the [removed][removed] print out to the page when this code is implemented?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment