Overview
The Hawksearch service enables online retailers and publishers the ability to drive a rich, compelling user experience. This experience drives visitors to the products and information that they seeking.
Once the Hawksearch engine is available, User Interface integration is necessary. There are various methods to communicate with the Hawksearch engine. This document will cover integration using the JavaScript approach.
The Hawksearch Recommendation service requires tracking events from a user on your website. This document also describes the steps to install client side tracking on your website to send relevant data to the Recommendation engine.
Domains
Hawksearch has three environments available: Development, Staging/Test and a load-balanced Production. When performing integration, each engine can be accessed by using these domains:
Development Environment
When including the scripts below, please use the appropriate domains for the development environment.
Hawk URL: http://dev.hawksearch.net/
Tracking URL: http://tracking-dev.hawksearch.net/
Recommendations URL: http://recs-dev.hawksearch.net/
Staging/Test Environment
When including the scripts below, please use the appropriate domains for the test environment.
Engine Reference URL: http://test.hawksearch.net/
Tracking URL: http://tracking-test.hawksearch.net/
Recommendations URL: http://recs-test.hawksearch.net/Production Environment
When including the scripts below, please use the following domain for the production/live environment.
Engine Reference URL: http://yourenginename.hawksearch.com/ This will be provided at time of launch.
Tracking URL: http://tracking.hawksearch.com/
Recommendations URL: http://recs.hawksearch.com/
Step 1: Changes to the <HEAD> section of the Page
JavaScript Block
The following JavaScript needs to be installed on every page of your site. The block should look as follows. Please either adjust or add as needed. The enginename is the engine ID associated with your Hawksearch account. The ClientGuid is the Tracking Key associated with your account. To lookup the Engine Name and Tracking Key for your account please look in the Hawksearch workbench under Admin >> Account Info.
<!-- Hawksearch Header Includes -->
<script type="text/javascript">
//<![CDATA[
(function (HawkSearch, undefined) {
HawkSearch.BaseUrl = 'http://dev.hawksearch.net/sites/%%enginename%%';
HawkSearch.HawkUrl = HawkSearch.BaseUrl;
HawkSearch.TrackingUrl = 'http://tracking-dev.hawksearch.net';
HawkSearch.RecommenderUrl = 'http://recs-dev.hawksearch.net';
HawkSearch.ClientGuid = '%%tracking_key%%';
if ("https:" == document.location.protocol) {
HawkSearch.BaseUrl = HawkSearch.BaseUrl.replace("http://", "https://");
HawkSearch.HawkUrl = HawkSearch.HawkUrl.replace("http://", "https://");
HawkSearch.TrackingUrl = HawkSearch.TrackingUrl.replace("http://", "https://");
HawkSearch.RecommenderUrl = HawkSearch.RecommenderUrl.replace("http://", "https://");
}
}(window.HawkSearch = window.HawkSearch || {}));
var hawkJSScriptDoc = document.createElement("script");
hawkJSScriptDoc.async = true;
hawkJSScriptDoc.src = HawkSearch.HawkUrl + '/includes/hawksearch.min.js?v1.0';
var hawkJSTag = document.getElementsByTagName('script')[0]; hawkJSTag.parentNode.insertBefore(hawkJSScriptDoc, hawkJSTag);
var hawkCSSScriptDoc = document.createElement("link"); hawkCSSScriptDoc.setAttribute("rel", "stylesheet");
hawkCSSScriptDoc.setAttribute("type", "text/css");
hawkCSSScriptDoc.setAttribute("href", HawkSearch.HawkUrl + '/includes/hawksearch.css'); document.head.appendChild(hawkCSSScriptDoc);
//]]>
</script>
Step 2: Enable Auto-Complete for Search Results
Please include the following script right before the closing </BODY> tag on every page to make sure the auto complete JavaScript is bound to the search textbox. This will ensure that the auto complete results are displayed as soon as the user starts typing in the text box.
To determine what needs to be displayed in this area, please make changes within the Hawksearch Dashboard.
textboxname is the ID of the search text box. Look to your existing HTML code to add the matching ID.
textboxnamefooter is the ID of the search text box on the footer if you have one. Look to your existing HTML code to add the matching ID. If you do not have the textbox on the footer, please remove the second suggestInit block for shown below.
<!-- Hawksearch - Auto-Suggest -->
<script type="text/javascript">
//<![CDATA[
HawkSearch.initAutoSuggest = function () {
HawkSearch.suggestInit('#textboxname', {
lookupUrlPrefix: HawkSearch.BaseUrl + '/?fn=ajax&f=GetSuggestions',
hiddenDivName: '',
isAutoWidth: true
});
HawkSearch.suggestInit('#textboxnamefooter', {
lookupUrlPrefix: HawkSearch.BaseUrl + '/?fn=ajax&f=GetSuggestions',
hiddenDivName: '',
isAbove: true
});
};
//]]>
</script>
Step 3: Define the Search Results Layout
Within the <BODY> area of the search page, you must include the following <DIV> elements with ids as specified below (initially empty) – the inner HTML of these div tags will be replaced automatically by Hawksearch.
<div id="hawkbannerlefttop" ></div>
This <DIV> represents a placeholder for the banner above the navigation area on the page.
<div id="hawkbannerleftbottom" ></div>
This <DIV> represents a placeholder for the banner below the navigation area on the page.
<div id="hawkbannertop" ></div>
This <DIV> represents a placeholder for the banner in the main search area, usually placed above the search results.
<div id="hawkfacets"></div>
This <DIV> represents a placeholder for the narrow by or the facets area on the page. The facets will be used to narrow down the search results and the layout of each facet list can be controlled by logging into the administration area of the website.
<div id="hawkbreadcrumb"></div>
This <DIV> represents a placeholder for the area on the page where the bread crumb for the search page will be inserted.
<div id="hawktoptext"></div>
This <DIV> represents a placeholder on the page where custom messages for events such as spell checking suggestions, expanding the search to perform the “OR” operation will be displayed. This should be usually placed above the search results on the page
<div id="hawktabs"></div>
This <DIV> represents a placeholder on the page where tabs could be utilized, if needed.
<div id="hawktoppager"></div>
This <DIV> represents the area on the page where the paging, sorting links and other options for the search will be displayed. This should be usually placed above the search results on the page.
<div id="hawkitemlist"></div>
This <DIV> represents the area on the page where the search results (including tabs for content, product or any custom searches) will display.
<div id="hawkbottompager"></div>
This <DIV> represents the area on the page where the paging, sorting links and other options for the search will be displayed. This should be usually placed below the search results on the page.
<div id="hawkbannerbottom" ></div>
This <DIV> represents a placeholder for the banner in the main search area usually placed below the search results
<div id="hawkbannerbottom2" ></div>
This <DIV> represents a placeholder for the banner in the main search area usually placed below the search results and below ‘hawkbannerbottom’
<div id="hawkexplain"></div>
This placeholder does not have any significance on the front end of the website but will be used to display the explanation for the search results on the preview area of the backend.
<div id="hawksmartbug"></div>
This placeholder does not have any significance on the front end of the website but will be used to display the Smart Bug option for adding redirect rules, banner rules in the administration backend and will display on the preview area of the backend.
Step 4: Add the Event Tracking Code
NOTE: In order to populate data in the Hawksearch Reports, and to leverage Personalized Search, it is CRITICAL to implement Tracking Integration.