What Amazon.com Teaches Us About On Site Search
Amazon.com continues its tour de force in online retail. The company has attracted 20% of the worldwide online retail traffic through its inbound marketing and paid search campaigns. Over 282 million unique visitors. Now that’s impressive!
Most of Amazon.com’s visitors find their way to the site through a Google search, but the refined searching to find what you ultimately purchase is increasingly happening on Amazon’s site. Google gets you to Amazon, but Amazon ultimately connects you with what you’re buying. There’s an element of control in this scenario that’s appealing. That got me thinking about how I could ad on-site search for my customers using the Hubspot CMS. This blog shows how I did it.
As inbound marketers we ply our trade with content, on page SEO, inbound link campaigns etc. to raise our brand to the top rank in Google search so that visitors will find our websites. But what happens after Google directs a prospect to your site? What if they don’t find exactly what they were looking for? Most will go back to Google. When they go back to Google and do another long tail keyword search, will you again rank or will your competition have out foxed you for that particular search… which could mean a missed conversion opportunity?
If I’m a content provider, say for medical information on drug interactions, I’d prefer to have my prospects searching my site for information rather than going back to an internet-wide Google search. Similarly, if I’m a bank, I’d prefer to have prospects search the services I alone offer once they’ve found me by my brand. A high school or college would rather have prospects search their course offerings and content rather than opening a search to competing schools.
I’d like my site to be more like Amazon.com (who wouldn’t?). Once Google drops a prospect on my site, I’d like that prospect to search my site if Google didn’t direct them to precisely what they were looking for. But if you’re using a CMS like Hubspot, which is great for managing and measuring your inbound marketing campaigns, one of the features that’s missing is on-site search.
Build or Buy Your On-Site Search
In the past I’ve used open source search tools like Lucene or Sphinx to build on-site search. That approach can work but it’s not for the non-programmer – certainly not most inbound marketers – and when you add up the hours you put into building your own general purpose, on-site search, I’ve never really felt the value was there.
Google, it turns out, provides custom search that can be adapted to provide a really great on-site search for your website hosted on a CMS like Hubspot. The functionality is provided through the Google API, and while there are free versions of the technology paid for by advertising, (remember Google is collecting data about your searches so I use the term free with a bit of license) I found I could create a much cleaner, on-site search for my Hubspot customers using the version that costs as little as $100 per year , which you can purchase here. You will need a Google account, which you can create on-line to set up your custom search.
Getting Started with Google Custom Search
Before you purchase the the custom search service, Google provides a nice little on-line utility for setting up and testing your search. The utility allows you to specify which domain(s) you want to search – note you can specify more than one – which is handy if you have multiple domains that offer a related product or service. All the same SEO principles inbound marketers use apply to your custom search results. Your own pages will rank in your custom search as though they were searched on Google while limiting the search to just your specified site(s).
Google’s on-line utility provides a great starting point. You can tweak some elements of the UI and quickly see how your site will be searched by Google and at the end of the process you get a Javascript snippet that you can install on your site to implement your custom search engine. But as you’ll notice, the default UI that Google provides is a little garish and search results are re-directed to a new page rather than being presented on the page where the search was conducted. So there’s room for improvement.
If you’re going to integrate custom search into your Hubspot hosted website, you’ll be using the custom HTML / Javascript module which is one of the options when adding a new module in the CMS. When I first started playing around with my on-site search, I made a copy of my home page, kept it invisible to the public, placed an HTML / Javascript module on the page and copied the code Google’s on-line utility created into the Hubspot module. It looked something like this. Tada, now I have search on my site!
When you look at the code that the Google custom search utility generated, you’ll notice a string of characters that correspond to the search engine unique ID that Google assigns to you. This same string can be found in your Google custom search engine control panel. You’ll need these characters if you’re going to use the Javascript code that I wrote to create a better custom search module for the Hubspot CMS.
Another interesting aspect of this custom search is that the code is generic except for the search engine unique ID. What this means is that you can actually place your Javascript custom search code on any website and the search that is performed will be localized to your site. Perhaps an interesting thought for some affiliate marketing…
Customizing Google’s Search For Your Hubspot CMS Site
But what I was really looking for was a way to do on-site search and present the results in-line, on the page where the search was conducted. Google’s basic code didn’t do that. Furthermore, I wanted a module that would work well in either the Hubspot 1, 2 or 3 column templates so I could drop it anywhere I wanted on my site. After some tweaking, I came up with this basic Javascript that did the trick:
Google Custom Search Javascript Code for Hubspot CMS
<div id=”cse”>Loading</div>
<script src=”http://www.google.com/jsapi” type=”text/javascript”></script>
<script type=”text/javascript”>
google.load(‘search’, ‘1’, {language : ‘en’});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl(‘<put your unique searchID in here>‘); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw(‘cse’);
}, true);
</script>
<style>
td.gsc-search-button {
width: 36%;
}
table.gsc-search-box td.gsc-input {
padding-right: 6px;
}
</style>
My code scales to the width of a column and expands down to display search results in the same column where you place the HTML/Javascript module. Note that in order to use this code to search your site, you’ll need to copy the code above, place it into an HTML/Javascript module and replace the <put your unique searchID in here> placeholder with that string of characters for your search engine unique ID. The ‘x’ to the right of the search box is used to clear the search and restore the column to its original state. Here’s what the improved code looks like on the Innovative Marketing site. Feel free to try it out!
You’ve Got Your Own Search. What Next?
I really like the idea of on-site search and there a many other cool things you can do with the Google API beyond my simple example. Once Google or an inbound link has dropped a prospect at my site, I’d prefer that they search my site to refine their interests instead of going back to Google. Now they can. Do you have suggestions for improving this Javascript? How have you used on-site search on your website?