We Keep Coding

Hide Search Engine ID for Google Custom Search Element API 2.0

I am implementing Google Custom Search Element API 2.0 in an ASP.NET MVC project. In the documentation they require that the following javascript is included in the view, with the <gcse:search> element following.
<script>
(function() {
var cx = 'xxxxxxxx:yyyyyyyy';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
However, the search engine id is visible on the line:
var cx = 'xxxxxxxx:yyyyyyyy';
In a browser, selecting View Source (or similar) allows the user to view the script and the search engine id.
How do I ensure that no-one can see my id?

I have found a way around this. By moving the Google script to its own function that takes the Search Engine Id as a parameter:
function buildSearchElement(cx)
{
var gcse = document.createElement("script");
gcse.type = "text/javascript";
gcse.async = true;
gcse.src = (document.location.protocol === "https:" ? "https:" : "http:") +
"//www.google.com/cse/cse.js?cx=" + cx;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(gcse, s);
};
I then call a method on my controller that returns the Search Engine Id upon page load. When this completes, the callback is the buildSearchElement function:
(function ()
{
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function()
{
if (httpRequest.readyState === 4 && httpRequest.status === 200)
{
buildSearchElement(httpRequest.responseText);
}
}
httpRequest.open("GET", "/GetSearchElementId");
httpRequest.send();
})();

Google Custom Search - Search on querystring

Google's updated their custom search code last time I looked. Here's our working code:
<script>
(function () {
var cx = '011561302208175438083:iegdgk3oox8';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
...
<gcse:search></gcse:search>
What we want to know, is how do we make this search box automatically search for a value when the page loads?

<gcse:search queryParameterName='q' autoSearchOnLoad='true' noResultsString='no results'></gcse:search>
this will automatically search for the q=MySearchString in the URL

Custom events not being tracked in Google Analytics

Here is the script I'm using, copied directly from Google:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-CODE']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
function recordOutboundLink(link, category, action) {
try {
var myTracker=_gat._getTrackerByName();
_gaq.push(['myTracker._trackEvent', category , action ]);
setTimeout('document.location = "' + link.href + '"', 100);
}catch(err){}
}
</script>
And here is the link I'm trying to track:
Yet nothing has shown up in my events report for the last 3 days. Is there something wrong with my code?

There's problems with Google's Outbound links tracking example
Assuming you're only using one tracker (which it looks like in your code), the following will work:
function recordOutboundLink(link, category, action) {
try {
_gaq.push(['_trackEvent', category , action ]);
setTimeout('document.location = "' + link.href + '"', 100);
}catch(err){}
}

Google Web Fonts loading after layout has rendered

I have a script on my page that rearranges a bunch of boxes into a pinterest like mosaic, using the excellent jQuery Masonry plugin. I call the box layout rendering method like this from the bottom of the page (just before ):
<script type="text/javascript">
$(function() {
wall.drawBoxes();
});
</script>
I also use google web fonts like this, just after the tag:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
The problem is the boxes are rendered before the font has been loaded. And when the font has loaded, the boxes increase in size, making the rendered mosaic layout look like crap.
What can I do to prevent that?

You could add loading callback - it fires when all fonts have finished loading.
$(document).ready(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] },
loading: function() {wall.drawBoxes()}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
});

I added the fontactive callback which fires then a font has finished loading.
$(document).ready(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] },
fontactive: function(fontFamily, fontDescription) { wall.drawBoxes() }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
});

You can either move the web font call before the drawboxes call to load the fonts first.
I'd suggest moving your functions into a domready function. e.g.
You could also put the font call in the <head> to load the fonts before the DOM is loaded.
Could you just load the google stylesheet? <link href="http://fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" >
$(document).ready(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
$(function() {
wall.drawBoxes();
});
});

You could add the active callback - it fires when all fonts have rendered.
$(document).ready(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] },
active: function() {wall.drawBoxes()}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
});
For a reference on the events available, see the webfontloader readme.

It is simpler using css:
#import url(http://fonts.googleapis.com/css?family=....);

Conditions syntax help

I'm trying to include this Regex condition and activate the analytics code (if it meets the Regex condition) in a javascript function posted below.
if (/^[abc].*/i.test(mystring)) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
alert('Congrats ABC!');
}
Now how can I add the code above (regex condition and the analytics) in there?Also, please note. The portion below works perfectly at the moment.
function validateCoupon( form ){
var mystring = document.getElementById('textCoupon').value;
if( form.textCoupon.value.length )
{
// validate coupon
$.get( "/include/checkItOut.php", { coupon: form.textCoupon.value }, validateShipping );
alert('Performed the check and matched');
}
else
{
form.textCoupon.style.border = '';
validateShipping( "yes" );
alert('You Did Not Use Any Code');
}
return false;
}
In other words. Somehow include the Regex condition and analytics trigger to this function here.

A literal comparison between the coupon code (in lower case) and abc using the equality operator (==) is enough. You should consider a server side solution, everyone can open the source and fetch the coupon code "abc" from it.
function validateCoupon( form ){
var mystring = document.getElementById('textCoupon').value;
if( form.textCoupon.value.length )
{
// added: Analytics
if ( form.textCoupon.value.toLowerCase() == "abc") {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
}
// end analytics
// validate coupon
$.get( "/include/checkItOut.php", { coupon: form.textCoupon.value }, validateShipping );
alert('Performed the check and matched');
}
else
{
form.textCoupon.style.border = '';
validateShipping( "yes" );
alert('You Did Not Use Any Code');
}
return false;
}