ATG Recommendations Quick Start Guide

How to Install and Display ATG Recommendations

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

Step 3: The ATG Recommendations JavaScript Include

Add this <SCRIPT> to the <HEAD> element on every page where the tracking code (step 4) 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 ATG’s Recommendation Engine a final snapshot of your customer’s buying session. This information is key to maximizing recommendation accuracy. Cart checkout integration should be implemented only when an order is being submitted for processing, such as on an order receipt page. Cart checkout does not track cart changes and should not be placed on a cart display page.

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

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>now</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>Total Price of the Cart</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!

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

Tools
ATG Recommendations Helper Plugin

Have questions?