Sponsored Product Publisher Integration

This article describes how publishers can integrate Sponsored Products when Whisk Widget has already been integrated before.

Overview

How to integrate

Publishers should contact us for a Sponsored Products tracking ID so they may use it on their page. 

Unit Dimensions

Sponsored Products units are responsive and adapt to how publishers integrate them. Unit height is fixed at 85px. Width is stretching from 270px to 350px on desktop and from 270px to the max window size on mobile.

Technical integration

Step 1: Replace the file in the page header: `shopping-list.js` with `shopping-list-sp.js`

<script async="true" src="https://cdn.whisk.com/sdk/shopping-list-sp.js" type="text/javascript"></script>

Note:  shopping-list.js - provides Whisk Widget code,  shopping-list-sp.js provides Whisk Widget + Sponsored Products code.

Step 2: Find a place on the page where Whisk Widget code is defined: whisk.shoppingList.defineWidget.

Example:

  var whisk = whisk || {};

  whisk.queue = whisk.queue || [];

  whisk.queue.push(function() {

    whisk.shoppingList.defineWidget("your-existing-block-unique-id");

  });

Add trackingId parameter obtained from Whisk to that code block: 

  var whisk = whisk || {};

  whisk.queue = whisk.queue || [];

  whisk.queue.push(function() {

    whisk.shoppingList.defineWidget("your-existing-block-unique-id", {

      trackingId: "wx-12345678-12345678"

    });

  });

Step 3: Add placement(s) for the Ad Units. Next to `defineWidget` block the following code should be added for each Ad Unit that you want to see on the page:

  var whisk = whisk || {};

  whisk.queue = whisk.queue || [];

  whisk.queue.push(function() {

    whisk.shoppingList.defineWidget("your-existing-block-unique-id", {

      trackingId: "wx-12345678-12345678"

    });

  });

  whisk.queue.push(function() {

    whisk.ads.defineBlock('whisk-sp-unit-block-1', {

      trackingId: "wx-12345678-12345678"

    });

  });

Step 4: On the page, where ad block has to be displayed, add the following code:

  <div id="whisk-sp-unit-block-1">

    <script>

      whisk.queue.push(function() {

        whisk.display('whisk-sp-unit-block-1');

      });

    </script>

  </div>

`whisk-sp-unit-block-1` - should be a unique ID of the block where the ad unit will be rendered.

Step 4: To integrate multiple Ad Units - repeat steps 3 and 4 with a different element ID.