The LiveFeed element allows you to embed the feed from your blogs, product feeds, inventory feeds and many more data sources. Typical data sources are RSS, XML or JSON.
Examples of use cases are up-to-date pricing and inventory, loyalty points, RSS feed on a blog, XML feed from an airline with flight updates, JSON feed from a new social platform.
With LiveFeed you typically track clicks and conversions.
Note: LiveFeed is an advanced feature of Liveclicker and requires knowledge of CSS and JavaScript.
In this topic, we will discuss the different configuration options specific for the LiveFeed element as well as the preview and embed codes. Check out the topic Create a new campaign first for more information on how to initially create a campaign.
Once a LiveFeed campaign is created, a series of steps need to be followed:
Configure the LiveFeed
Note: To be able to use LiveFeed, you need to set up your LiveFeed Connector code and Appearance in your Account Settings.
Configure basic settings
The settings configured in the Basic Settings section apply to all the different versions of the element, if these exist.
Linking — In the basic settings you can define if a clickthrough URL is required or only the embedded image, without the possibility to click through. If the option is selected to add a clickthrough URL, you will have to define the URL further down in the configuration of the element.
Alt text — This is the text that will be displayed when the feed cannot be rendered. It is recommended to always set an alt text in case openers have disabled image rendering in their email clients or for openers that use screen readers. The alt text is appended to the embed code of the element.
Click Save and Next, to continue to the next step: the configuration of the elements.
Further configuration of LiveFeed
When a LiveFeed campaign is created, there is always a default LiveFeed that will be the fallback when the targeting rules do not apply to the opener of the email or when no targeting rules have been defined.
Start by configuring the default LiveFeed:
1. Start by defining the dimensions for the live feed.
2. Next, enter the LiveFeed URL. (This URL is referenced in the Connector Code as the _sourceUrl JavaScript variable, and it is configurable in the user interface.)
The URL must link directly to a formatted feed and will be processed by the Connector Code. Your LiveFeed source URL can have any format, as long as the Connector Code is able to parse that format.
3. Select the Connector Code used to fetch and render the LiveFeed. If you do not have one yet, configure it now. The Connector Code is always written in JavaScript. You can find more information on the Connector Code itself in this dedicated topic.
4. Select the Appearance to apply to the LiveFeed. If you do not have one yet, configure it now.
Note: Liveclicker will render the result on an internal page that contains the connector code and the CSS. It will then scrape this page and the resulting image will be used as an embeddable feed element in your campaign. By default, this page is scraped every 10 minutes.
You can find more details on this webscrape process in the Content Refresh Policies.
5. Indicate if you want to use custom variables for the LiveFeed. This allows you to use ESP data to personalize your LiveFeeds. Note that this requires custom fields to be set up for your environment. For more information on how to set these up, read the corresponding topic on Custom fields.
Example:
Indicate you want to use the Custom Variable FirstName in your liveFeed.
The value passed as first name by the ESP via the custom feed tags will be made available in JavaScript via the _customVariableEncoded variable. As its name indicates, _customVariableEncoded needs to be decoded using decodeURIComponent() if necessary.
_myFeed.render = function(data, options) {
// renders on the page
var stringInsert = "", dateTime;
var textInsert = ((_customVariableEncoded !== "") ? "" + decodeURIComponent(_customVariableEncoded.replace(/\+/g," ")) : "");
$.each(data.responseData.feed.entries, function(e, item) {
stringInsert += '<li><div class="itemTitle">' + item.title + '</div>';
stringInsert += '<div class="itemPrice">' + item.price + '</div>';
stringInsert += '<div class="itemRemaining">Hurry' + textInsert + '! only ' + item.remaining + ' left!</div>';
stringInsert += '<div class="itemImage"><img height=147 width=186 src="' + item.image + '"></div>';
stringInsert += '<div class="itemWant"><a href="#" class="wantone">i want one</a></div>';
});
$targetElem = $("body").append("<div id='targetContainer'><ul class='feedlist'>" + stringInsert + "</ul></div>");
} 6. If you have activated the option to use a clickthrough URL in the basic settings, enter a Clickthrough URL here. This will allow viewers of the feed to click it and go straight to the set URL.
Note: You can use a regular clickthrough link or a mobile deeplink. Mobile deeplinks are URLs that the mobile device will interpret as an instruction to open the app if it is installed, and go to a specific location in the app. If the app does not exist, in general it will take the opener to the location where the app can be downloaded.
Note 2: Clickthrough URLs can be personalized with ESP tags. Please check out our dedicated topic on this subject if this is something you consider doing.
7. Indicate if you want to dynamically update the Clickthrough URL using the Custom Connector Code. If you check this option, you need to include additional code in the Connector Code.
8. A fallback image needs to be provided in case the LiveFeed element cannot be shown in the email, or, when account overages occur.
Upload an image from your local device or from the Media Library.
Note: If it isn't possible to generate a new image for the LiveFeed element and it is past the expiration time, it is possible to serve the last successfully generated image, instead of delivering the fallback image.
To do this, the corresponding account property should be enabled, so that the last successfully generated image for the element will be remembered at least 24 hours after the expiration time of the element. To enable this property, contact your Customer Success Manager.
9. Define a fallback URL.
10. If you want to add more versions of the LiveFeeds, click the Add Alternate LiveFeed button at the bottom and execute the same steps for each new version added.
Else, click Next and continue with the targeting rules.
Define targeting rules and AB tests
1. In this last step, you can decide which subscriber should get a specific version of the LiveFeed element through the use of targeting rules. A targeting rule will split up the audience and only target a segment of the audience with a specific version. There are 2 options:
-
Define targeting rules from scratch.
-
When you have already defined targeting rules for a different element in this campaign, you can re-use these targeting rules for the current element.
For more details on targeting rules, please check out the dedicated topic.
2. In addition, you can also set up AB testing for this element. With A/B testing the final version of the LiveFeed shown to the remainder of the audience, is determined by the A/B test.
3. When done, click Continue. You are taken to the next element to configure, if any. Otherwise, you are taken to the Preview.
Preview and test
The Preview tab for your campaign becomes available when all elements in your campaign have been configured. It provides you with the ability to test the look and rendering of the elements in your campaign, either as a static preview or as a dynamic preview, simulating an opener. You can also send yourself or others an email preview.
For more details on how to test your elements using preview, please read the corresponding topic.
Retrieve the embed codes
In this last step, you need to provide some estimated campaign details, such as expected opens, launch date and expiration date, as well as the Subscriber ID field.
All this information will be used by Liveclicker to optimize resources but also to create the embed code.
For more details on the Embed codes, check out this topic.
