Your business is unique and so are your customers!

Learn how to target the smart way, and keep customers engaged with the right storytelling, offers, and channels.

REQUEST A DEMO

Contact Info
Victoria House, Bloomsbury Square
London, WC1B 4DA
info@exposebox.com
+44 (0)20 3818 7555
Follow Us

Onboarding Guide

Introduction

The ExposeBox Integration Guide provides information about implementing ExposeBox on your site.

It’s all about easy implementation for devs, with maximum flexibility for product and marketing.

The step-by-step walks you through the procedures to establish data integration between your site and ExposeBox.

 

Overview

Integration with your site is the first step for enabling data analysis, to optimize your marketing activities, including your site.

This Integration Guide will provide you with the script to track visits and events on your site pages to achieve your goals.

ExposeBox popular features include recommendation widgets, Marketing 360, DMP for building audiences/segments and running campaigns through external ad networks such as AdWords and Facebook while transforming your site into an ad network in itself.

 

Getting Started

The following Setup Wizard provides the integration between ExposeBox and your site:

  1. General Info
  2. Events – JavaScript tags that enable the data exchange between ExposeBox and your site. 
  3. Product Catalog – provides information about your Product Catalogue.
  4. Testing Assets – verify and process the received data.

 

Accessing the Setup Wizard

  1. Go to https://dashboard-v2.exposebox.com/
  2. Login to your account 
  3. On the left-hand side – click on Site Setup

 

 

General Info

As a first step, we need to know basic information about your site:

Site label – Insert your website name
URL – Insert your website URL
Site Logo – Upload logo | Fetch site logo – to be able to fetch the logo, make sure to insert your sites’ URL

 

 

Events

Implementing ExposeBox’s scripts will provide the infrastructure for the data exchange between ExposeBox and your site.

You have two options: 

  • Copy and Paste the below script into a tag manager 
  • Implement the script into your web pages 

Make sure to replace the necessary fields to start tracking. 

For example, when looking on product page script:

window.predictlApi(function () { window.predictlApi.setProducts([‘product-id‘]); });

The product-id needs to be replaced with the actual product id of the product on your website.

The script loads asynchronously, therefore it won’t conflict with the page loading time or user experience.

The setup process can be accessed both through the workflow and the settings screen.

 

Following the script implementation on your website, you’ll be able to see your up-to-date statistics.

Status Meaning:

  • Green – Set up successfully completed 
  • Orange – Set up incomplete

For additional information, visit the ‘Settings’ page.

 

ExposeBox Basic Script

By sharing your Product Feed, it enables you to have a persist insight into your customer model and accurate product recommendation.

Add relevant product details in columns into the Data Feed.

The new data automatically loaded to the free-data property of the product inside ExposeBox; we support all Feed standards.

When listing, updating or removing a product from stock, the process done seamlessly as the Feed is processed periodically.

In the below steps, we provide you with the code snippets for implementation, accompanied by explanations and examples.

 <script>

var companyId = 123456789; //Replace with your actual Company ID provided by ExposeBox.

var script = document.createElement(“script”);
script.type = “text/javascript”;
script.async = true;
script.src = https://sf.exposebox.com/widget/predictl.min.js?c=&#8221; + companyId; //http(s): protocol depends on your website
document.getElementsByTagName(“head”)[0].appendChild(script);
window.predictlApi = window.predictlApi || function (cb) { var pa = window.predictlApi; pa.or = pa.or || []; pa.or.push(cb); }

</script>

 

Note: Replace the variable’s value with your CompanyID provided by ExposeBox. 

 

Product Pages

Integrating your products enables ExposeBox to suggest recommendations based on product performance. 

Integrate the following script on every product page on your site.

In case the page contains multiple products, use an array of product IDs.

window.predictlApi(function () {
   window.predictlApi.setProducts([‘product-id’]);
});

 

Category Pages

Integrating the Category pages enables ExposeBox to recommend products from the same category.

The related categories need to match the categories provided in the Product Catalogue.

The Event sends categories array that deducts from the breadcrumbs or the path in which the users place the products if they are consistent. 

The Category Array order is from the lowest level to the highest level of filtering (the current category will be the last)

window.predictlApi(function () {
   window.predictlApi.setCategories([‘Men’,’Coats’]);
});

 

Cart Events

Integrating Cart Events enables ExposeBox to detect abandoned items in the cart.

This Event is used for both segmentation, recommendation, and can trigger the cart abandonment email/SMS.

The Event includes the ProductID, quantity and unit price of the SKU added to cart.

The amount has to be the amount added/removed from the cart.

Example: user added 3 items of the same SKU to cart (event= “add 3”), then 2 removed from the cart (event=“remove 2”), then additional item added (event=“add 1”).

Added to Cart

window.predictlApi(function () {
var productId = “p34212332”;
var quantity = 1;
var unitPrice= 76.50;
window.predictlApi.events.addToCart(productId, quantity,unitPrice);
});

Removed from Cart

window.predictlApi(function () {
var productId = “p34212332”;
var quantity = 1;
window.predictlApi.events.removeFromCart(productId, quantity);
});

 

Purchase Event

Integrating Purchases enables ExposeBox to display recommendations based on customer purchase behaviour.

The event will be fired when a conversion event has occurred.

For example, when displaying a “thank you” page after purchase is complete. The total price should be the amount paid by the customer, after discounts, coupons and delivery.

window.predictlApi(function () {
var orderId = “ord-45215”; // Store order id
var totalPrice = 105; // Order total price after discounts, coupons and delivery.
var cartProducts = [    
{productId: “p34212332”,quantity: 1, unitPrice: 43.00},
{productId: “p34212345”,quantity: 1, unitPrice: 56.00}
];
predictlApi.events.conversion(cartProducts, orderId, totalPrice);
});

 

Customer Details

You must Integrate Customer Details to enable the synchronizing between your online and offline data to be able to send email and SMS campaigns.

Note:

  • Event type – active session – post-registration or login. The login event can also occur during the checkout.

 

    • The CustomerID field is mandatory. All other fields are optional. 
    • An email address can be used as the Customer Identifier, meaning the CustomerID is the email address.
    • The FreeData field used to pass additional customer properties, and it overrides the current values.
window.predictlApi(function () {
   window.predictlApi.setCustomerData({
       customerId: ‘12345678’, //the customer ID as defined in your systems
       email: ‘jon.snow@exposebox.com’,
       firstName: ‘Jon’,
       lastName: ‘Snow’,
       address1: ‘The Wall’,
       address2: ‘Tower of Joy’,
       city: ‘Winterfell’,
       country: ‘Westeros’,
       state: ‘The North’,
       zipCode: ‘02139’,
       phone: ‘054-5643454’,
       freeData: {
           age:51,
           isClubMember:’yes’
       }
   })
});

 

Segmentation Tags

By adding Segmentation Tags on all your desired site pages allows you to

customized attributes which you can later group to Audiences.

  • The Audiences are used for executing Sponsored Products campaigns.
  • The Segmentation Tag contains a key-value pair which you set based on your marketing/business needs.
  • Segmentation Tags must be determined before the integration. 

Usage Example: An article page with ‘Hobbies’ key containing values as “knitting” or “gardening”, will enable you to build Audience groups that are interested in knitting or gardening.

window.predictlApi(function () {
   var tags = {
       hobbies: [‘knitting’,’gardening’],
       priceRange: [‘0-100’]
   };
   window.predictlApi.setTags(tags);
});

 

Search and Filter Tags

Adding the Search and Filter tags enable ExposeBox to know the items your current users are interested in.

This Event is fired when users are running a search or filtering their preferences.

Note:

  • The best practice is to send the top 6 products at the top of the search results page.
  • You can always add additional properties, based on the filter parameters entered by the customer on your website.
  • All fields are optional.

In the below example, a customer searched for “Men winter coats”, and next filtered the results by category, then min prices and fabric type.

window.predictlApi(function () {
   var products = [‘p34212332‘,’p3426678‘,’p3426888‘];
   window.predictlApi.events.sendEvent(“searchAndFilter”,{
       query: ‘Men winter coats’, //The search query
       products: products, //Top 6 product results
       //All the search parameters filtered by the user
       categories: [‘Men’,’Coats’],
       minPrice: 11.0,
       maxPrice: 51.0,
       fabric: [‘tweed’,’wool’]
   });
});

 

Optional Custom Events

Integrating the Custom Script Event enables ExposeBox to provide additional learnings about customers’ behaviour. For example, when customers save a product to a Wish List, this improves the results provided by the algorithm and can also trigger the Marketing 360 Automation rules.

 

Checkout

The Event is fired once the customer clicked on the checkout button, usually at the cart page. Note that this Event doesn’t mean that the customer has completed the purchase.

window.predictlApi(function () {
   window.predictlApi.events.sendEvent(‘checkout’,{type:’cartPage’});
});

 

Wishlist – Add and Remove

This enables ExposeBox to access the data of a specific user who is added/removed an item to the Wish List.

//A click event on “Add-To-Wish-List”
window.predictlApi(function () {
   var productId = p34212332;
   window.predictlApi.events.addToWishlist(productId);
});

//A click event to remove a “Remove-From-Wish-List”
window.predictlApi(function () {
   var productId = p34212332;
   window.predictlApi.events.removeFromWishlist(productId);
});

 

Additional Custom Events

For custom Events please contact ExposeBox Professional Services through Customer Support.

 

Product Catalog (Feed)

This section of the Onboarding Guide details how your Product Feed provided to ExposeBox; Customer Model and Products Recommendations based on product properties.

 

Product Properties Determination

Product Definitions

The Product Property assists us in providing a better user experience, both by understanding the associations between the products and using the properties as part of a campaign layout. 

For example, a customer views a red dress and the Colour Property records the behaviour. ExposeBox then provides a recommendation to the customer and may show additional products tagged as ‘red’.

When additional details about the product are available, you should include it in the Feed in the form of new columns.

The additional data automatically loaded to the free-data property of the product. We support all Feed conventions.

For Example, to add “colour map” or “relevant season” to the Product Properties, add two columns (one for each) with the product name convention. 

The order of the fields in the product catalogue is insignificant.

 

Product Catalog Updates

Reporting a new product, updating a previously reported product and removing a product from stock is done seamlessly by ExposeBox, as the Feed is processed regularly. 

 

Feed Format

ExposeBox supports the following Product Feed formats:

  • ExposeBox – custom Feed format explained below
  • Google Merchant – Google Feed format
  • Facebook Ads – Facebook Feed format

File types: text (.txt), a comma-separated values file (.csv).

Delimiter

All the formats support the following delimiters:

  • Comma
    id,title,description,google_product_category,link,image_link,availability …
  • Tab
    id title description google_product_category link image_link availability …
  • Semicolon
    id;title;description;google_product_category;link;image_link;availability …

Run Schedule

The Feed can run:

Every couple of hours | Daily | Based on your Feed update frequency

For other run times, please contact ExposeBox support. 

URL

Add the URL of the updated Feed file

ExposeBox Feed Format

Example Feed file: https://storage.googleapis.com/app.exposebox.com/general/ExposeBox%20Feed%20example.csv

The included Parameters are

JS Type Mandatory/Optional Description
id String Man. Your ProductID is a unique identifier for your products in the system.
item_group_id String Opt. Use a Unique Identifier for every group of variants. Use the item GroupID property for products that vary by various attributes.
E.g., a styled shirt with various colours and sizes (all of those variants will have the same item GroupID)
title String Man. Product Name
price Decimal Man. Product Price
sale_open Boolean Man. Is this product to be recommended? Typically its factored by product availability, this also used for products that should not be recommended.For example, for some businesses, it might be alcohol or erotic content. Whether it’s temporary or permanent, the value should set to “false”.
url String Man. Product Page URL
image_url String Man. Product Image URL
supplier_id String opt. SupplierID determined by the marketplace
catalog_id String Opt. Product Catalogue (typically the highest classification/categorization of products).Example: For a marketplace that includes a car dealership website and a cosmetics website, all products on the car dealership website will be associated with the CarsSite catalogue and all products on the cosmetics website will be associated with the CosmeticsSite catalogue.
category String Array Man. The categories must match the categories supplied by the Events.The array can be deduced from the breadcrumbs or the path through the users locate the products if they are consistent. The order in the array will be from the category at the lowest level of filtering to the highest level (the latest category will be last).
on_sale Boolean Opt. Is the product currently discounted, promoted or on sale?
description String Opt. Product Description
brand String Opt. Product Brand 
currency String Opt. Currency (USD, GBP, EUR, AUD, etc.)
free_data JSON/ Object Opt. Any other data that is not mentioned above and included in the Feed need to be added to free_data.

 

Testing Assets

Events 

The following section is a detailed view of the event-data passed from your website to ExposeBox. The screen can found in settings -> Events.

The Status and Total Events provided in the Events window:

Event setup section: in the below screenshot you can implement missing or additional events as described in Events.

To View the Details:

  • In the ‘Event’ window, click the ‘View Details’ link of the Event you want to view.

It presents as following:

Activity presents the last 100 received events of this type

Received Domains presents the number of received events by Domain for the selected event type

 

Product Catalog 

Once the Feed processed, you will see the periodic Feed upload results in the below screen. The screen is accessible through the setup icon -> Product Catalog screen

This image has an empty alt attribute; its file name is xwh_BJ3ilxUbPDed1Mi7PbTC7w6hWRbsXQUwtKv6ukoXZXXGrY_OBNHhDhQh6Ka75Qiq8y4XRM65wjd8fJvb3Nkbu0Y9vCQJmWvywjg2sbamW5bKSkb2LoY51xdtY6PdUqaXTf_7
 
 

Moreover, you can see the Products Properties at our product explorer screen located at Assets-> Products

This image has an empty alt attribute; its file name is 8s9SiZr5PWHTY0rSKfrAPnlk6U7n7zbPIkH1nHxxtpm7fsX61Dnf6VZI61YmpKOi2IJkdq2gAoq1QmvCcwEI6_OszprUItfJbJNZ9Vr3MP99gynlNLPi3zh0A39z3XU6WaiUXvTs
For Example, the Product Feed also includes the price, colour and size fields, the price field can be verified via the price field and colour and size fields can be seen in the free data field.