Shoppable Media

This functionality lets you make online content shoppable on any platform including: display advertising, YouTube, Facebook, Twitter, blogs, websites, email, etc. With Whisk Shoppable Media you can make recipes or products shoppable.

User journey overview

You have various options to configure the user journey, including what page they land on and what shopping options are available to them. All the journeys open in a new tab in the web browser.

There are two primary journeys a user can take:

• Go straight to Whisk list

• Open Whisk shopping experience on your page

Secondly, there are various other options you can use to customize the journey. This includes, but not limited to:

Start page

• Go to Shopping List — a checklist that allows user to print, email, share, or use it on their mobile device.

• Go to Basket — a list of store items where users can adjust quantities or swap products.

• Go to Store Login — a login page where user enters their online retailer credentials to add items to their basket.

Available retailers

• All stores — any retailer available in the user’s geolocation is visible.

• Limited selection of stores — one or more retailer available in the user’s geolocation is visible.

• One store — a specific store only.

In all cases a default retailer also can be specified.

Important: When you send items to retailer baskets, Whisk’s matching algorithm considers various factors (including available store items, quantity, brand, attributes, and price) to find appropriate products at all retailers. In some cases, matching to very specific store items (brands) will not happen out of the box. Please contact us to discuss your specific needs.

Go straight to Whisk list

This method sends users to a full-screen Whisk shopping page from any media channel you choose (Youtube, Facebook, etc.).

image alt text

Instructions:

1. The link which you use in your media is generated using our Link Generator Tool. Visit that page to create your link.
2. Choose a Start Page.

3. The White label allows you to send users to a customized experience (e.g. styles and branding to suit your brand). Contact us to make these customizations and get your white label code.

4. Select what you want to add to the shopping list, this can either be recipes or products. Recipes must be a public URL, products are just raw text. If you have specific SKUs you’d like matched get in touch with us.

5. Add your analytics and tracking parameters. Tracking ID is a unique code we assign to you to generate reports and analytics. Media, Campaign, and Source provide detailed insights into how specific links are performing. You can contact us to obtain a Tracking ID and an analytics dashboard.

6. Click Generate Link. Copy the link.

7. Use the link in your content.

Open Whisk shopping experience on your page

This method allows you to send users to any website you want, which the Whisk shopping tool open (for example a recipe or landing page).

Important: For the Whisk shopping tool to trigger automatically when user visits your page, you must be able to add a small Javascript snippet to the page.

image alt text

• Add the SDK script to your page, ideally in the . This script contains the core functionality of the SDK. Note: this should only be added to your page once.

var whisk = whisk || {};
whisk.queue = whisk.queue || [];

• Add showListener part. In this section you can customize the journey. The format:

whisk.queue.push(function() {
    whisk.listeners.addShowListener( /*method*/ , {
        /*parameters*/
    })
}); 

where method could be: shoppingList.addProductsToList, shoppingList.addProductsToBasket, shoppingList.addRecipeToList, shoppingList.addRecipeToBasket and others. You can change shopping behavior, default retailers and much more.

Add a recipe to list:

whisk.queue.push(function() {
    whisk.listeners.addShowListener("shoppingList.addRecipeToList", {
        recipeUrl: "https://whisk.com/demo/calzone-roasted-peppers/"
    })
});

Set default retailer and buy products:

whisk.queue.push(function() {
    whisk.listeners.addShowListener("shoppingList.addProductsToBasket", {
        products: ["coffee", "ice cream"],
        onlineCheckout: {
            defaultRetailer: "US:Walmart"
        }
    })
});

Set allowed retailers and starting page as Store Login:

whisk.queue.push(function() {
    whisk.listeners.addShowListener("shoppingList.addProductsToBasket", {
        products: ["coffee", "ice cream"]
        onlineCheckout: {
            allowedRetailers: ["GB:Tesco", "GB:Ocado", "GB:Waitrose"],
            autoPick: true
        }
    })
});

To see a list of available methods and parameters visit the SDK reference.

• Lastly, you need to add ?whisk-show=1 to the URL you want to send users to, this parameter will trigger the Whisk shopping functionality automatically.

  https://your-domain.com/recipe.html?whisk-show=1

Analytics and event tracking

The Whisk shopping list SDK tracks many events and data points. These analytics can help you measure performance, analyze traffic and learn more about how your customers are interacting with the shopping tools.

Most of the analytics are only available to paid customers, although the SDK does have a Subscription service that allows you to tie in your own analytics for some basic events.

In all cases for analytics, you’ll need a trackingID so we can link all data to your account. Please contact us for more information.

Full dashboard

Whisk offers a full, interactive analytics dashboard showing site-wide performance of Whisk on your website. This contains all information about how users are interacting with the shopping tools, you can sort by date range or devices and even export data.

image alt text

Subscriptions

Subscriptions allow you to call any function you want in response to an SDK event. This will allow you to send events to your own analytics package.

For example, you can send an event to Google Analytics every time the Whisk button was viewed:

whisk.events.subscribe('whisk-single-recipe', 'view', function() {
    // your custom code, for example:
    ga('send', {
        hitType: 'event',
        eventCategory: 'Whisk widget',
        eventAction: 'view',
        eventLabel: 'Fall Campaign'
    });
});

The exact list of events is defined by integration type. See events available for click listeners and widgets.

View the Subscriptions API for more information.

More configuration options

Whether you use the widget builder or create buttons yourself using Event Listeners, there are many parameters available that let you customize various parts of the experience, from the default language to which retailers a user sees.

View the SDK Reference to see all parameters, their definitions, and possible values.