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 |
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 – Magento Getting Started Guide
MODULE INSTALATION
CONFIGURATION
Reccodo configuration lies on System -> Configuration -> Reccodo.
In the settings you may enable or disable the script. The default Reccodo tracking code is in place, so no further steps are essential.
In the “Feed Links”, there are the product feeds for all the available store views. Please copy them to Reccodo Dashboard (https://app.reccodo.com).
Click “Save Configuration” and clean caches.
ADD WIDGET
Go to CMS -> Widgets.
In the top right part of the page click “Add New Widget Instance” and follow the steps:
1. Add New Widget Instance
- In “Type” select Reccodo and in the “Design Package/ Theme” select your store theme, that the widget will display.
- Click “Continue”.
2. Frontend Properties
- For your reference you must give a name to your Widget instance, in the “Widget Instance Title”.
- “Assign to Store Views” – select the store views you want to assign. It is important to select only one, since the widget is specific to one language.
- In Layout Updates specify the place to show the widget.
Note: In this example the widget will be shown only on homepage on the top of the page.
3. Widget Options
In the widget options tab, you are pasting the HTML code that it is autogenerated from the Reccodo dashboard.
Example code:
<div id="sbl_recommendations" data-widget-uid="......" data-widget-type="......"></div> Important: For multilingual websites, please contact support@reccodo.com.
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-searchsbl-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.scibyl.com/static/css/<your_brand_name>_scibyl_search.css" rel="stylesheet" type="text/css" /> 