Installation

Overview

Recommendations is the AI component of Marigold Engage. All the actions, including collecting data, training algorithms and making predictions are managed by Marigold. This makes Recommendations very simple to setup and use. The configuration process is composed of two steps.

Tag insertion:

  • If you are using Site, there is nothing to do.

  • If you are not using Site, a Javascript tag needs to be inserted on your website's pages.

Catalog sharing:

  • If your product catalog is already imported by Marigold during the initial Recommendations setup, there is nothing to do.

  • If it's not, you will have to select your product catalog file(s) that are on a publicly accessible URL (HTTP, HTTPS, FTP, FTPS, SFTP) during the Recommendations catalog setup.

    When your product catalog feed is not yet available on a publicly accessible URL, please execute one of the following steps:

    • Create a product catalog export from your CMS (Adobe Commerce, Prestashop, WooCommerce, Hybris, Websphere, Shopify, VTEX, etc).

      Note: A product catalog (feed) export is simply an export of your product database into a file with the format and content you define yourself. Most CMS systems provide extensions to export feeds in a standard format (Google Shopping, Shopzilla, standard CSV, etc), and we support all of those. Consult your CMS documentation to see how it's done.


      -OR-

    • Create a product catalog export from an Engage list. This can be done through a Data Export.

      -OR-

    • Create a product catalog export from any other source you use.

    Once the product catalog feed export is available, upload it onto a publicly accessible URL (HTTP, HTTPS, FTP, FTPS, SFTP).
    It can then be selected in the Recommendations catalog setup.

 

Tag insertion

If you are using Recommendations on your website to display dynamic product selections, you need to insert a Javascript tag (if you already use Site, this is already taken care of). This Javascript code snippet is provided to you. It is used to collect behavioral data and, based on this data, display product selections in real-time as your visitors browse through your website. Without this tag inserted, Recommendations has no information to process and cannot display product selections on your pages.

To insert the tag, you need to copy the piece of code you will find on your account's profile page and paste it inside the pages of your website. If you use a standard CMS such as Wordpress, Adobe Commerce, Prestashop or Shopify, you simply need to add the snippet in one of the templates of your pages, ideally at the end of the HTML code before the closing </body> tag.

Before inserting the tag, your HTML pages will have the following structure:

Copy 
<!DOCTYPE html>
<html>
    <head>
        <title>Your awesome site's title</title>
    </head>
    <body>
        [...Loads of stuff here...]
    </body>
</html>

After inserting the Recommendations JS snippet, it will look like this:

Copy 
<!DOCTYPE html>
<html>
    <head>
        <title>Your awesome site's title</title>
    </head>
    <body>
        [...Loads of stuff here...]
        <script type="text/javascript">
            [...The content of your tag...]
        </script>
    </body>
</html>

Once the snippet is inserted and data is being collected, you will be notified on your profile page.

Now that the data acquisition is finalized, you can check your product catalog settings here.

 

Under the hood

If you want to understand more about how Recommendations works, please read further. Recommendations's application is made of two parts communicating with each other:

The asynchronous Javascript snippet described above, which is placed on your site and interacts with Recommendations's servers. The Javascript snippet loads the Recommendations Javascript library in an asynchronous way each time a visitor loads a page from one of your websites.

This snippet initiates various requests to Recommendations's servers every time a page is loaded. The most important action the snippet performs is the following sequence:

It looks for the HTML code <div class="thRecommendations" data-widgetid="test"></div> inside the customer's HTML page.

  • If it's found, nothing happens.
  • If it's not found, content is inserted into the HTML markup, containing graphical product selections. The markup previously found will then look like this (the specifics of this content depends on the configuration you use):
Copy 
<div class="thRecommendations" data-widgetid="test">
    <iframe src=".. api CustomerX r..aHR09OT0lS?widgetid=test" width="256px" height="526px" id="thiframe" 
            frameborder="0" marginwidth="0" marginheight="0" scrolling="no" seamless="">[...]</iframe>
</div>

Graphically, it will render a list of product pictures, based on several parameters (visitor's browsing history, context, merchant configuration). This list of personalized product selections is therefore displayed on every page in which the code <div class="thRecommendations" data-widgetid="test"></div> is present.

This way of adding dynamic content inside the page is especially convenient for marketers, as very little integration effort is required (tag insertion and product feed configuration). If you want to create custom features, or use Recommendations as a backend technology or inside a native mobile app, you can do most of this using the Recommendations API. To get access to the API, please contact your Marigold account team or Marigold certified partner.

Note: The Recommendations API documentation can be found here.