Email widgets

In addition to being able to place dynamic, data-driven product selection widgets onto your website, TasteHit lets you do the same in the emails you send out. The product selections in the emails you send out will be generated at the moment the email is opened.

Open-time product selections

Imagine you run a shop selling various clothing articles. You send out an email campaign (containing TasteHit email widgets) on Jan 1st advertising your most popular products this week. Customers who open your email in January might get product selections for skiing articles, whereas customers who open your email much later (say in summer) might get product selections for summer clothing or bathing articles.

You can also send out fully personalized product selections. The articles recommended to your customers will depend on their previous purchase history. Since the product selections will be generated the moment the email is opened, TasteHit will take into account the customer's newest purchase history, as well as which products you currently have in stock.

Such is the power of open-time product selections.

Overview

Basic principle

Before going into the details on how to set up email product selections, let us take a higher-level look into how product selections can be inserted into emails.

A single product selection in an email is a short piece of HTML code, which looks something like this:

1
2
3
<a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?[someparameters]">
  <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?[someparameters]">
</a>

(Don't worry, you won't have to type any HTML code by yourself, TasteHit's dashboard will generate this for you.)

When a customer opens the email, an image (the <img ...> part) will be generated by TasteHit's servers. This image will contain the image of the product we recommend to your customer, as well as any additional data you choose to display (e.g. product title and price).

If your customer clicks on this image, TasteHit will redirect this customer to the product page corresponding to this image (this is done thanks to the <a href ...> part). To make sure that we always redirect your customers to the correct product page, we make use of a product selection cache: When the product selection image is first generated, we remember which product we recommended to your customer. If your customer later clicks on this product selection, we will make use of this cache to make sure we redirect him correctly.

Prerequisites

The configuration of the graphics and algorithms of email widgets is graphically similar to the configuration of web widgets. The fact that email widgets use a product selection cache (described further down) makes the interface slightly more complex, though.

To include completely personalized product recommendations in your emails, you will also have to upload a file containing the purchase history of your customers. This step is optional: You can use all algorithms except Recommendations, Visited, and Wishlist without going through this step.

The recommended workflow for configuring and then using an email widget in your email campaings is as follows. First, create an email widget, and change the parameters as you see fit. Then, test your widget by generating previews (described later). During this stage of the workflow, you can change graphical and algorithmic parameters as often as you like. You can also clear the product selection cache as often as you like.

Once you are satisfied that your email widget behaves as desired, and are ready to use it in an email campaign, we strongly encourage you to:

  • NOT clear the cache of the email widget
  • NOT change the algorithm of the email widget
  • NOT change the filters of the email widget

Not following this workflow might result in unexpected behavior. We will explain this in more detail when describing the product selection cache.

Configuration

Graphics

The graphical configuration of the email widgets is conceptually similar to the configuration of web widgets:

Graphical Configuration

You can configure:

  • A title (e.g. "popular products this week"), which will be displayed as an image in the email widget.
  • The font and alignment of the product description text.
  • The font and various other properties of how the price of the product will be displayed.

Each time you change the graphical configuration can click "Apply" or "Save All" on the top right of the screen, the "Graphics Preview" at the top of the page will be updated in order to take into account your latest changes.

Graphics Preview

The graphics preview picks a random product from your catalog. It is therefore only suited for testing your graphics configuration, and not the configuration of the algorithm and filters.

Algorithms

The configuration of the algorithm in the email widgets is even more similar to the configuration of web widgets than the graphical configuration:

Algorithm Configuration

A difference is that the number of algorithms you can choose from is somewhat more limited: In email widgets, you cannot choose an algorithm that depends on a "context" item (since there is no concept of "context" in an email). The same is true for the configuration of the filters: You cannot set filter rules that depend on a context item.

Filters

The filters used in emails work the same way as what is described for web-widgets. The only difference is that there are no conditions for applying the filters based on context or widget information: filters are simply applied all the time.

For more information, please refer to the web-widgets filter section.

Placement

The placement of widgets in HTML email templates consists of copy-pasting the HTML code displayed in the "Generate a preview section".

Testing with previews

To test your configuration of the algorithm and the filters, you can generate a "preview". Clicking on "Generate the preview" will generate some HTML code that you will be able to copy-paste into your email campaign.

Preview

You need to specify an email address to generate a preview, but if you use an item selection algorithm such as "Popular" which is not personalized to individual customers, it doesn't matter which email address you use. You can just enter any string (we will use "testemailaddress").

You do not need to specify a language nor a location if your product catalog is independent of language and location. We will leave the other fields blank too for now.

After clicking on "Generate the preview", we might see something like this:

Generated preview

We see that no purchase history could be found for the customer with email address "testemailadress", which is expected, since we entered a non-existant (and invalid) email address.

Below the history, we see an image containing the title we selected for the email widget, as well as four product selections. These products were selected by the algorithm and filters we set up for the email widget. Below that, we see the HTML code that was used to generate the preview. The generated HTML might look something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<table><tr>
  <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/titleimg?email=testemailaddress&widgetid=campaign1">
  </tr><tr>
  <td>
    <a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?email=testemailaddress&widgetid=campaign1&limit=4&skip=0" target="_blank" style="margin-right:10px">
    <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?email=testemailaddress&widgetid=campaign1&limit=4&skip=0"></a>
  </td>
  <td>
    <a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?email=testemailaddress&widgetid=campaign1&limit=4&skip=1" target="_blank" style="margin-right:10px">
    <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?email=testemailaddress&widgetid=campaign1&limit=4&skip=1"></a>
  </td>
  <td>
    <a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?email=testemailaddress&widgetid=campaign1&limit=4&skip=2" target="_blank" style="margin-right:10px">
    <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?email=testemailaddress&widgetid=campaign1&limit=4&skip=2"></a>
  </td>
  <td>
    <a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?email=testemailaddress&widgetid=campaign1&limit=4&skip=3" target="_blank" style="margin-right:10px">
    <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?email=testemailaddress&widgetid=campaign1&limit=4&skip=3"></a>
  </td>
</tr></table>

We notice that the images and links contain the email address we entered, in the form of a query parameter: email=testemailaddress.

When sending an email compaign to your customers, this parameter should contain the email address of the customer to which you are sending the email (for each email you send out). Most email marketing tools have a variable which allows you to do this. In MailChimp, this is known as a merge tag. The name of this merge tag is *|EMAIL|*. We generate a new preview, this time using *|EMAIL|* as an email address:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<table><tr>
  <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/titleimg?email=*|EMAIL|*&widgetid=campaign1">
  </tr><tr>
  <td>
    <a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?email=*|EMAIL|*&widgetid=campaign1&limit=4&skip=0" target="_blank" style="margin-right:10px">
    <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?email=*|EMAIL|*&widgetid=campaign1&limit=4&skip=0"></a>
  </td>
  <td>
    <a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?email=*|EMAIL|*&widgetid=campaign1&limit=4&skip=1" target="_blank" style="margin-right:10px">
    <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?email=*|EMAIL|*&widgetid=campaign1&limit=4&skip=1"></a>
  </td>
  <td>
    <a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?email=*|EMAIL|*&widgetid=campaign1&limit=4&skip=2" target="_blank" style="margin-right:10px">
    <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?email=*|EMAIL|*&widgetid=campaign1&limit=4&skip=2"></a>
  </td>
  <td>
    <a href="https://www.tastehit.com/api/yktIXwGjv9qMdg/href?email=*|EMAIL|*&widgetid=campaign1&limit=4&skip=3" target="_blank" style="margin-right:10px">
    <img src="https://www.tastehit.com/api/yktIXwGjv9qMdg/imgwithdescr?email=*|EMAIL|*&widgetid=campaign1&limit=4&skip=3"></a>
  </td>
</tr></table>

This HTML code could now be copy-pasted into a template in MailChimp, and used as-is.

The other query parameters have the following meaning

  • widgetid

    The widget id identifies which email widget should generate the product selection to be displayed in the email. You can configure as many email widgets as you like, and also use as many email widgets as you like within a single email.

  • limit

    This parameter tells TasteHit how many product selections shall be generated. In this example, we displayed a total of four product selections. This parameter is to be used in combination with the skip parameter.

  • skip

    This parameter must be larger or equal to 0 and inferior to the value of the limit parameter. It identifies which product selection to generate. E.g. using the Popular algorith, skip=0 will refer to the most popular product, whereas skip=1 refers to the second-most popular product.

Additional parameters:

  • Language

    This parameter is only useful if you use a product catalog that has several languages. E.g. assuming you have a French (fr) and German (de) product catalog, you would set Language to fr for your French newsletter and to de for your German newsletter. In the query parameters, this would look like lang=fr.

  • Location

    This parameter is only useful if you have a product catalog does has different languages and locations. The principle is identical to the language. The generated query paramter looks like loc=FR.

  • Fallback items

    Fallback items as useful in case TasteHit is unable to generate a recommendation for a customer. This may happen for example if the filters you configured are too stringent and no products that match the filters could be found. This also happens if you configured a personalized product selection algorithm such as "History" and we are unable to find a purchase history for this user. In this case, without fallback items, TasteHit will return a transparent image of size 1x1. The image containing the title of the image will also not be displayed. In other words, no recommendations will be visible.

    In case you would like to display products you chose yourself in these situations, you can define a fallback item for each product selection. In that case, instead of displaying a transparent 1x1 pixel image, the product you defined as fallback will be displayed.

  • Additional query parameters

    If you want to track the performance of your campaign using e.g. Google Analytics, you can add the tracking parameters here. For Google Analytics, these tracking parameters usually look something like this:

    ?utm_source=XXX&utm_medium=XXXXXX&utm_campaign=XXXXX

    Any query parameters added here will be appended to the URL to which your customers are redirected when they click on a TasteHit product selection.

You can edit the HTML code generated for you by TasteHit, but you have to be careful when doing so. If you wish to generate more or fewer recommendations, you have to remember to change the limit and skip parameters. You also have to make sure that the parameters in the links and the images are exactly the same.

Product selection cache

The product selection cache is important because TasteHit's product selections are dynamic (they change over time) and because of the fact that your customers will click on a product selection later (sometimes much later) than when the product selection image was generated. During the time-period between when the product selection image was generated and when the customer clicks on the product selection, TasteHit's product selection could have changed (since they are dynamic). This is undesirable in this case, because we risk redirecting the customer to a different product than the product that was displayed to him in the image.

Email services such as GMail cache all images in an email (on Google servers) the first time an email is opened. The first time one of your customers who uses GMail opens one of your emails, the product selection images will be generated by TasteHit. The second time he opens the email, the product selection images will come from GMail's cache. Therefore, TasteHit cannot change the product selection image after the first time it was requested. Because of this image caching system, it is possible that customers click on a product selection many days after it was first requested.

Side-effects

The product selection cache solves this problem, but it is important to understand how it works in order to avoid undesirable side-effects.

When the email widget is newly created and has not yet been used to generate product selections, you will see this

in the "Widget content preview" part of the dashboard. Once the widget has been used to generate product selections - either because you sent out a campaign, or because you generated previews - something like this will be displayed:

Product selections are stored in the TasteHit cache based on the query parameters. This means that once a product selection has been generated for a given parameter set (e.g. a certain email address), this recommendation will not change, even if you change the algorithm or the filters. If you have not yet started your campaign, this is no problem: you can just clear the cache by clicking on the "Clear Cache" button. If you have already started a campaign, we advise strongly against clearing the cache.

If you want to start a second email campaign, using the same widget, we recommend changing some parameters, e.g. the "Additional query parameters", or adding a parameter in the "Additional query parameters" such as a campaign id. If this parameter is different in the two campaigns, the product selections will be cached in two different locations. This will avoid suggesting the same products to the same customers in the two campaigns.

Uploading purchase history

(this step is optional)

In order to use fully personalized product selection algorithms such as the "Recommendations" or "History" algorithm in emails, you need to provide TasteHit with a file containing the purchase history of your customers. TasteHit will correlate this data with activity on your website in order to provide new product suggestions to your customers, based on their purchasing history.

The procedure for creating and uploading your purchase history file is documented in the catalog→purchase history section.

Getting started

Checklist

  • If you want to use personalized product selections, upload a purchase history file.
  • Configure the graphics, algorithm, and filters of your widget(s).
  • Test your widget with previews. Clear the cache as often as you like or need to.
  • Set a campaign id parameter in the "Additional query parameters" or something similar which is unique for each email campaign.
  • Insert the HTML generated by TasteHit into your campaign template. Remember to use a variable such as a merge-tag for the email address of your customers.

Once you started a campaign

Do NOT clear the cache. This might cause your customers to be redirected to the wrong product pages.

Comments