*Since this document was published, CleverSet has been acquired by ATG and its recommendation service is now one of ATG's eStara e-commerce optimization services, known as eStara Recommendations.

CleverSet^® Product Recommender Quick Start Guide

How to Install and Display CleverSet^® Smart Product Recommendations

Smart Product Recommendations are easy to install. Once you receive your Retailer ID, just add a few lines of HTML to your product pages, cart, style sheet, and put a <DIV> where you want to display your recommendations!

Step 1: Request a Retailer ID

Step 2: Make Your Product Catalog Available to CleverSet

Step 3: CleverSet’s JavaScript Include

Add this <SCRIPT> to the <HEAD> element on any page where the CleverSet Code is implemented. (Please do not use the defer attribute as it causes failure in certain browsers.)

<script type="text/javascript" charset="utf-8" src="//static.cleverset.com/js/cleverset-2.js"></script>

Step 4: Clickstream Tracking Code

Add this <DIV> to the <BODY> element of every product detail page. Replace the placeholder text appropriately. For instructions on non-product pages please see the section entitled Handling Non-Product Pages .

  <div id="cs-cfg" style="display: none">
    <dl class="cs-cfg">
      <dt>retailerId</dt><dd>Your Retailer Id</dd>
      <dt>productId</dt><dd>Your Product Id</dd>
    </dl>
  </div>

Step 5: Cart Checkout Tracking

Checkout tracking gives CleverSet’s Recommendation Engine a final snapshot of your customer’s session. This information is key to maximizing recommendation accuracy. Cart checkout integration should be implemented only when an order is being submitted for processing. Cart checkout does not track cart changes and should not be placed on a cart display page.

The cart checkout integration process is split into two parts. Part one, described in section 5.1, explains your options for configure cart checkout activation. Part 2, described in section 5.2, explains the data format you should use to declare the cart contents. It looks a bit intimidating, but there’s really not much to it.

Don’t forget to include the CleverSet JavaScript from Step 3 on your cart pages.

Step 5.1: Cart Checkout Activation Trigger

There are two strategies for activating cart checkout tracking: confirmation-load and dynamic-event. It is up to you to decide which method is most suited to your cart system and page design. You must chose only one strategy, if you are uncertain which is best then we recommend confirmation-load (trigger: now). If you are unable to implement confirmation-load then we hope that one of the dynamic-activation options is suitable. Please contact us if you need any help.

Confirmation-Load Activation—`Activation Trigger: now`

Confirmation-load activation is just our fancy way of saying: “cart checkout tracking data is submitted when the confirmation page is loaded”. The primary use case for this strategy is a cart system that shows the user a receipt or other statement of order completion. In other words after the point where a user is able to change the order further.

This activation trigger is the keyword now. Please skip to Step 5.2 and use now as your activation trigger.

Dynamic-Event Activation

If your cart system does not permit you to make appropriate modifications to the receipt as described in the confirmation-load section above then you will need to use our dynamic-event activation system. Dynamic event activation works by binding a JavaScript event listener to the page element responsible for confirming an order. This strategy should be added to the order confirmation page rather than the receipt page. Our API only requires that you specify an activation code uniquely identifying the page element to bind to. We dynamically perform the actual event binding without requiring you to add any.

We offer several different types of declarations. You will need to choose which is most appropriate to your cart and page design. Once you have selected an activation trigger, skip onward to Step 5.2 to finish implementing cart checkout integration.

Option A. Confirmation triggered by `<FORM>` submit and only one `<FORM>` element is present (beware search boxes, etc.) on the page:

If you have only one <FORM> element on your page we will bind to the JavaScript onSubmit action of that element. The activation trigger is form.

Option B. Confirmation triggered by `<FORM>` submit and there are multiple `<FORM>` elements present on the page:

When multiple forms are present it is important that the checkout action be bound only to the <FORM> that confirms the order. This is done by setting a unique id attribute, of your choosing, on the <FORM> element (assuming you don’t already have one). The activation trigger is the <FORM>’s id attribute value, prepended with a #.

E.g. if your <FORM> has an id of confirmation-form then the activation trigger would be #confirmation-form.

Option C. Confirmation triggered by `<A>`, `<IMG>`, or other clickable element:

Any clickable element may be used to activate cart checkout tracking. This strategy is almost identical to the multiple form strategy—the activation trigger declares an id to bind to. Naturally, it is necessary to bind the same element that confirms the order. To enable checkouts just set a unique id attribute on the <A> or other element that submits the confirmation. The activation trigger is the id value, prepended with a #.

(This will work for any clickable element; and because it uses onMouseDown, it won’t conflict with existing onClick actions.)

Step 5.2: Specify Cart Data

Cart data is extracted directly from an html microformat (described below). This requires that your cart system generate an additional chunk of hidden html.

Add this <DIV> element to your cart template page. Then replace the pseudocode and the placeholder text.

  <div id="cs-cfg" style="display: none">
    <dl class="cs-cfg">
      <dt>retailerId</dt><dd>Your Retailer Id</dd>
      <dt>-checkout</dt><dd>
        <dl>
          <dt>activation</dt><dd>Checkout Activation Trigger, see section 5.1</dd>
          <dt>cart</dt><dd>
            <dl>
              <dt>contents</dt><dd>
                <dl>
                  foreach (line item in the cart) {
                  <dt>Your Product Id</dt>
                  } // foreach
                </dl>
              </dd>
              <dt>total-price</dt><dd>1472089.16</dd>
            </dl>
          </dd>
        </dl>
      </dd>
    </dl>
  </div>

Example:

  <div id="cs-cfg" style="display: none">
    <dl class="cs-cfg">
      <dt>retailerId</dt><dd>decafbad</dd>
      <dt>-checkout</dt><dd>
        <dl>
          <dt>activation</dt><dd>now</dd>
          <dt>cart</dt><dd>
            <dl>
              <dt>contents</dt><dd>
                <dl>
                  <dt>beaded</dt>
                  <dt>bedded</dt>
                  <dt>bedead</dt>
                  <dt>bedeaf</dt>
                </dl>
              </dd>
              <dt>total-price</dt><dd>300.00</dd>
            </dl>
          </dd>
        </dl>
      </dd>
    </dl>
  </div>

Step 6: Container `<DIV>` Element for Recommendations

Add this <DIV> element to the page where you want recommendations displayed. Replace the placeholder text appropriately.

  <div id="cs-recslot" class="cs-slot">
    <dl class="cs-cfg" style="display: none">
      <dt>headerText</dt><dd>Text to Display Above Recommendations (optional)</dd>
      <dt>numRecs</dt><dd>Number of Recommendations to Display</dd>
    </dl>
  </div>

Step 7: CSS to Style the Appearance of Recommendations

This CSS may be embedded directly into the page or appended to your existing stylesheet. (More on styling in Step 8)

  #cs-recslot {text-align:left; padding:0; font:12px Arial, sans-serif;}
  #cs-recslot .cs-header-text {font: bold 17px Arial, sans-serif; color:#000;}
  #cs-recslot .cs-rec {float:left; width:125px; text-align:center; padding:3px; margin:10px;}
  #cs-recslot img {width:100px; padding:3px; border:0;}
  #cs-recslot a {color:#000; text-decoration:none; margin:5px;}
  #cs-recslot a:hover {color:#999;}
  #cs-recslot a span {display:block; clear:both;}
  #cs-recslot .cs-price {margin:0; padding:0; padding-top:3px; font-weight:bold;}
  #cs-recslot a:hover .cs-price {color: #000;}

Step 8: You’re Done!

You’ve completed the basic installation process for CleverSet Smart Product Recommendations, but there is a whole lot more functionality waiting for you!

Beyond Quick-start

Improve upon the basic installation you’ve just completed.

Styling the ‘Tiles’ Renderer — Change the look of recommendations to more closely fit with your look and feel.
All About Campaigns — offers a suite of powerful campaign tools to help target recommendations further.
Failover Recommendations — CleverSet utilizes Akamai’s Content Distribution Network to provide superior performance and reliability. We offer a failsafe mechanism that leverages Akamai to keeps the recommendations flowing no matter what. Read on to take advantage of this market leading capability.

Even More Recommendations

Beyond the basic installation CleverSet has additional recommendation tools and options.

Multiple Recommendation Sets — Need more than one set of recommendations on your page? No need to choose, we let you mix and match. This is a great way to leverage campaigns.
Recommendations for Category and Other Pages — Put recommendations on all of your pages. Another great way to leverage our campaign tools.
Improving Recommendation Performance — Optimize revenue generation by using best practices when implementing CleverSet Smart Product Recommendations on your website.
CleverSet Demo Site — Check out the demo site for working examples of different implementation possibilities!

Jonesin’ for More? Or Just Need Some Help?

Write us. We work hard to make your recommendations the best.

Documentation
Quick Start Guide
Catalog Format
Renderers
Flavors
Optimizing Revenue
Handling non-Product Pages
Multiple Recommendations
Fail Over
License & OSS Attributions
Demo Site

Tools
CleverSet Helper Plugin

Have questions?

CleverSet® Product Recommender Quick Start Guide

How to Install and Display CleverSet® Smart Product Recommendations

Confirmation-Load Activation—Activation Trigger: now