Jquery Type ahead Google Analytics Custom field
Below, I have the following code that is for a type ahead search for FAQ content. It is working properly. However, when I try to add Google Analytic code where the search term parameter is located it breaks.
Where should I embed the GA code?
Is there an easier way to do this?
if (!window.console) console = {log: function() {}};
$("#jsoninfo").val = '';
$(document).ready(function () {
$().SPServices({
operation: "GetListItems",
async: false,
webURL: "http://itsusmpw00799:56789/prd/hcctesting/faq/",
listName: "FAQ",
CAMLViewFields: "<ViewFields><FieldRef Name='ID' /><FieldRef Name='label' /><FieldRef Name='Title' /><FieldRef Name='Name1' /><FieldRef Name='full' /></ViewFields>",
CAMLQuery: '',
completefunc: function (xData, Status) {
var jsondata
jsondata = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({
mapping: {
ows_Title: {mappedName: "tags", objectType: "Text"},
ows_label: {mappedName: "question", objectType: "Text"},
ows_Name1: {mappedName: "body", objectType: "Text"}},
includeAllAttrs: false,
removeOws: true
});
//console.log(jsondata);
var jsonstring = JSON.stringify(jsondata);
$('#jsoninfo').val(jsonstring);
var adamjson = $('#jsoninfo').val();
var jsonparse = $.parseJSON(adamjson);
//console.log(jsonparse);
}
});
});
$(function(){
$("#s1").autocomplete({
minLength: 3,
cache: false,
datatype: "json",
source: function (request, response){
var jsonparse = $.parseJSON($("#jsoninfo").val());
//console.log(jsonparse);
var searchParam =request.term.toLowerCase();
var results = [];
for (var i = jsonparse.length - 1; i >= 0; i--) {
var $tags_array = [];
var $tags_array = jsonparse[i].tags.split(';');
if($.inArray(searchParam,$tags_array)>-1||jsonparse[i].question.toLowerCase().indexOf(searchParam) > -1) {
results.push(jsonparse[i].question);
response(results);
}
}
console.log(results);
$("#jsoninfo2").val(JSON.stringify(results));
},
select: function(event, ui) {
var jsonparse = [];
var jsonparse = $.parseJSON($('#jsoninfo').val());
var answer = [];
for (var i = jsonparse.length - 1; i >= 0; i--) {
if(jsonparse[i].question.indexOf(ui.item.label) > -1) {
$("#jsoninfo2").val('<div class="question">' + jsonparse[i].question + '</div><br><div class="answer">' + jsonparse[i].body+'</div>');
}
}
console.log(answer);
$("#popuppanel").fadeIn('slow');
$('#faq_label').html('<div class="close" onclick="faqclose()">×</div><br>' + $("#jsoninfo2").val());
$('#faq_label a').live('click', function() {
window.open($(this).attr('href'));
return false;
});
$("#popuppanel").focus();
$(this).val(''); return false;
}
}
)
$('#s1').attr("value", "");
}
);
function faqclose() {
$("#popuppanel").fadeOut('slow');
}
Where should I embed the GA code?
_gaq.push(['_setCustomVar',
1, // This custom var is set to slot #1. Required parameter.
'Search_Term', // The name acts as a kind of category for the user activity. Required parameter.
$("#s1").val, // This value of the custom variable. Required parameter.
2 // Sets the scope to session-level. Optional parameter.
]);
_gaq.push(['_trackEvent',
'Search', // category of activity
'Item Add', // Action
]); Is there an easier way to do this?
ASKER
Thanks for the correction. I am also having trouble knowing where the Google code should be placed in the jquery to send the search term every time it gets entered by the user. Where ever I add it in the type ahead stops working or only shows 1 result.
Please advise.
Please advise.
inside the complete callback function :
completefunc: function (xData, Status) {
// here
or :
select: function(event, ui) {
// here once the user select one
completefunc: function (xData, Status) {
// here
or :
select: function(event, ui) {
// here once the user select one
ASKER
I tried do it this way... but it doesn't seem to be working still.. sorry but I am just not clear if I need to put the code somewhere separate and just reference it after the other function.
console.log(results);
$("#jsoninfo2").val(JSON.stringify(results));
},
select: function(event, ui) {
_gaq.push(['_setCustomVar',
1, // This custom var is set to slot #1. Required parameter.
'Search_Term', // The name acts as a kind of category for the user activity. Required parameter.
$("#s1").val(), // This value of the custom variable. Required parameter.
2 // Sets the scope to session-level. Optional parameter.
]);
_gaq.push(['_trackEvent',
'Searh_Term', // category of activity
'Item', // Action
])
var jsonparse = [];
var jsonparse = $.parseJSON($('#jsoninfo').val());
var answer = [];
for (var i = jsonparse.length - 1; i >= 0; i--) {
if(jsonparse[i].question.indexOf(ui.item.label) > -1) {
$("#jsoninfo2").val('<div class="question">' + jsonparse[i].question + '</div><br><div class="answer">' + jsonparse[i].body+'</div>');
}
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ok I will try that. If I have trouble I will let you know,
ASKER
There is activity that is showing up in the Realtime area in analytics but the Custom Variables are not appearing in the Audience/Custom section.
- I want to have the search term(s) as one custom variable , in the input id "s1". and the search results are in json form in hidden text area with id "jsoninfo2"
Is there key designation that I need to use? Is the code not defined properly? This is the first time I am trying to pass this kind of autocomplete search content to GA.
Help!
thanks,
Adam
- I want to have the search term(s) as one custom variable , in the input id "s1". and the search results are in json form in hidden text area with id "jsoninfo2"Is there key designation that I need to use? Is the code not defined properly? This is the first time I am trying to pass this kind of autocomplete search content to GA.
Help!
thanks,
Adam
instead : $("#s1").val,