Google Analytics Events and Tracking User-Entered Searches

[blackarmchair]

Alright, so I want to track user searches using Google Analytics and I have it about 99% of the way. I'm just missing something relatively small (I think my Javascript-fu isn't strong enough).

In HTML5 output the search button is expressed as a <div> with the class of "search-submit", if I open-up the page source of default.htm in a completed HTML5 build and add the following js to that div, the search event is tracked in google analytics:

Code: Select all

onclick="ga('send','event','Search','Search',document.getElementById('search-field').value);"

However, this is insufficient since it requires me to manually add something to the code each time I re-compile. I need something to add that click event to the search div automatically every time.

My idea for a solution is to use the toolbar.js file (the same one we use for custom buttons) to append that onclick handler to the "search-submit" div.

This is my best attempt at it:

Code: Select all

$('div[ class=search-submit ]').click( function(){ga('send','event','Search','Search',document.getElementById('search-field').value);});

However, it doesn't seem to work. I feel like there's something really small I'm missing.

Any ideas?

Thanks in advance!

[Ken Billing]

I don't have any wisdom to offer for your problem, but if you succeed in redefining the search-submit.click event, I'd like to learn how you did it. It might work to send the search criteria to a Google Custom Search Engine instead, which is my quest.

Good luck!

[blackarmchair]

It's frustrating because I'm so close!

The function works when you manually add the onclick attribute to the div element (like in notepad or something).

So it's just a matter of getting madbuild.exe to play ball.

[NorthEast]

Note that adding a click event to the button will not catch pressing enter; so you need to include this too.

The following jQuery should work - it'll display 'click' when you click the button, and 'enter' when you press the enter key.
Replace the alerts with a call to your function and try it out.

Code: Select all

$(document).ready(function(){

	$('div.search-submit').click(function(){ 
		alert('click'); 
	});

	$('input#search-field').keypress(function(event) {
        	if (event.keyCode == 13) {
	            alert('enter');
        	}
	});

});

There's good jQuery documentation on the jQuery site and W3Schools site, and plenty of these sort of examples on stackoverflow.

[NorthEast]

It might work to send the search criteria to a Google Custom Search Engine instead, which is my quest.

I'd suspect you'd need to use something like jQuery preventdefault to change and redirect the default action of the search box/button.

I would try Googling something like 'jquery redirect' with/without 'preventdefault'.

[blackarmchair]

Thanks! I got it to work.

For anyone interested in the solution, simply add this to the toolbar.js file in HTML5 builds:

Code: Select all

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');  ga('create', '########', #######.com');  ga('send', 'pageview');

$(document).ready(function(){

   $('div.search-submit').click(function(){ 
      ga('send','event','Search','Search',document.getElementById('search-field').value); 
   });

   $('input#search-field').keypress(function(event) {
           if (event.keyCode == 13) {
               ga('send','event','Search','Search',document.getElementById('search-field').value);
           }
   });

});

Just replace the ##### with your GA tracking code and website, respectively.

[sdcinvan]

Thanks! I got it to work.

For anyone interested in the solution, simply add this to the toolbar.js file in HTML5 builds:
...

Thank you, this is fantastic.

[sdcinvan]

It might work to send the search criteria to a Google Custom Search Engine instead, which is my quest.

I'd suspect you'd need to use something like jQuery preventdefault to change and redirect the default action of the search box/button.

I would try Googling something like 'jquery redirect' with/without 'preventdefault'.

And thank you for your help too, Dave!

[amy_silverman]

Dumb question (I'm sure), but where is the toolbar.js file? I've looked through my HTML5 build folder and cannot find this file.

[sdcinvan]

Dumb question (I'm sure), but where is the toolbar.js file? I've looked through my HTML5 build folder and cannot find this file.

Amy, not a dumb question at all.

First, toolbar.js is a javascript that is created when compiling HTML docs.

There are two ways to add scripts to toolbar.js:

1) The typical Flare way...
a) Within Flare, open your default HTML skin (i.e. DefaultHTML5):
b) Select the Toolbar tab
c) You will see a window, "Custom JavaScript to include in Toolbar page:"
d) Enter your script in there.
e) Save

2) The non-typical direct way:
a) Open the default HTML skin in your favorite text editor (I recommend NotePad ++) - i.e. DefaultHTML5.flskn
b) Scroll to the bottom (usually there) to the section, beginning with, "<Toolbar"
c) Enter your Javascript here
d) Save

Here is my example:

Code: Select all

 <Toolbar
    EnableCustomLayout="true"
    Buttons="Home|Print|ExpandAll|RemoveHighlight|Separator|TopicRatings|Separator|EditUserProfile|Filler|PreviousTopic|CurrentTopicIndex|NextTopic">
    <Script>window.onload = function() {
    $("#search-field").keyup(function (e) {
        if (e.keyCode == 27) { $("#search-field").val(""); }
    });
}

$(document).ready(function()
{$('head').append('<link rel="shortcut icon" href="Content/favicon.ico" type="image/x-icon" />');});</Script>
  </Toolbar>

BTW, mine includes two scripts:
1) To clear search window with ESC key
2) Include a favicon (image in browser tab)


BTW, when you have published, a brand-shiny-new toolbar.js file is created in approximately, this path: Output\~~ name ~~\~~ doc name ~~\Skins\Default\Scripts

[Ineffable]

Thanks! I got it to work.

Code: Select all

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');  ga('create', '########', #######.com');  ga('send', 'pageview');

$(document).ready(function(){

   $('div.search-submit').click(function(){ 
      ga('send','event','Search','Search',document.getElementById('search-field').value); 
   });

   $('input#search-field').keypress(function(event) {
           if (event.keyCode == 13) {
               ga('send','event','Search','Search',document.getElementById('search-field').value);
           }
   });

});

I had to edit two things:
- add http: to the Analytics URL (i.e., ######.com)
- opening apostrophe to custom URL after the Analytics identifier (i.e.., UA-#######)

http://www.google-analytics.com/analytics.js','ga'); ga('create', '########', '#######.com');

Great work. When I tested it using Analytics Real Time, I was impressed as I watched my gibberish search queries showing up in--surprise!--real time!

[jsandora]

For anyone interested in the solution, simply add this to the toolbar.js file in HTML5 builds:

Code: Select all

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');  ga('create', '########', #######.com');  ga('send', 'pageview');

$(document).ready(function(){

   $('div.search-submit').click(function(){ 
      ga('send','event','Search','Search',document.getElementById('search-field').value); 
   });

   $('input#search-field').keypress(function(event) {
           if (event.keyCode == 13) {
               ga('send','event','Search','Search',document.getElementById('search-field').value);
           }
   });

});

Just replace the ##### with your GA tracking code and website, respectively.

Is this solution for HTML5 only, or will it also work with WebHelp outputs?

[NorthEast]

Is this solution for HTML5 only, or will it also work with WebHelp outputs?

This is for HTML5 only, because the script refers to the search box in the HTML5 output.

You should be able to use the same technique for WebHelp though, as it also supports skin toolbar scripts. You'd need to modify the references to match the search box used in WebHelp; i.e. the references to div.search-submit, input#search-field, search-field.

The example also uses jQuery, which isn't included in WebHelp; so you'd need to include the jQuery.js file (or rewrite it in Javascript).

[techwriter31]

Just curious - has anyone tried the Custom Javascript toolbar/skin method with a Mobile output?

[techwriter31]

Let me start this off by saying that my Google Analytics knowledge is limited, so please bear with me! I just want to make sure I've got this right before proceeding.

Currently, I have the GA code embedded in my master pages, and we're able to track page views, etc. as expected. But I was told that we're not getting any results for the user-entered searches, and sure enough, we aren't! Typically, I believe we'd simply enable Site Search in GA and enter the query parameter. But with the Flare search feature, the resulting URL appears as "http://www.mysite.com/#search-xxxx", where xxxx is the search term that was entered. In this case, I believe it doesn't work because we don't have a query parameter that we can use. Is this correct, or am I way off?

Assuming the above is true, the workaround is to force GA to track the searches using the sample code in this post, by inserting it into the Custom Javascript portion of the skin file. In this case, I'm assuming I would *not* remove the existing GA code embedded in my master pages and would simply add this code to my skin file. Is this correct?

Many thanks in advance!

[NorthEast]

Assuming the above is true, the workaround is to force GA to track the searches using the sample code in this post, by inserting it into the Custom Javascript portion of the skin file. In this case, I'm assuming I would *not* remove the existing GA code embedded in my master pages and would simply add this code to my skin file. Is this correct?

Yes.

[techwriter31]

Thanks Dave! That clears things up.

[alien]

Does anyone know why this code would not work? We included it on our site and the analytics stopped; they started again when we removed this code. Any help is appreciated.

Thanks

[benjimenez]

Hi All. Great thread! I'm new to using GA but I think I have everything working except I'm not sure what to enter as the query parameter via GA. I'm trying #search- as my query parameter now. I'm not exactly sure where to see if it's working either. Any help here is much appreciated!

Update 1: Found the reporting page. Still figuring out the query parameter...
Update 2: Tried turning off site search via GA and only use the javascript in this thread but still no luck...
Update 3: It works! In the end, I think I was just looking at the wrong report section in GA. I was busy looking at the Site Search section when the results are apparently in the Event sections of GA--obviously! However, I only saw my "search events" in the Real-Time section. They did not appear in the Behavior>Events section yet.
Update 4: Wanted to add a bit more info for others who are embarking on this task. My HTML5 help is on HTTPS, so as one commented on this thread about adding http to the analytics.js URL, it was not the case for me. I kept the default code, '//www.google.../analytics.js'... Also, I used the same default tracking code that GA provides on the lines before the custom JavaScript, which the OP provided.

Code: Select all

//Google provided this code, where the first ####### is your tracking ID, as OP explained. 

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

/**Google provided the 'auto' in this code (I'm not sure if everyone gets the same tracking code), but 
it's replaced by your help URL, e.g. my.help.com. I think leaving 'auto' could probably work without replacing it with your URL but I didn't try it.**/

			ga('create', '#######', 'auto');
			ga('send', 'pageview');

/**OP's custom code, which I believe sends the click or enter key event along with the value (text) entered in the search box ('search-field') to GA.**/

$(document).ready(function(){

   $('div.search-submit').click(function(){ 
      ga('send','event','Search','Search',document.getElementById('search-field').value); 
   });

   $('input#search-field').keypress(function(event) {
           if (event.keyCode == 13) {
               ga('send','event','Search','Search',document.getElementById('search-field').value);
           }
   });

});

Hope that helps some other GA lost souls Thanks OP!

[theldt]

This sample code is exactly what I need, but I'm unsure where it belongs. Does it go in the script section of the skin file, the master page, or toolbar.js?

Also, do I turn off search tracking on Google Analytics, or do I need to turn it on and enter some kind of query string?

Thanks!

[benjimenez]

This sample code is exactly what I need, but I'm unsure where it belongs. Does it go in the script section of the skin file, the master page, or toolbar.js?

Also, do I turn off search tracking on Google Analytics, or do I need to turn it on and enter some kind of query string?

Thanks!

From what I recall, turn off search tracking and no need for query string because you're tracking events. I think I have in both places, toolbar.js and master page.

[ghillerson]

I'm confused from reading this thread, at least partially because I don't know what is up to date, especially for those of us using a topnav project.

I've got the google-provided analytics function on my master pages, which works. I now want to add search tracking.

I see the function on this page, and it's straightforward enough, but I'm not clear about these:
1. Should I move my ga script (the '(function(i,s,o,g,r,a,m)' script) from my master pages to the toolbar scripts?

2. Should I also add the jquery $(document).ready(function()) from near the bottom of this thread to my toolbar scripts?

Thanks in advance,
Gary

[NorthEast]

I see the function on this page, and it's straightforward enough, but I'm not clear about these:
1. Should I move my ga script (the '(function(i,s,o,g,r,a,m)' script) from my master pages to the toolbar scripts?

2. Should I also add the jquery $(document).ready(function()) from near the bottom of this thread to my toolbar scripts?

This thread was for the tripane skin (before top nav existed), and in the top nav skin there is no Toolbar tab or 'toolbar script'.

You should add the full script (as posted by Ineffable) to your master page.
Either include the script inline, or as a link to a js file.

I haven't tested it, but the search box tags it hooks onto are the same in both tripane and top nav (div.search-submit, input#search-field).

[ghillerson]

Thanks, Dave. I thought that was true, nice to have confirmation.

[roboHAL]

As a former Pulse user, I know user entered search data was available via one of the reports. I'd be curious to know if google analytics is truly "free" and/or if there is any Pulse user who also happens to use google analytics and has compared results.