Recommendations on Non-detail Pages
ATG Recommendations are not limited to product detail pages. They can provide quality recommendations on every page of your site. For pages that are relevant to a category or brand, the category or brand information can be used to enhance the quality of recommendations throughout the site. Some examples of pages with relevant brand or category information are:
- search results in a category or brand
- information about a product line
- shipping policies for a particular product type
Brand and Category Pages (All)
All pages, including ones without ATG Recommendations should include the following code.
Include the ATG Recommendations Javascript library on each page. Add this <SCRIPT> to the <HEAD> element on any page . (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>
Next the page needs to include our clickstream tracking code. It is essential that the following code have either Brand or Category information for the given page. If either Brand or Category are not available, omit it and include the other. Add this <DIV> to the <BODY> element. Replace the placeholder
<div id="cs-cfg" style="display: none">
<dl class="cs-cfg">
<dt>retailerId</dt><dd>Your Retailer Id</dd>
<dt>brand</dt><dd>Your Brand Id</dd>
<dt>category</dt><dd>Your Category Id</dd>
</dl>
</div>
For instructions on displaying recommendations on non-product pages, see step 6 of the Quick Start Guide and follow the same instructions as for product detail pages.
Shopping Cart Pages
ATG can use the contents of a shopper’s cart to provide better recommendations. On shopping cart pages you should include the following code.
Include the ATG Recommendations Javascript library on each page. Add this <SCRIPT> to the <HEAD> element on any page . (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>
Next the page needs to include our clickstream tracking code. This code looks different from other clickstream tracking code and care should be taken to ensure correct syntax.
Be sure to 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>cart</dt><dd>
<dl>
<dt>contents</dt><dd>
<dl>
foreach (line item in the cart) {
<dt>Your Product Id</dt>
} // foreach
</dl>
</dd>
</dl>
</dd>
</dl>
</div>
Displaying recommendations on Shopping Cart Pages
Displaying recommendations on Shopping Cart pages works almost identically to the methods described in step 6 of the Quick Start Guide . The only difference is that, to get the best performance, the id of the recommendation slot should be csBasket.
This means that the recommedation slot should look like the following code.
<div id="csBasket" 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>
This also means that the CSS for the recommendations must change appropriately, as demonstrated below.
#csBasket {text-align:left; padding:0; font:12px Arial, sans-serif;} #csBasket .cs-header-text {font: bold 17px Arial, sans-serif; color:#000;} #csBasket .cs-rec {float:left; width:125px; text-align:center; padding:3px; margin:10px;} #csBasket img {width:100px; padding:3px; border:0;} #csBasket a {color:#000; text-decoration:none; margin:5px;} #csBasket a:hover {color:#999;} #csBasket a span {display:block; clear:both;} #csBasket .cs-price {margin:0; padding:0; padding-top:3px; font-weight:bold;} #csBasket a:hover .cs-price {color: #000;}
