JavaScript Integration

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:

🚧

Before You Begin

Please ensure that your client-specific endpoints are configured before implementing any API integrations. Please refer to this article to learn more about client-specific endpoints and reach out to our CSD team for any questions.

Development Environment

When including the scripts below, please use the appropriate domains for the development environment.

Hawk URL: http://dev.hawksearch.net/
Tracking URL: https://enginename.dev.tracking-na.hawksearch.com
Recommendations URL: https://enginename.dev.recs-na.hawksearch.com

Staging/Test Environment

When including the scripts below, please use the appropriate domains for the test environment.

Engine Reference URL: <https://test.hawksearch.net/>
Tracking URL: https://enginename.test.dashboard-na.hawksearch.com
Recommendations URL: https://enginename.test.recs-na.hawksearch.com

Production Environment

When including the scripts below, please use the following domain for the production/live environment.

Engine Reference URL: <https://yourenginename.hawksearch.com/> Provided at time of launch.
Tracking URL: https://enginename.tracking-na.hawksearch.com
Recommendations URL: https://enginename.recs-na.hawksearch.com

Step 1: Changes to the 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 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 area of the search page, you must include the following empty

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