Getting Started Guide

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

In general, your file must meet the following criteria:

• It must be available online, publicly accessible and retrievable by a HTTP GET request.

• It must match the structure described below and all required fields should be filled in.

• There should not be any duplicate products. Duplicates may affect the quality of the

results. Products are identified by their unique_id.

• Prices should include V.A.T.

• If you support multiple languages under the same domain, please

You can use our product feed validator to check for errors and compliance issues. The error report will provide good indications on how to fix your errors.

Important! All products in the product feed may be recommended to the customer.

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>

0 M

Shopping moments personalized

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>

In the order confirmation page (the page where the user lands after a successful purchase), you should replace it with the following snippet to confirm the purchase.

<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 &gt; 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 &gt; 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

To add module to your store:

1.Copy all extension files to the Magento root category.

2.Clean caches.

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" />

Contents

Reccodo – Getting Started Guide

PRODUCT FEED INFORMATION

General Requirements

Attributes

EMBED TRACKING SCRIPT

BASKET TRACKING

EMBED WIDGET

XML EXAMPLE

JSON EXAMPLE

Reccodo – Magento Getting Started Guide

MODULE INSTALATION

CONFIGURATION

ADD WIDGET

Reccodo Search – Getting Started

PRODUCT FEED INFORMATION

EMBED SEARCH SCRIPT

SEARCH INPUT TAGGING TRACKING

SEARCH CUSTOM CSS

Master your ecommerce skills