General introduction to Email Smart Content
General introduction to Email Smart Content
Email Smart Content works the same way as Web Smart Content. It's also composed of an algorithm, filters and graphics.
Recommendations allows you to integrate personalized product selections inside email campaigns sent through Marigold Engage. The product selections in the Smart Content will be generated at opening time, based on the user's previous history (browsing behavior, purchase history) and information available about this person in Marigold Engage.
Placement
To place your Smart Content, you simply drag and drop the following component inside your email in the Marigold Engage responsive design editor or the WYSIWYG configurator :
By clicking on the Smart Content block, you can configure display properties :
Smart Content in an email is composed of several products, each of which is generated by a short piece of HTML code, which looks like this :
<a href="https://[domainAI]/api/yktIXwGjv9qMdg/href?[someparameters]">
<img src="https://[domainAI]/api/yktIXwGjv9qMdg/imgwithdescr?[someparameters]">
</a>
Note: This code is only here for explanation purposes as it's completely managed in the Recommendations dashboard.
When a consumer opens the email, an image (the <img ...> part) is generated by Recommendations's servers. This contains the product image recommended to this consumer, as well as any additional data you choose to display (e.g. product title and price).
If the consumer clicks on this image, Recommendations redirects them to the product page corresponding to this image (this is done thanks to the <a href ...> part). To make sure that the consumers are always redirected to the correct product page, a product selection cache is used. When the product selection image is first generated, it remembers which product was recommended to the consumer. If this person later clicks on this product selection, this cache is used to make sure they're redirected correctly.
Note: As described in the Recommendations main section, the data that Recommendations uses to generate these product selections, is composed of consumer browsing behavior, personal data, context information and configuration.
Recommended workflow
The recommended workflow for configuring and using Smart Content in your email campaigns is as follows.
First, create Smart Content, and change the parameters as you see fit.
Then, test your Smart Content 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're satisfied that your Smart Content behaves as desired, and you're ready to use it in an email campaign, we strongly encourage you to :
- NOT clear the cache of the email Smart Content
- NOT change the algorithm of the email Smart Content
- NOT change the filters of the email Smart Content
Failure to follow this workflow may result in unexpected behavior. This is explained in more detail in the description of the product selection cache.
Configuration
Graphics
For 'Email' Smart Content, you can build your Smart Content in a visual way.
The Email Graphics Editor consists out of 4 main sections :
On the left, there are buttons to add objects onto the canvas and define their settings.
In the middle, there's the canvas on which you design.
On the right, a preview can be rendered to validate the actual outcome of your design.
On the top, action buttons are available for the design canvas and for the preview.
Note: A complete description and demo of the Smart Content Email Graphics Editor can be found here.
Preview
Each time you change the graphical configuration and click "Save" at the top-right of the screen, the "Preview" is updated in order to take your latest changes into account.
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.
Testing with content previews
Smart Content preview type 'Email'
To display a content preview for a particular Engage/Campaign user, the following settings can be defined for Email Smart Content :
- MASTER.ID — The Master ID of the Engage/Campaign user.
- Language (optional) — If your catalog has different languages, you can specify which language should be used to show content from (e.g. French).
- Additional query parameters (optional) — e.g. for campaign tracking: utm=XXXXX&myparameter=YYYYY
- Fallback items (optional) — For items 1 to 4, fallback items can be defined in the form of the product PID, in case the algorithm is unable to find a product for the selected user.
Click on the 'Generate the preview' button to see the content preview for the Engage/Campaign user corresponding to the Master ID (and other defined settings).
If you would like to use the Smart Content inside the Campaign (Windows) client, you can use the following button to copy-paste the HTML code :
This generated HTML code might look something like this :
<table border="0" cellpadding="0" cellspacing="0" width="700" id="tastehit_widget_JJO_Email_SC">
<tbody>
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center;">
<img src="https://[domain]/api/[key]/titleimg?tpid=1&widgetid=JJO_Email_SC"
style="max-width: 100%">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="700" id="tastehit_widget_JJO_Email_SC">
<tbody>
<tr>
<td align="center" valign="top" width="25%" class="col_0">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<a href="https://[domain]/api/[key]/href?tpid=~SYSTEM.SELLIGENTID~&widgetid=JJO_Email_SC&limit=4&skip=0&fallbackitem=1"
style="max-width: 100%; display: block; height: auto;" alt="" border="0" target="_blank">
<img src="https://[domain]/api/[key]/imgwithdescr?tpid=~SYSTEM.SELLIGENTID~&widgetid=JJO_Email_SC&limit=4&skip=0&fallbackitem=1"
style="max-width: 100%; display: block; height: auto; margin:0 auto;" alt="" border="0">
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center" valign="top" width="25%" class="col_1">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<a href="https://[domain]/api/[key]/href?tpid=~SYSTEM.SELLIGENTID~&widgetid=JJO_Email_SC&limit=4&skip=1&fallbackitem=2"
style="max-width: 100%; display: block; height: auto;" alt="" border="0" target="_blank">
<img src="https://[domain]/api/[key]/imgwithdescr?tpid=~SYSTEM.SELLIGENTID~&widgetid=JJO_Email_SC&limit=4&skip=1&fallbackitem=2"
style="max-width: 100%; display: block; height: auto; margin:0 auto;" alt="" border="0">
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center" valign="top" width="25%" class="col_2">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<a href="https://[domain]/api/[key]/href?tpid=~SYSTEM.SELLIGENTID~&widgetid=JJO_Email_SC&limit=4&skip=2&fallbackitem=3"
style="max-width: 100%; display: block; height: auto;" alt="" border="0" target="_blank">
<img src="https://[domain]/api/[key]/imgwithdescr?tpid=~SYSTEM.SELLIGENTID~&widgetid=JJO_Email_SC&limit=4&skip=2&fallbackitem=3"
style="max-width: 100%; display: block; height: auto; margin:0 auto;" alt="" border="0">
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center" valign="top" width="25%" class="col_3">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<a href="https://[domain]/api/[key]/href?tpid=~SYSTEM.SELLIGENTID~&widgetid=JJO_Email_SC&limit=4&skip=3&fallbackitem=4"
style="max-width: 100%; display: block; height: auto;" alt="" border="0" target="_blank">
<img src="https://[domain]/api/[key]/imgwithdescr?tpid=~SYSTEM.SELLIGENTID~&widgetid=JJO_Email_SC&limit=4&skip=3&fallbackitem=4"
style="max-width: 100%; display: block; height: auto; margin:0 auto;" alt="" border="0">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>Smart Content preview type 'Web'
For type 'Web' (selected in the 'Graphics' section of Smart Content), testing with previews mainly works the same way as for type 'Email'.
To display a content preview for a particular Engage/Campaign user, the following settings can be defined for Web Smart Content :
- MASTER.ID — The Master ID of the Engage/Campaign user.
- Language (optional) — If your catalog has different languages, you can specify which language should be used to show content from (e.g. French).
- Additional query parameters (optional) — e.g. for campaign tracking: utm=XXXXX&myparameter=YYYYY
- Page URL (optional) — The page URL where the Smart Content will be displayed. In order to have effect on the content preview, this page URL needs to be available in the product catalog and a Smart Content algorithm needs to be selected that takes this into account (e.g. the 'Statistics > Related' algorithm).
Click on the 'Generate the preview' button to see the content preview for the Engage/Campaign user corresponding to the Master ID (and other defined settings).
Query parameters to be used in Smart Content
The other query parameters which can be used inside Smart Content are the following:
- Smart Content id — The Smart Content id identifies which email Smart Content should generate the product selection to be displayed in the email. You can configure as many email Smart Content setups as you like, and also use as many email Smart Content blocks as you like within a single email.
- limit — This parameter tells Recommendations how many product selections shall be generated. This parameter is to be used in combination with the 'skip' parameter. (If a limit is defined in the configuration of the Smart Content, then that limit will take priority over the one defined in the URL)
- 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.
Note: When, for example, using 3 products on desktop and 4 on mobile, this parameter should be set to 4.
Example:
Using the 'Popular' algorithm, '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 containing different languages and locations. The principle is identical to the language. The generated query parameter looks like this : loc=FR.
- Fallback items — Fallback items are useful in case Recommendations is unable to generate a recommendation for a consumer. 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're unable to find a purchase history for this user. In this case, without fallback items, Recommendations 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.
If 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. (If a 'Fallback algorithm' was defined in the configuration of the Smart Content, then that takes priority) - campaignid — The goal of this parameter is to have some kind of value (e.g. "20181126") that changes every time a new occurrence of the journey is run. Every time this number changes, a new entry is created in the recommendations cache (which makes sure that the link and image are in sync).
- dummy parameters are used to surpass the caching functionality of Smart Content.
- itemarray holds an array of productids that define the context of the email. The context works in a similar way as the context of a page (specific product page) to be able to use the 'related' and 'smart cart' algorithms. The parameter value must be URL encoded. Smart Content will iterate over the provided items and the first available product will be the contextual product for this email.
- timeStart and timeEnd are used for algorithms such as 'popular', 'unpopular' and 'performance', to specify a time span in which the algorithm has to assess the popularity of items. The format has to be a number of seconds since 1/1/1970.
- 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 the consumers are redirected when they click on a Recommendations product selection.
Example:
&lang=~MASTER.LANGUAGE~
Example:
&loc=~MASTER.COUNTRY~
Example:
&fallbackalgo=popular or &fallbackalgo=trending
Example: &campaignid=~SYSTEM.CAMPAIGNID~~SYSTEM.ACTIONID~~SYSTEM.YEAR~~SYSTEM.MONTH~~SYSTEM.DAY~
Warning : Do not use SYSTEM.YEAR, SYSTEM.MONTH, SYSTEM.DAY when including Engage/Campaign PROBES as these parameters will change over time, at the time of clicks.
Example:
&itemarray=%5B%22pid1%22%2C%20%22pid2%22%5D which is encoded from ["pid1","pid2"]
Example:
&timeStart=1540288000&timeEnd=1548288000
Note: All of these parameters need to be applied both for links and images (also the image title) !
Example :
You can edit the HTML code generated for you by Recommendations, 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 Recommendations's product selections are dynamic (they change over time) and because of the fact that the consumers 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 consumer clicks on the product selection, Recommendations's product selection could have changed (since they are dynamic). This is undesirable in this case, because the risk exists that the consumer gets redirected to a different product than the product that was displayed to them in the image.
Most of the email cloud services (e.g. Gmail) and clients cache images in an email (on their servers) the first time an email is opened. The first time that one of the consumers who uses such a service, opens one of your emails, the product selection images will be generated by Recommendations. The second time they open the email, the product selection images will come from their cache. Therefore, Recommendations can't change the product selection image after the first time it was requested. Because of this image caching system, it's possible that consumers click on a product selection many days after it was first requested.
Side-effects
The product selection cache solves this problem, but it's important to understand how it works in order to avoid undesirable side-effects.
When the email Smart Content is newly created and has not yet been used to generate product selections, you will see this in the "Smart Content content preview" part of the dashboard. Once the Smart Content 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 Recommendations 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 strongly advise NOT clearing the cache.
If you want to start a second email campaign, using the same Smart Content, 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 consumers in the two campaigns.
Checklist
Here are some bullet points you should respect to make sure your campaign, which contains dynamic product selections, behaves as expected.
- Configure the graphics, algorithm, and filters of your Smart Content.
- Test your Smart Content 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 Recommendations into your email/template. Remember to use a variable such as a merge-tag for the email address of the consumers.
- Once you started a campaign, do NOT clear the cache. This might cause the consumers to be redirected to the wrong product pages.
Example : Include random recommendations in messages
Related Topics