Shoptet Integration

• Real-time recommendations.
• 100+ algorithms.
• Fully customizable business rules.

Steps

The integration process consists of multiple steps. This manual assumes usage of Shoptet themes, but even if your e-shop is tailor-made, you will only need to change some names and everything will work as expected.

First of all, you need to create your Recombee account with a 30-day free trial.

Following steps:

• Uploading your catalog feed with items
• Creating a scenario in your Recombee Admin UI
• Starting a tracking module for customer interactions
• Creating a widget
• Placing a widget on the Shoptet page

Catalog feed

Catalog feed gives Recombee access to your items and their properties (such as price, availability, etc.).

• In your Shoptet Admin console go to Propojení/XML feedy.
• Copy URL address of Heureka.cz - Rozšířený feed.
• In the section Zabezpečení, make sure you allow access from any IP address:
  • Uncheck Zakázat přístup z IP adres, které nejsou uvedené na globálním whitelistu
• Login to your Recombee Admin UI.
• Go to Catalog feed on the left menu in section Integration.
• Click on Create feed.
• Select Heureka feed.
• Paste in the URL address from Shoptet from the previous steps.
• Save Feed.
• After a few minutes, you should see a log with numbers of successfully uploaded items.
• Continue by creating a scenario, which is an application of recommendation.

Creating scenario

The scenario defines the way you want to show items to your customers.

• Read our detailed documentation on how to make a scenario.
• Proceed to Interaction tracking of your customers.

Interaction tracking

Interactions represent the behavior of your customers, their preferences, and their taste. By sending us their interactions, Recombee can match what they would like to buy next.

• Detail view
  • Detail view is an action of a customer viewing a specific product site and reading details such as price, brand, color, etc.
• Cart addition
  • Interaction of customer putting an item to cart.
• Purchase
  • Interaction of customer buying one or more products.

Getting interactions

To track your customers in real-time, you need to install the Recombee tracking module on your page.

First, download the module here and save it as tracking_module.js.

• In your Recombee Admin UI in General go to section Settings.
• Find API tokens and copy your Public Token.
• Open tracking_module.js in the text editor of your choice (for example, Notepad or Atom, don't use MS Word).
• Paste your Public Token between quotes on the first line and end the line with a semicolon (;).
• On the next line write the name of your database between quotes and end the line with a semicolon (;).

It should look like this:

const publicToken = 'fFDj0Zkaz3036zLxmJWyy1jtbdvrgP4vL5vMHOklvMULjuD88qlPNk6Trv1ZlLYz';
const dbName = 'yourDatabaseName';

• Save the file.
• On your Shoptet Admin page go to Vzhled a obsah, section Správce souborů.
• Create a folder js.
• Open folder js.
• Upload the file tracking_module.js.
• Save and exit.
• On your Shoptet Admin page, go to Vzhled a obsah, section Editor and menu HTML kód.
• In the first text box Záhlaví (před koncovým tagem HEAD) paste this code:

<!-- RECOMBEE LIBRARY FUNCTIONS, DO NOT REMOVE -->
<script src="https://cdn.jsdelivr.net/gh/recombee/js-api-client/dist/recombee-api-client.min.js"></script>
<script defer="" src="https://web-integration.recombee.com/v1/recombee.js"></script>

• In the second text box Zápatí (před koncovým tagem BODY) paste this code:

<!-- PURCHASE, CART ADDITION, DETAIL VIEW TRACKING and MERGE CUSTOMERS -->
<script src="https://504272.myshoptet.com/user/documents/upload/js/tracking_module.js"></script>

• Save and exit.

Your interactions should be working. Check it in your Recombee Admin UI and proceed to widget creation - a place on your site for recommendations.

Creating widget

You can create a widget in our Admin UI or make one on your own. To make your widget in Admin UI follow the steps at HTML Widget.

Once your widget is created:

• Copy the generated HTML code as shown in the picture below.

• Open the text editor of your choice (for example, Notepad or Atom, don't use MS Word).
• Paste the copied HTML code.
• Save the file with the .js suffix. For example, save it as widget.js

Widget in banner

To show your HTML widget with recommendations on the site, you need to place it in a Shoptet banner or follow the steps in the following section Placing a widget using CSS.

To place an HTML widget in a Shoptet banner:

• Open your Shoptet admin page.
• Go to Vzhled a obsah and select section Bannery.
• Click on an empty banner, for example, Banner č. 3.
• Change the type of banner in Typ banneru to Textový banner.
• Check the Zobrazit banner checkbox.
• Check both Desktop and Mobile.
• Insert whole code from the file you created in the previous step (widget.js) to the box Text nastavení.
• Save.
• Using the Shoptet Admin page, select the location of the banner with your HTML widget.

Placing a widget using CSS

You can place an HTML widget anywhere on the site with our new feature Position of the widget.

Element anchor

First, you need to select an element on a specific page that will be used as an anchor. You can do it by opening the developer mode of the page and identifying the element selector. To learn more about element identifiers click here.

• Open your widget file (widget.js) in the text editor of your choice (for example, Notepad or Atom, don't use MS Word).
• Find the line which starts:

recombeeIntegration({ 
	"type": "InitializeRecommendationWidget", 
	"rootElementId": "widget-root-3a6f7234-1811-4b60-aa28-1cacf99d0666", 
	"widgetId": "3a6f7234-1811-4b60-aa28-1cacf99d0666", 
	"appendToElementSelector": "<YOUR ELEMENT SELECTOR>"});

• Notice the last line. Put your element selector there.

• Examples of use with element selector div#description to place HTML widget :

• insertBeforeElementSelector: The widget will be inserted before the first element matching this selector:

  JS

  "insertBeforeElementSelector": "div#description"
  

• insertAfterElementSelector: The widget will be inserted after the first element matching this selector.

  JS

  "insertAfterElementSelector": "div#description"
  

• prependToElementSelector: The widget will be inserted as the first child of the first element matching this selector.

  JS

  "prependToElementSelector": "div#description"
  

• appendToElementSelector: The widget will be inserted as the last child of the first element matching this selector.

  JS

  "appendToElementSelector": "div#description"
  

• Save the file and exit.

JavaScript Shoptet Integration

• On your Shoptet Admin page go to Vzhled a obsah, section Správce souborů.
• If not yet created, create a folder js.
• Open folder js.
• Upload your widget text file widget.js.
• On your Shoptet Admin page, go to Vzhled a obsah, section Editor and menu HTML kód.
• In the second text box Zápatí (před koncovým tagem BODY) paste this code at the end:

<!-- WIDGET -->
<script src="https://504272.myshoptet.com/user/documents/upload/js/widget.js"></script>

• Save and exit.

If you want to add more widgets, upload the text file of widgets and add the same code as in the step above with the changed name widget.js to the name of your file.

Placing a widget on a specific page

Some pages can have specific widgets - for example, a page with the cart or product detail page. To do it, nest the widget code in if condition with a page keyword. Shoptet naming conventions give keywords for some specific pages:

To position your widget on this site (e.g. cart):

• On your Shoptet Admin page go to Vzhled a obsah, section Správce souborů.
• Download your widget file from folder js.
• Open the widget file in the text editor of your choice (for example, Notepad or Atom, don't use MS Word).
• Add the if condition if (dataLayer[0].shoptet.pageType === 'cart') { at the first line.
• Add ending bracket } at the last line of your file.
• Save the file.
• On your Shoptet Admin page go to Vzhled a obsah, section Správce souborů.
• Upload the file.
• Save and exit.

Example of widget visible only in the cart.

if(dataLayer[0].shoptet.pageType === 'cart') {
  window.recombeeIntegration = window.recombeeIntegration || function() {
    (recombeeIntegration.q = recombeeIntegration.q || [])
    .push(arguments);
  };

  recombeeIntegration.l = +new Date();
  recombeeIntegration ({
    "type": "SetDefaults",
    "publicToken": "mFDjOZkaz3036zLxmJWyy1jtbdvrgP4vL5vMHOkWvMULguDS7q1PNkRTrvrZ1LYz",
    "databaseId" : " medium-mockup-prod",
    "rapiHostname": "client-rapi.recombee.com:443"
  });

  recombeeIntegration({
    "type": "InitializeRecommendationWidget",
    "rootElementId": "widget-root-dab4bb53-0584-4b49-984f-1f5b2f4354a2",
    "widgetId": "dab4bb53-0584-4b49-984f-1f5b2f4354a2",
    "appendToElementSelector": "div.content-inner",
  });
}