Contents
Reccodo – Getting Started Guide
This document will describe the structure of the product feed as well as provide guidelines on how to embed the Reccodo script to your website.
PRODUCT FEED INFORMATION
The product feed from your website will provide Reccodo with accurate information about your product range and will enable an effective content analysis.
The feed should be in either XML or JSON format. Please find examples at the end of the present document.
General Requirements
Attributes
The table below analyzes all the attributes that are accepted for each product by Reccodo. Optional fields, although not affecting the functionality of our recommendation algorithms, can significantly improve their performance if provided.
NAME | TYPE | LENGTH | REQUIRED | EXAMPLE | COMMENTS |
---|---|---|---|---|---|
unique_id | String | 255 | Yes | 4567321 | |
title | String | 255 | Yes | SuperGlasses X3 Black | Short description of the product |
image | String | 200 | Yes | http://www.mystore.com/product/45673 | The most representative image of the
product |
price_with_vat | Decimal | – | Yes | 134.66 | Don’t include currency sign |
url | String | 200 | Yes | http://www.mystore.com/prod/4567321 | |
category | String | 255 | Yes | Eyewear > Smart Devices | Demonstrate Category tree with “>” |
category_id | String | 255 | No | 1567,1567SF, … | Comma Separated Values. If applicable, will
enable category recommendations |
in_stock | Boolean | – | No | {true, false} | |
manufacturer | String | 70 | No | SuperGlasses | |
mpn | String | 100 | No | ZHD321 | manufacturer identifier of the product |
ean | String | 13 | No | 9780471117094 | international article number (EAN) used for
the identification of retail products |
weight | Integer | – | No | 140 | |
color | String | 50 | No | XL, L, M, S | All the available sizes for the product. |
old_price_with_vat | Decimal | – | No | 185, 99 | If product on offer, this is the original price. |
optional_note | String | 50 | No | On offer until 2/3 |
PRODUCT EXTRA FEATURES
For JSON product feed, Reccodo supports the digest of custom product attributes that will provide to the shop owner greater flexibility when building strategies for recommendation, additional index info for search, and extra content for recommendation models.
NAME | TYPE | REQUIRED |
---|---|---|
extras | JSON | No |
EMBED TRACKING SCRIPT
The embed script enables the data exchange between your website and Reccodo. The script needs to be present on every page similarly to analytics scripts such as Google’s, hence we suggest including it in a main page template, if one is available.
We recommend placing the code in <head> section of the site or at least on top of the <body> so that it is loaded before a page renders on a browser. The script will load asynchronously and will not affect your page load time.
Please copy & paste the following:
<script>(function(d, s, id) {
var js, sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.type = 'text/javascript';
js.async = true;
js.src = "https://app.reccodo.com/static/js/reccodo.min.js";
sjs.parentNode.insertBefore(js, sjs);
}(document, 'script', 'reccodo-js'));
</script>
BASKET TRACKING
Tagging shopping cart aims to improve overall recommendation performance, analyze and produce frequent item sets to increase basket value and track abandoned carts to retarget customers.
On each page that is containing a shopping cart – including the mini-shopping cart modal usually placed on the top right-hand corner – you should add the following snippet, with the products that are currently in the basket. Basket tracking should be activated after the submission of the product feed.
<div class="scibyl_cart" style="display:none">
<div class="scibyl_cart_item">
<span class="product_id">XXXXXX</span>
<span class="quantity">2</span>
<span class="unit_price">501.30</span>
<span class="currency_code">EUR</span>
<span class="size">M</span>
</div>
<div class="scibyl_cart_item">
<span class="product_id">YYYYYY</span>
<span class="quantity">3</span>
<span class="unit_price">61.50</span>
<span class="currency_code">EUR</span>
<span class="size">M</span>
</div>
..
</div>
<div class="scibyl_cart_purchased" style="display:none">
<div class="scibyl_cart_item">
<span class="product_id">XXXXXX</span>
<span class="quantity">2</span>
<span class="unit_price">501.30</span>
<span class="currency_code">EUR</span>
<span class="size">M</span>
</div>
<div class="scibyl_cart_item">
<span class="product_id">YYYYYY</span>
<span class="quantity">3</span>
<span class="unit_price">61.50</span>
<span class="currency_code">EUR</span>
<span class="size">M</span>
</div>
. .
</div>
If the webpage is built as a single page application, or the cart is changing dynamically, you may update the basket by calling the following JS function:
<script>
var b = new Basket();
b.basket_update();
</script>
EMBED WIDGET
Upon creating your account at Reccodo, you should configure the recommendations widgets. There are several widget types that you can choose from, each of them carrying a separate configuration.
1. Homepage recommendations
2. Product-Related Recommendations
3. Category Recommendations (*category_id should be present in product feed)
4. Frequent Item set (Bundles)
5. Checkout page recommendations
For each of them you should reserve a space in your website for Reccodo to present them. This is done by adding a snippet like the following in the HTML.
The exact snippet will be autogenerated in the dashboard, when you create a widget.
<div id="sbl_recommendations" data-widget-uid="……" data-widget-type="……"></div>
XML EXAMPLE
<?xml version="1.0" encoding="UTF-8"?>
<store>
<products>
<product>
<unique_id>322233A</unique_id>
<title>MadBiker 600</title>
<image>http://www.mystore.com/product/322233A.jpg</image>
<price_with_vat>322.33</price_with_vat>
<url>http://www.mystore.com/product/322233A</url>
<category>Sports > Extreme Sports</category>
<category_id>category_id1,category_id2</category_id>
<manufacturer>SuperGlasses</manufacturer>
<mpn>ZHD332A</mpn>
<ean>9780471117094</ean>
<weight>360</weight>
<lang>en</lang>
<color>Black</color>
<old_price_with_vat>413.45</old_price_with_vat>
<optional_note>On Offer until 2/3</optional_note>
</product>
<product>
<unique_id>322233B</unique_id>
<title>MadBiker 613</title>
<image>http://www.mystore.com/product/322233B.jpg</image>
<price_with_vat>345.13</price_with_vat>
<url>http://www.mystore.com/product/322233B</url>
<category>Sports > Extreme Sports</category>
<category_id>category_id1,category_id2</category_id>
<manufacturer>SuperGlasses</manufacturer>
<mpn>ZHD332B</mpn>
<ean>9780471117095</ean>
<weight>460</weight>
<color>Black</color>
<lang>en</lang>
<old_price_with_vat>433.45</old_price_with_vat>
<optional_note>On Offer until 2/3</optional_note>
</product>
</products>
</store>
JSON EXAMPLE
{
"store": {
"products": [
{
"product": [
{
"unique_id": "322233",
"title": "MadBiker 600",
"image": "http://www.mystore.com/product/322233.jpg",
"price_with_vat": 322.33,
"url": "http://www.mystore.com/product/322233",
"category": "Sports > Extreme Sports",
"category_id": "category_id1,category_id2",
"manufacturer": "SuperGlasses",
"mpn": "ZHD332",
"ean": "9780471117094",
"weight": 360,
"color": "Black",
"lang": "en",
"old_price_with_vat": 433.45,
"optional_note": "On Offer until 2/3"
},
{
"unique_id": "322233B",
"title": "MadBiker 613",
"image": "http://www.mystore.com/product/322233B.jpg",
"price_with_vat": 345.13,
"url": "http://www.mystore.com/product/322233B",
"category": "Sports > Extreme Sports",
"category_id": "category_id1,category_id2",
"manufacturer": "SuperGlasses",
"mpn": "ZHD332B",
"ean": "9780471117095",
"weight": 460,
"color": "Black",
"lang": "en",
"old_price_with_vat": 433.45,
"optional_note": "On Offer until 2/3"
}
]
}
]
}
}
Reccodo Search – Getting Started
This document is a continuation of “Reccodo Getting Started Guide” and describes the additional steps that should be taken in order to integrate your Online Shop with Reccodo Search functionality.
PRODUCT FEED INFORMATION
The product feed from your website will provide Reccodo with accurate information about your product range and will enable an effective content analysis.
The feed should be in either XML or JSON format. Please refer to “Reccodo Getting Started Guide” for more information.
Important! Products that are not in the product feed will not be indexed and therefore will not appear on the search bar.
EMBED SEARCH SCRIPT
The embedded script enables the data exchange between your website and Reccodo. The script needs to be present on every page with search functionality, hence we suggest including it in a main page template, if one is available.
We recommend placing the code on the <head> section of the site or at least on top of the <body> so that it is loaded before a page renders on a browser. The script will load asynchronously and will not affect your page load time.
The code will be provided by Reccodo team.
SEARCH INPUT TAGGING TRACKING
In your search input field add the class “sbl-search-input” and the tag data-sbl-lang=”<language_code>” (Or any other language identifier for the respective product feed, if many languages).
Respectively, you may add data-sbl-tag=”<feed_tag>”for different pricelists.
For example:
<input data-sbl-lang="en" class="sbl-search-input">
Add the following div as a sibling to yoursearch input field:
<div data-widget-type="searchbar-recommendations" data-widget-uid="<your_widget_uid>" class="sbl-search sbl-search-wrapper"></div>
SEARCH CUSTOM CSS
Τhe last step is to add a link for the custom CSS, like the following, at a place where it is not overridden by other CSS files. The actual link will be provided by Reccodo Team.
<link href="https://app.reccodo.com/static/css/<your_brand_name>_reccodo_search.css" rel="stylesheet" type="text/css" />