Google Analytics Events and Tracking User-Entered Searches
-
- Propeller Head
- Posts: 85
- Joined: Wed Mar 05, 2014 10:22 pm
- Location: Near Santa Cruz, CA
- Contact:
Re: Google Analytics Events and Tracking User-Entered Search
Well, I'm not a Pulse user, but I've used analytics for a couple businesses for a long time. If you advertise on Google, analytics is free and works very well.
-
- Propeller Head
- Posts: 78
- Joined: Mon Aug 30, 2010 4:17 pm
Re: Google Analytics Events and Tracking User-Entered Search
Has anyone tried this in Top Nav skin? I think I found that the tags are not quite the same, but I could be wrong. It looks like input id is not used but input class is used.Dave Lee wrote:
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).
Code: Select all
<input class="search-field needs-pie" type="search" placeholder="Search" />
Re: Google Analytics Events and Tracking User-Entered Search
Ah, I saw the same name, and didn't spot it was a class now instead of an ID.benjimenez wrote:I tried replacing getElementsById() with getElementsByClassName but it's not working. Any ideas would be truly appreciated!
What's your actual code?
Bear in mind that getElementsByClassName will return a collection of items (note it's getElements), whereas getElementById returns a single item. Assuming there is only one search bar on the page, you'd want to return the first item in the collection by using [0]; so I'm guessing you need to use:
Code: Select all
getElementsByClassName('search-field')[0].value
Re: Google Analytics Events and Tracking User-Entered Search
I've been looking at this in a bit more depth, and have come up with a different approach for HTML top nav skins.
When you run a search, the search results page will display the search term as a #search- in the location URL; e.g.
Search.htm#search-what you searched for
So, the next step is to run a script from the search results topic, which will get that search term and pass it to Analytics.
If you don't have your own search results topic, create a new topic (in your master page folder), and insert a search results proxy.
Then in my search results topic, I add a script which gets the #search- part of the location when (a) the topic loads, and (b) when the search term changes (i.e. the user enters a new search term whilst on the results topic).
When you run a search, the search results page will display the search term as a #search- in the location URL; e.g.
Search.htm#search-what you searched for
So, the next step is to run a script from the search results topic, which will get that search term and pass it to Analytics.
If you don't have your own search results topic, create a new topic (in your master page folder), and insert a search results proxy.
Then in my search results topic, I add a script which gets the #search- part of the location when (a) the topic loads, and (b) when the search term changes (i.e. the user enters a new search term whilst on the results topic).
Code: Select all
function sendSearchTerm() {
/* If current page has a #search-xxx parameter, then record it as a search for event */
if (location.hash.indexOf('#search-') > -1) {
/* get the search term, i.e. the bit after "#search-" */
searchterm = location.hash.split('#search-')[1];
/* send to Analytics as event with 'Search' category and 'SearchFor' action */
ga('send', 'event', 'Search', 'SearchFor', searchterm);
}
}
$(document).ready(function(){
/* send the search term when first open search results page */
sendSearchTerm();
/* when window hash changes (e.g. repeat search on results page), then check the hash for new a new search term */
window.onhashchange = sendSearchTerm;
});
-
- Propeller Head
- Posts: 78
- Joined: Mon Aug 30, 2010 4:17 pm
Re: Google Analytics Events and Tracking User-Entered Search
Thanks, Dave! I haven't forgotten about this just been going between this and other tasks. I still don't get the input id tag, but your alternative approach doesn't require that anymore. I'm just thinking how that impacts analytics.Dave Lee wrote:I've been looking at this in a bit more depth, and have come up with a different approach for HTML top nav skins.
For example, what if I want to track what pages on which users are clicking Search and what terms they're entering? I may have just answered my own question though. I think one can use Google Analytics (GA) to view the Event Flow and then see the Landing Page prior to the Event.
Do you have a screen shot or example of what the GA page would look like with your alt. approach? Also, this may throw off my history of Events because now it's not recorded as an Event Label, if I understand correctly.
Meanwhile, I submitted a support request about the input id tag.
Re: Google Analytics Events and Tracking User-Entered Search
My first try at this used the original approach which gets the search term from the input box. I got that working fine, it was just slightly more complex since a topic can have multiple search inputs with that same class name - e.g. Madcap's template home page will have an invisible search in the top nav, as well as the visible search bar proxy.
Anyway, I can post that solution if it'd be useful, as you could capture the search term with the page it's coming from.
In addition to this, I'm also trying to track when people have chosen a topic from the search results. I'm doing this by checking if a page location URL includes "?Highlight=xxxx", as that means the current topic was opened from the search results.
I've not yet figured out how to best send these events, as I'm an analytics novice. I'm just trying to suss out how to grab the data first, then work out the best way to record it!
Anyway, I can post that solution if it'd be useful, as you could capture the search term with the page it's coming from.
In addition to this, I'm also trying to track when people have chosen a topic from the search results. I'm doing this by checking if a page location URL includes "?Highlight=xxxx", as that means the current topic was opened from the search results.
I've not yet figured out how to best send these events, as I'm an analytics novice. I'm just trying to suss out how to grab the data first, then work out the best way to record it!
-
- Propeller Head
- Posts: 78
- Joined: Mon Aug 30, 2010 4:17 pm
Re: Google Analytics Events and Tracking User-Entered Search
This might be useful. Please share if you can. Thanks!Dave Lee wrote:My first try at this used the original approach which gets the search term from the input box. I got that working fine, it was just slightly more complex since a topic can have multiple search inputs with that same class name - e.g. Madcap's template home page will have an invisible search in the top nav, as well as the visible search bar proxy.
Anyway, I can post that solution if it'd be useful, as you could capture the search term with the page it's coming from.
Re: Google Analytics Events and Tracking User-Entered Search
This is the script - it's for HTML5 targets using a top nav skin, and will handle both the top nav search and search bar proxies.benjimenez wrote:This might be useful. Please share if you can. Thanks!Dave Lee wrote:My first try at this used the original approach which gets the search term from the input box. I got that working fine, it was just slightly more complex since a topic can have multiple search inputs with that same class name - e.g. Madcap's template home page will have an invisible search in the top nav, as well as the visible search bar proxy.
Anyway, I can post that solution if it'd be useful, as you could capture the search term with the page it's coming from.
It'll capture the search input when clicking the button or pressing enter.
The result is sent to Google Analytics as an event; with a category 'Search', action 'SearchFor', and the search term as the 'Label'.
Note that this script must be run by all topics (e.g. via master page), whereas the alternative solution above only needs to be run by the search results page.
Code: Select all
$(document).ready(function(){
/* FLARE SEARCH BOXES */
/* add event handler for when search button is clicked */
$('div.search-submit').click(function(){
/* get search term from input box (input.search-field), which related to -this- at parent sibling level */
var searchterm = $(this).parent().siblings('.search-field').val();
ga('send', 'event', 'Search', 'SearchFor', searchterm);
});
/* add event handler for when press Enter (key 13) in search box */
$('input.search-field').keypress(function(event) {
if (event.keyCode == 13) {
/* get search term from -this- input box (input.search-field) */
var searchterm = $(this).val();
ga('send', 'event', 'Search', 'SearchFor', searchterm);
}
});
});
Re: Google Analytics Events and Tracking User-Entered Search
This is the other script I'm using to track search results; i.e. what page people visit from the results.
If a page includes a 'Highlight' parameter, it sends the details to analytics as an event with action 'SearchResult', and label of the full topic URL.
It's not particularly refined, but it reveals the topic visited and the search term (Highlight) that the user entered; e.g.
.../Topic.htm?Highlight=my search term
If a page includes a 'Highlight' parameter, it sends the details to analytics as an event with action 'SearchResult', and label of the full topic URL.
It's not particularly refined, but it reveals the topic visited and the search term (Highlight) that the user entered; e.g.
.../Topic.htm?Highlight=my search term
Code: Select all
$(document).ready(function(){
/* If current page has a ?Highlight=xxx parameter, then record it as a search result event */
if (location.search.indexOf('?Highlight=') > -1) {
ga('send', 'event', 'Search', 'SearchResult', location.href);
}
});
-
- Propeller Head
- Posts: 78
- Joined: Mon Aug 30, 2010 4:17 pm
Re: Google Analytics Events and Tracking User-Entered Search
Very cool. I think GA handles this through the Event Flow metric. You might even be able to filter a certain Event Flow for a certain search keyword. That is to see what page is most commonly visited based on the search.Dave Lee wrote:This is the other script I'm using to track search results; i.e. what page people visit from the results.
-
- Propeller Head
- Posts: 78
- Joined: Mon Aug 30, 2010 4:17 pm
Re: Google Analytics Events and Tracking User-Entered Search
Just tried and works beautifully! Thank you!Dave Lee wrote:This is the script - it's for HTML5 targets using a top nav skin, and will handle both the top nav search and search bar proxies.
It'll capture the search input when clicking the button or pressing enter.
The result is sent to Google Analytics as an event; with a category 'Search', action 'SearchFor', and the search term as the 'Label'.
Note that this script must be run by all topics (e.g. via master page), whereas the alternative solution above only needs to be run by the search results page.
I'd be interested to know how you would track both the page and search term, as AFAIK you can only send one bit of information with the event (the label).Code: Select all
$(document).ready(function(){ /* FLARE SEARCH BOXES */ /* add event handler for when search button is clicked */ $('div.search-submit').click(function(){ /* get search term from input box (input.search-field), which related to -this- at parent sibling level */ var searchterm = $(this).parent().siblings('.search-field').val(); ga('send', 'event', 'Search', 'SearchFor', searchterm); }); /* add event handler for when press Enter (key 13) in search box */ $('input.search-field').keypress(function(event) { if (event.keyCode == 13) { /* get search term from -this- input box (input.search-field) */ var searchterm = $(this).val(); ga('send', 'event', 'Search', 'SearchFor', searchterm); } }); });
Re: Google Analytics Events and Tracking User-Entered Search
I've been messing around with this with no luck so far unfortunately. Here's how I set everything up:Dave Lee wrote: This is the script - it's for HTML5 targets using a top nav skin, and will handle both the top nav search and search bar proxies.
It'll capture the search input when clicking the button or pressing enter.
The result is sent to Google Analytics as an event; with a category 'Search', action 'SearchFor', and the search term as the 'Label'.
Note that this script must be run by all topics (e.g. via master page), whereas the alternative solution above only needs to be run by the search results page.
I'd be interested to know how you would track both the page and search term, as AFAIK you can only send one bit of information with the event (the label).Code: Select all
$(document).ready(function(){ /* FLARE SEARCH BOXES */ /* add event handler for when search button is clicked */ $('div.search-submit').click(function(){ /* get search term from input box (input.search-field), which related to -this- at parent sibling level */ var searchterm = $(this).parent().siblings('.search-field').val(); ga('send', 'event', 'Search', 'SearchFor', searchterm); }); /* add event handler for when press Enter (key 13) in search box */ $('input.search-field').keypress(function(event) { if (event.keyCode == 13) { /* get search term from -this- input box (input.search-field) */ var searchterm = $(this).val(); ga('send', 'event', 'Search', 'SearchFor', searchterm); } }); });
- Created an analytics.js file with the original Analytics code provided by Google AND the snippet of code provided by Dave above.
- Added a line to my master pages (all of them) calling that analytics.js file.
- Enabled "Site search Tracking" option for the property in Google Analytics, using #search- as the Query parameter (not sure if this is even necessary).
- I do NOT have a separate Search.htm topic set up in my project.
While I am able to track page views with this method, I don't seem to get any search data.
I tried walking through this thread a few times to see where I went wrong, but keep hitting dead ends. Any suggestions?
Software Documentation Specialist (but really, Tech Writer)
-
- Propeller Head
- Posts: 78
- Joined: Mon Aug 30, 2010 4:17 pm
Re: Google Analytics Events and Tracking User-Entered Search
@jsandora -- Quick thought on this: Have you tried adding the code in your master pages directly instead of in a JS file? It shouldn't make a difference ,but see if that works maybe?
Re: Google Analytics Events and Tracking User-Entered Search
Where have you added the link to the script?jsandora wrote:- Added a line to my master pages (all of them) calling that analytics.js file.
The script would need to be added in the body of the master page, not the head.
(That's because if it's in the head, it'll be loaded before jQuery, and this script uses jQuery.)
However, I'd suggest using my first method of tracking top nav searches from a search page, it's a much simpler solution.
You don't need to do this, just make sure the script is in the body and not the head.benjimenez wrote:@jsandora -- Quick thought on this: Have you tried adding the code in your master pages directly instead of in a JS file? It shouldn't make a difference ,but see if that works maybe?
Re: Google Analytics Events and Tracking User-Entered Search
I have the file call in the <head> of my masterpage. I'll keep that call there, but try moving your custom code to the <body> and see if that works.Dave Lee wrote: Where have you added the link to the script?
The script would need to be added in the body of the master page, not the head.
(That's because if it's in the head, it'll be loaded before jQuery, and this script uses jQuery.)
(@benjimenez: I use a .js file call in my masterpage because I have several help projects that use the same masterpages via global project linking, and I wanted to set them up as separate properties in Google Analytics. So the same generic file call is in the shared masterpages, but each project has its own analytics.js file containing a unique Analytics identifier.)
EDIT:
Here's the XML for one of my masterpages. Note the analytics.js call in the <head>, and Dave's search-tracking code in the <body>. Hope I set this up correctly ...
Code: Select all
<head>
<script src="../../Resources/Files/analytics.js">
</script>
<meta name="robots" content="noindex, nofollow" />
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" /><title></title>
<link href="../Stylesheets/SG_Stylesheet_HTML5.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script>
$(document).ready(function(){
/* FLARE SEARCH BOXES */
/* add event handler for when search button is clicked */
$('div.search-submit').click(function(){
/* get search term from input box (input.search-field), which related to -this- at parent sibling level */
var searchterm = (this).parent().siblings('.search-field').val();
ga('send', 'event', 'Search', 'SearchFor', searchterm);
});
/* add event handler for when press Enter (key 13) in search box */
$('input.search-field').keypress(function(event) {
if (event.keyCode == 13) {
/* get search term from -this- input box (input.search-field) */
var searchterm = (this).val();
ga('send', 'event', 'Search', 'SearchFor', searchterm);
}
});
});
</script>
Software Documentation Specialist (but really, Tech Writer)
Re: Google Analytics Events and Tracking User-Entered Search
Yeah, that should work fine.
However, I'd still suggest doing the tracking using my solution for the search results page instead (viewtopic.php?f=9&t=18356&p=120630#p119605).
However, I'd still suggest doing the tracking using my solution for the search results page instead (viewtopic.php?f=9&t=18356&p=120630#p119605).
Re: Google Analytics Events and Tracking User-Entered Search
Man, still no luck with my setup. I either don't have my Analytics set up correctly, or just looking in the wrong place for the data. Either way, I think I'm going to switch over to your recommended approach. Let's see if I have it right first though:Dave Lee wrote:Yeah, that should work fine.
However, I'd still suggest doing the tracking using my solution for the search results page instead (viewtopic.php?f=9&t=18356&p=120630#p119605).
1. Create a new Search.htm topic
2. Add the SearchResults proxy to the topic
3. Add that custom code to the <body> of the new topic
So if I did this correctly, my new Search.htm topic will look like this:
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="2" MadCap:lastHeight="47" MadCap:lastWidth="985">
<head>
<link href="../Resources/Stylesheets/SG_Stylesheet_HTML5.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
function sendSearchTerm() {
/* If current page has a #search-xxx parameter, then record it as a search for event */
if (location.hash.indexOf('#search-') > -1) {
/* get the search term, i.e. the bit after "#search-" */
searchterm = location.hash.split('#search-')[1];
/* send to Analytics as event with 'Search' category and 'SearchFor' action */
ga('send', 'event', 'Search', 'SearchFor', searchterm);
}
}
$(document).ready(function(){
/* send the search term when first open search results page */
sendSearchTerm();
/* when window hash changes (e.g. repeat search on results page), then check the hash for new a new search term */
window.onhashchange = sendSearchTerm;
});
</script>
<MadCap:searchResultsProxy />
</body>
</html>
I plan on adding this to my global project so all my help systems use the same one (instead of creating 5+ new Search.htm topics for each project). Since there's no GA identifier in that custom code (assuming it gets that from the standard GA code that's called in the <head> of the masterpages), I'm hoping this will work?
Software Documentation Specialist (but really, Tech Writer)
Re: Google Analytics Events and Tracking User-Entered Search
In Google Analytics, the search terms are recorded as Events.
You can check it's working straight away by looking at Real-time > Events.
After a day or so, you'll start seeing the events in Behaviour > Events.
You can check it's working straight away by looking at Real-time > Events.
After a day or so, you'll start seeing the events in Behaviour > Events.
Yep, that should work. The GA script will be loaded before the search results script, so that should be fine.jsandora wrote:I plan on adding this to my global project so all my help systems use the same one (instead of creating 5+ new Search.htm topics for each project). Since there's no GA identifier in that custom code (assuming it gets that from the standard GA code that's called in the <head> of the masterpages), I'm hoping this will work?
Re: Google Analytics Events and Tracking User-Entered Search
When I add the searchbarproxy to the search.htm topic, it adds the following code into the body section: <MadCap:searchBarProxy />
I don't see that in the code sample in this thread. Just confirming that both the code sample in this thread and " <MadCap:searchBarProxy />' should be in the body section.
Also, what do I do with the search.htm topic once I create it? Do I somehow have to add it to my output?
I don't see that in the code sample in this thread. Just confirming that both the code sample in this thread and " <MadCap:searchBarProxy />' should be in the body section.
Also, what do I do with the search.htm topic once I create it? Do I somehow have to add it to my output?
Re: Google Analytics Events and Tracking User-Entered Search
No - you don't insert a search bar proxy, you insert a search results proxy (<MadCap:searchResultsProxy />).daphna wrote:When I add the searchbarproxy to the search.htm topic, it adds the following code into the body section: <MadCap:searchBarProxy />
I don't see that in the code sample in this thread. Just confirming that both the code sample in this thread and " <MadCap:searchBarProxy />' should be in the body section.
Also, what do I do with the search.htm topic once I create it? Do I somehow have to add it to my output?
Any topic you add to the project will automatically be included in help outputs (unless you exclude it).
Re: Google Analytics Events and Tracking User-Entered Search
We are using Google Analytics to track our help and want to get search terms. I have read and reread this thread many times and tried to use the some of the scripts included and am having no luck at all. The most recent attempt was adding this to our master pages:
I still see no results either in behavior or in Real Time. I also don't see a way to create and event in GA. I am very new to it, so it may sound silly, but do I have to create the event for it to track it or is adding this script enough? Any ideas would be greatly appreciated. I'm lost.
Thanks,
Liv
Code: Select all
<script>
(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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-77382901-1', 'auto');
ga('send', 'pageview');
$(document).ready(function(){
/* FLARE SEARCH BOXES */
/* add event handler for when search button is clicked */
$('div.search-submit').click(function(){
/* get search term from input box (input.search-field), which related to -this- at parent sibling level */
var searchterm = $(this).parent().siblings('.search-field').val();
ga('send', 'event', 'Search', 'SearchFor', searchterm);
});
/* add event handler for when press Enter (key 13) in search box */
$('input.search-field').keypress(function(event) {
if (event.keyCode == 13) {
/* get search term from -this- input box (input.search-field) */
var searchterm = $(this).val();
ga('send', 'event', 'Search', 'SearchFor', searchterm);
}
});
</script>
Thanks,
Liv
Re: Google Analytics Events and Tracking User-Entered Search
I'm just getting started so help would be much appreciated.
My understanding from the Flare side of things is to:
- add code to the master page that includes the website's tracking code, as per the MadCap knowledge base article to enable google analytics to be run against the project.
- create a topic called Search.htm in the Master page folder. It should have the setup and code included in this thread to enable GA to report analytics on searches.
I am still a newbie at this, but it seems like we will also need to to some Google Analytics configuration to get the types of meaningful analytics we are looking for. My GA expert is now busy with other project, so I'm trying to do some research for when he is available to set things up. Seems like this thread has some information on setting up the event tracking for the searches. What about GA configuration to get analytics on what particular pages users hit? Right now I just see hits against the entire output.
Thanks
My understanding from the Flare side of things is to:
- add code to the master page that includes the website's tracking code, as per the MadCap knowledge base article to enable google analytics to be run against the project.
- create a topic called Search.htm in the Master page folder. It should have the setup and code included in this thread to enable GA to report analytics on searches.
I am still a newbie at this, but it seems like we will also need to to some Google Analytics configuration to get the types of meaningful analytics we are looking for. My GA expert is now busy with other project, so I'm trying to do some research for when he is available to set things up. Seems like this thread has some information on setting up the event tracking for the searches. What about GA configuration to get analytics on what particular pages users hit? Right now I just see hits against the entire output.
Thanks
Re: Google Analytics Events and Tracking User-Entered Search
What skin are you using?Liv_W wrote:We are using Google Analytics to track our help and want to get search terms. I have read and reread this thread many times and tried to use the some of the scripts included and am having no luck at all. The most recent attempt was adding this to our master pages:
This thread includes a number of scripts - some are for the HTML5 tripane skin only, some are for HTML5 top nav skin only.
When you insert the code, use Flare's Insert > Script, as it will format it correctly.
(A much better way to include the script is to put it in a js file (a text file with a .js extension), and just link to the js file from your master page.)
Re: Google Analytics Events and Tracking User-Entered Search
There are some different solutions here depending on the skin type you're using - the solution I posted which tracks the search terms from the search page is for a top nav skin.daphna wrote:I'm just getting started so help would be much appreciated.
My understanding from the Flare side of things is to:
- add code to the master page that includes the website's tracking code, as per the MadCap knowledge base article to enable google analytics to be run against the project.
- create a topic called Search.htm in the Master page folder. It should have the setup and code included in this thread to enable GA to report analytics on searches.
I am still a newbie at this, but it seems like we will also need to to some Google Analytics configuration to get the types of meaningful analytics we are looking for. My GA expert is now busy with other project, so I'm trying to do some research for when he is available to set things up. Seems like this thread has some information on setting up the event tracking for the searches. What about GA configuration to get analytics on what particular pages users hit? Right now I just see hits against the entire output.
If you're using this method, then you just need to include your standard GA code in your master page; i.e. the code you copy/paste from Google that looks like this:
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','https://www.google-analytics.com/analytics.js','ga');
ga('create', '?????????', 'auto');
ga('send', 'pageview');
The code I posted (here) to include in your search page will record search terms as Events in Google Analytics. Add this script in the body (not head) of the search page.
You can check it's working straight away by looking at Real-time > Events.
After a day or so, you'll start seeing the events in Behaviour > Events.
Re: Google Analytics Events and Tracking User-Entered Search
I am using the HTML 5 top nav skin, I just inserted the script into the master pages' bodies using Flare's Insert > Script and reloaded it. Is there a delay? I don't see results in Real Time yet?Dave Lee wrote:
What skin are you using?
This thread includes a number of scripts - some are for the HTML5 tripane skin only, some are for HTML5 top nav skin only.
When you insert the code, use Flare's Insert > Script, as it will format it correctly.
(A much better way to include the script is to put it in a js file (a text file with a .js extension), and just link to the js file from your master page.)
Thanks for your help,
Liv