JavaScript Integration

This information is for older versions of Hawksearch and not the latest v4.0. This is not compatible with the Search Api or Indexing Api. Please contact Hawksearch for more information

Table of Contents

1 Overview
2 Domains
3 Step 1: Changes to the <HEAD> section of the Page
4 Step 2: Enable Autocomplete for Search Results
5 Step 3: Define the Search Results Layout
6 Step 4: Add the Event Tracking Code

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/ Provided at time of launch.
Tracking URL: http://tracking-na.hawksearch.com/
Recommendations URL: http://recs-na.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 Autocomplete 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 empty <div> elements with ids as specified below – the inner HTML of these div tags will be replaced automatically by Hawksearch:

<div id="hawkbannerlefttop" ></div>
<div id="hawkbannerleftbottom" ></div>
<div id="hawkbannertop" ></div>
<div id="hawkfacets"></div>
<div id="hawkbreadcrumb"></div>
<div id="hawkpagecustomhtml"></div>
<div id="hawktoptext"></div>
<div id="hawktabs"></div>
<div id="hawktoppager"></div>
<div id="hawkitemlist"></div>
<div id="hawkbottompager"></div>
<div id="hawkbannerbottom"></div>
<div id="hawkbannerbottom2"></div>
<div id="hawkexplain"></div>
<div id="hawksmartbug"></div>

Details are as follows:

<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="hawkpagecustomhtml"></div>

This <DIV> is used as container for content from Custom HTML field from the Landing Pages.

<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.

Click here for instructions on adding Hawksearch Event Tracking Code .