WebSDK provides recommendations via algorithms. Some algorithms needs various inputs to provide correct results. These inputs are filled by WebSDK just before an Onsite Message is displayed or getRecommendation public method is called. So WebSDK needs most up-to-date data to provide correct and reliable recommendation results. To achieve this, customer site should pass pageView event data, cartItems data etc. before any Onsite display process is started or getRecommendation is called.

Integration with Current Features (Version 2.2.14)

Currently WebSDK has setContactKey, pageView, setCart etc. public methods. WebSDK stores and uses data which are passed on these methods. Data passed via these methods can be used on recommendation algorithms.

Example code blocks for these methods:

setContactKey

dengage(
  'setContactKey',
  contactKey // any string value that identifies the authenticated end-user.
)

pageView

/* for Any Page */
dengage(
  'pageView',
  {
    page_type: 'home', // any string value that defines the type of the Page
    // ... extra parameters about Page View Event can be passed here
  }
)

/* for Category Page */
dengage(
  'pageView',
  {
    page_type: 'category', // any string value that defines the type of Category Page
    category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current page.
    // ... extra parameters about Page View Event can be passed here
  }
)

/* for Product Page */
dengage(
  'pageView',
  {
    page_type: 'product', // any string value that defines the type of Product Page
    product_id: 'P-420', // string or number value that represents of the current product id
    category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current product
    price: 49.99, // number value that represents the original price of the current product
    discounted_price: 39.99, // number value that represents the discounted price of the current product. If this product has no discount, original price should be passed
    stock_count: 1, // number value that represents the stock count of the current product. If the stock count is not present you can pass 1 or 0 to provide the information of the product has stock or not.
    // ... extra parameters about Page View Event can be passed here
  }
)

setCart

dengage(
  'setCart',
  [ // Array of Objects that represents the all items/products on Shopping Cart/Basket
    { // Object thar represents the a product on Shopping Cart/Basket
      product_id: 'P-420', // string or number value that represents of the current product id
      product_variant_id: 'P-420-1', // string or number value that represents of the current product variant id
      category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current product
      quantity: 2, // number value that represents the count of the current product added to Shopping Cart/Basket.
      price: 49.99, // number value that represents the original price of the current product
      discounted_price: 39.99, // number value that represents the discounted price of the current product. If this product has no discount, original price should be passed
      has_discount: true, // boolean value that represents the current product has discount or not
      has_promotion: false, // boolean value that represents the current product has promotion or not
      attributes: { // optional object value that respresents the additional attributes of the current product. Examples below:
        color: 'White',
        size: 38
      }
    }
  ]
)

Combined example for Category Page

dengage(
  'initialize'
);

dengage(
  'setContactKey',
  contactKey // any string value that identifies the authenticated end-user.
);

dengage(
  'setCart',
  [ // Array of Objects that represents the all items/products on Shopping Cart/Basket
    { // Object thar represents the a product on Shopping Cart/Basket
      product_id: 'P-420', // string or number value that represents of the current product id
      product_variant_id: 'P-420-1', // string or number value that represents of the current product variant id
      category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current product
      quantity: 2, // number value that represents the count of the current product added to Shopping Cart/Basket.
      price: 49.99, // number value that represents the original price of the current product
      discounted_price: 39.99, // number value that represents the discounted price of the current product. If this product has no discount, original price should be passed
      has_discount: true, // boolean value that represents the current product has discount or not
      has_promotion: false, // boolean value that represents the current product has promotion or not
      attributes: { // optional object value that respresents the additional attributes of the current product. Examples below:
        color: 'White',
        size: 38
      }
    }
  ]
)

dengage(
  'pageView',
  {
    page_type: 'category', // any string value that defines the type of Category Page
    category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current page.
    // ... extra parameters about Page View Event can be passed here
  }
)

When these methods called after WebSDK Initialize, most up-to-date data may not be used within Onsite Recommendation display process. Because display process may start before WebSDK receives the data from the public methods.

Integration with New Features (Version 2.3.0)

To provide reliable and correct results on recommendations, we introduced a new feature that lets customer to pass data on initialize method. With this feature WebSDK always use the most up-to-date data on its processes. Instead of calling public methods one by one, it can be passed on a single call.

initialize method can take parameters that provides same functionality of public methods. These parameters and the public method equivalents. Also we added new parameters and methods to provide multilanguage, multilocation and multicurrency recommendations.

Parameter	Public Method Equivalent	Data Type
`deviceId`	`setDeviceId`	String, Number
`contactKey`	`setContactKey`	String, Number
`pageView`	`pageView` or `ec:pageView`	Object
`cartItems`	`setCart`	Array of Objects
`language*`	`setLanguage*`	String
`currency*`	`setCurrency*`	String
`location*`	`setLocation*`	String

(*) Newly added methods and parameters.

These parameters uses the exactly the same models as their method equivalents.

Examples

Initialize call for any page

dengage(
  'initialize',
  {
    deviceId: deviceId, // optional string value that identifies the end-user for current browser. This should be passed if the customer wants to use its own identification logic.
    contactKey: contactKey, // any string value that identifies the authenticated end-user. If current user is not authenticated this can be passed null or empty string
    language: 'en-GB', // any string value that represents the preferred/current language of user/website
    location: 'PK', // any string value that represents the preferred/current location of user/website
    currency: 'GBP', // any string value that represents the preferred/current currency of user/website
    cartItems: [ // Array of Objects that represents the all items/products on Shopping Cart/Basket
      { // Object thar represents the a product on Shopping Cart/Basket
        product_id: 'P-420', // string or number value that represents of the current product id
        product_variant_id: 'P-420-1', // string or number value that represents of the current product variant id
        category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current product
        quantity: 2, // number value that represents the count of the current product added to Shopping Cart/Basket.
        price: 49.99, // number value that represents the original price of the current product
        discounted_price: 39.99, // number value that represents the discounted price of the current product. If this product has no discount, original price should be passed
        has_discount: true, // boolean value that represents the current product has discount or not
        has_promotion: false, // boolean value that represents the current product has promotion or not
        attributes: { // optional object value that respresents the additional attributes of the current product. Examples below:
          color: 'White',
          size: 38
        }
      }
    ],
    /* 
    Parameters above should always be provided with same logic on every initialize call. 
    Only pageView parameters can differ on various page types */
    {
      page_type: 'home', // any string value that defines the type of the Page
      // ... extra parameters about Page View Event can be passed here
    }
  }
);

Initialize call for Category Page

dengage(
  'initialize',
  {
    deviceId: deviceId, // optional string value that identifies the end-user for current     browser. This should be passed if the customer wants to use its own identification logic.
    contactKey: contactKey, // any string value that identifies the authenticated end-user. If current user is not authenticated this can be passed null or empty string
    language: 'en-GB', // any string value that represents the preferred/current language of user/website
    location: 'PK', // any string value that represents the preferred/current location of user/website
    currency: 'GBP', // any string value that represents the preferred/current currency of user/website
    cartItems: [ // Array of Objects that represents the all items/products on Shopping Cart/Basket
      { // Object thar represents the a product on Shopping Cart/Basket
        product_id: 'P-420', // string or number value that represents of the current product id
        product_variant_id: 'P-420-1', // string or number value that represents of the current product variant id
        category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current product
        quantity: 2, // number value that represents the count of the current product added to Shopping Cart/Basket.
        price: 49.99, // number value that represents the original price of the current product
        discounted_price: 39.99, // number value that represents the discounted price of the current product. If this product has no discount, original price should be passed
        has_discount: true, // boolean value that represents the current product has discount or not
        has_promotion: false, // boolean value that represents the current product has promotion or not
        attributes: { // optional object value that respresents the additional attributes of the current product. Examples below:
          color: 'White',
          size: 38
        }
      }
    ],
    /* 
    Parameters above should always be provided with same logic on every initialize call. 
    Only pageView parameters can differ on various page types */
    {
      page_type: 'category', // any string value that defines the type of Category Page
      category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current page.
      // ... extra parameters about Page View Event can be passed here
    }
  }
);

Initiailze call for Product page

dengage(
  'initialize',
  {
    deviceId: deviceId, // optional string value that identifies the end-user for current browser. This should be passed if the customer wants to use its own identification logic.
    contactKey: contactKey, // any string value that identifies the authenticated end-user. If current user is not authenticated this can be passed null or empty string
    language: 'en-GB', // any string value that represents the preferred/current language of user/website
    location: 'PK', // any string value that represents the preferred/current location of user/website
    currency: 'GBP', // any string value that represents the preferred/current currency of user/website
    cartItems: [ // Array of Objects that represents the all items/products on Shopping Cart/Basket
      { // Object thar represents the a product on Shopping Cart/Basket
        product_id: 'P-420', // string or number value that represents of the current product id
        product_variant_id: 'P-420-1', // string or number value that represents of the current product variant id
        category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current product
        quantity: 2, // number value that represents the count of the current product added to Shopping Cart/Basket.
        price: 49.99, // number value that represents the original price of the current product
        discounted_price: 39.99, // number value that represents the discounted price of the current product. If this product has no discount, original price should be passed
        has_discount: true, // boolean value that represents the current product has discount or not
        has_promotion: false, // boolean value that represents the current product has promotion or not
        attributes: { // optional object value that respresents the additional attributes of the current product. Examples below:
          color: 'White',
          size: 38
        }
      }
    ],
    /* 
    Parameters above should always be provided with same logic on every initialize call. 
    Only pageView parameters can differ on various page types */
    {
      page_type: 'product', // any string value that defines the type of Product Page
      product_id: 'P-420', // string or number value that represents of the current product id
      category_path: 'Woman > Shoes > Snickers', // string value that represents the category path of the current product
      price: 49.99, // number value that represents the original price of the current product
      discounted_price: 39.99, // number value that represents the discounted price of the current product. If this product has no discount, original price should be passed
      stock_count: 1, // number value that represents the stock count of the current product. If the stock count is not present you can pass 1 or 0 to provide the information of the product has stock or not.
      // ... extra parameters about Page View Event can be passed here
    }
  }
);

getRecommendation Public Method

We provide a public method name getRecommendation that returns recommended items without displaying.

dengage(
  'getRecommendation',
  '{containerKey}', // ContainerKey: On panel we provide containerKey for every recommendation container created. It can be taken from it.
  { // Optional Input Parameters: Every parameter here is filled by WebSDK by default. But if customer wants to override them, they can pass these parameters. All available parameters are below. 
    currentProductId: 'product_1', // Id of product on current page/screen
    currentCategoryId: 'Category 1 > Sub-category 1', // Category Id/Path of product on current page/screen
    cartProductIds: [ // Ids of products on cart/basket
      'product_2',
      'product_3'
    ],
    lastViewedProductIds: [ // Ids of last viewed/visited products, excluding current one
      'product_4',
      'product_5'
    ],
    lastViewedCategoryIds: [ // Category Ids/Paths of last viewed/visited products, excluding current one
      'Category 2 > Sub-category 2',
      'Category 3 > Sub-category 3 > Sub-sub-category 3',
    ],
    lastPurchasedProductIds: [ // Ids of last purchased/ordered products
      'product_6',
      'product_7'
    ],
    lastPurchasedCategoryIds: [ // Category Ids/Paths of last purchased/ordered products
      'Category 4 > Sub-category 4',
      'Category 5 > Sub-category 5 > Sub-sub-category 5',
      'Kadın > Mont',
      'Woman > Coat',
    ],
    language: 'en',
    currency: 'eur', // usd cad try
    location: 'TR' // GER FRA 
  },
  function(products) {
    // Recommended products can be used here
  }
)

Product Data Model:

{
  "id": "P-420", // id of product
  "title": "Red Hat", // name/title of product
  "category": "Headwear > Hat", // Category path of product
  "imageUrl": "https://someimagecdn.com/p-420.jpg", // Image URL of product
  "link": "https://somewebpage.com/products/p-420", // Page URL of product
  "price": 33.51, // Discounted price of product
  "originalPrice": 42.87, // Original price of product
  "discountPct": null, // Discount percentage of product
  "stock": 13, // Stock count of product
  "stockStatus": "InStock", // Stock status of product
  "isNew": false, // Product is a new arrival or not
  "isActive": true, // Product is actively purchasable or note
  "isOnSale": false, // Product is on a sale or not
  "brand": "N/A", // Brand name of product
  "rating": 3.1, // User review rating of product
  "reviewCount": 69, // User review count of product
}