Live Content

Blueshift's dynamic recommendations & segmentation technology can be used in websites, mobile web and in-app to drive higher engagement for owned & operated sites. Powered by Blueshift's "Live content" offering, marketers can insert dynamically recommended content and complete the user experience from offsite messaging (email, push messages, SMS) to on-site messaging (website, mobile web & mobile apps). Live content allows targeting based on real-time user behavior by leveraging user attributes, click-stream and campaign engagement data, along with machine-learning driven content recommendations built with Recommendation Studio.

Your website/app marks one or more "slots" on web pages/screens where dynamic content is inserted from Blueshift's Live content APIs for personalizing user's experience. A slot is a placeholder where targeted content should be shown. You may include multiple slots on a page, to insert multiple targeted content widgets for users like "Trending content in their city" and "People who saw this item, also bought these other items".

Here is an example from blueshiftreads.com:

fcc08b7-Screen_Shot_2017-02-20_at_3.33.44_PM.png

Sample related content widget on blueshiftreads.com from the same author as the book the user is currently browsing.

93020a1-Screen_Shot_2017-10-16_at_10.58.23_AM.png

 

A slot may show different content to the user depending on which segment he/she is in. As an example:

  • For "VIPs": Eg: Show loyalty points balance and user's most frequently purchased item for replenishment
  • For "New users": Eg: Trending items on the site/app
  • For "Abandoned browse": Eg: The abandoned item along with similar items bought together
  • For "Inactive": Eg: Re-activation products on steep discounts.

Blueshift can identify which segments a user is a part of and pick the right campaign/content for that user. The content presented to the user may include dynamic user attributes or recommended items from an item catalog (built with Recommendation Studio).

"Live content" campaign reports show aggregate impression, click and down-stream purchase/revenue reporting, as well as detailed user-level engagement reporting.

This offering is easy to integrate with an HTML/javascript tag for websites or a REST/JSON API call for server-side or mobile apps.

"Live content" supports several use-cases for "segment of one" user targeting on websites and mobile apps, including:

  • Static & segmented banners: Static banners/creatives targeted to users via segmentation for promotions/VIPs/loyalty
  • Recommended content: Dynamic content recommendations showing users recent browsed/abandoned & similar items as reminder or any other content targeting created with Recommendation studio
  • In-app push: Segmented+personalized message push available inside app each time the user starts the app or responds to a Push message
  • Related products: For product pages, “people who saw this also saw that”
  • Cross-sells: For post purchase confirmation page, “people who bought this also bought that”
  • Reminders: For user landing pages, “Our best picks for you”, “Trending content”, “Back in stock” and similar.

1. Setup slots

Targeted content may be inserted in websites, mobile web and in-app by setting up 'slots'. A slot identifies a block on the webpage/screen where dynamic content from Blueshift's live campaigns is included. Multiple slots may be included on the same webpage or mobile screen. A slot has a "name" to uniquely identify the slot, so Blueshift can merchandise the right content for the slot.

For instance, an item page may include two slots: a vertical right banner for similar items and a bottom banner showing trending content from the same category.

4b777c2-Screen_Shot_2017-10-16_at_10.59.10_AM.png

Create a new Slot by clicking on the action menu on the top right of the page:

6VQmC3f7RXq4ICAqrPJM_Screen_Shot_2016-07-15_at_11.06.56_AM.png

Creating a new slot, requires:

  • Slot name: The slot name (example: item_detail_page_right_sidebar) should uniquely identify where the slot will be used. The slot name will be subsequently used in API calls or Javascript tags, so that the right dynamic content can be included for each slot.

  • Slot type: The slot type can be HTML (for HTML/javascript tag based integration in websites/mobile web) or JSON (for API integration such as for mobile apps). For HTML slots, the slot dimension needs to be added which ensures that the content template fits the slot dimensions.

373d28d-Screen_Shot_2017-10-16_at_10.57.01_AM.png

The height and width are optional for HTML content slots, but it is recommended that you add those. Doing so will ensure that HTML templates that do not meet the slot dimensions are excluded from campaign setup.

52c16b2-Screen_Shot_2017-10-16_at_10.49.42_AM.png

2. Add API calls to website / mobile apps

In order to show dynamic content to users, website and mobile apps need to make dynamic API calls each time a user views a page. These are done with either a REST/JSON API call or a HTML/javascript tag. You can read the Live Content API guide here for integrating with the API.

HTML or REST/JSON, which integration should I pick?
You should pick REST/JSON based integration if you plan to integrate live content recommendations in your mobile apps or from server-side calls from your websites. The REST/JSON API integration allows you to do more complex checks on your server-side before presenting content to the user. You may want to do that to filter out certain items based on business rules.

If you are planning to insert dynamic content recommendations on your website without complex business rules for filtering recommendations, you can use the HTML/Javascript based recommendation tags. The HTML based integration allows you to tweak the rendering of content easily within the Blueshift dashboard.

HTML based integration setup
If you plan to integrate with HTML widgets you need to include the blueshift.live() initialization call and setup the "div" tag where the HTML widget would be dynamically inserted.

Here is an example for calling blueshift.live() in the initialization Javascript. You can add this call on the event-tracking pixel you may have already included on the page:

  • JavaScript
<script type="text/javascript">
window._blueshiftid='5dfe3c9aee8b375bcc616079b08156d9';window.blueshift=window.blueshift||[];if(blueshift.constructor===Array){blueshift.load=function(){var d=function(a){return function(){blueshift.push([a].concat(Array.prototype.slice.call(arguments,0)))}},e=["identify","track","click","pageload","capture","retarget","live"];for(var f=0;f<e.length;f++)blueshift[e[f]]=d(e[f])};}
blueshift.load();
blueshift.live();
blueshift.pageload();
if(blueshift.constructor===Array){(function(){var b=document.createElement("script");b.type="text/javascript",b.async=!0,b.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.getblueshift.com/blueshift.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);})()}
</script>
      

The blueshift.live() call takes slot context as parameters which include the slot name and attributes:

  • seed_item_ids: Array of catalog item(s) the user is viewing or interacting with and is used as basis for recommendation. This is useful for recommending content like: "users who saw this item, also bought these items".
  • exclude_item_ids: An array of catalog item ids that should be excluded from recommendation results
  • exclude_categories : An array of categories to exclude from recommendation results

If you have multiple slots on the page you can customize the exclude_item_ids and seed_item_ids for each slot.

Example:

  • JavaScript
blueshift.live({
    product_banner: {
      exclude_item_ids: ["9780141325293"],
      seed_item_ids: ["9780141325293"],
      exclude_categories: ["Fiction > SciFi"]
    },
    product_category_bottom: {
      exclude_item_ids: ["9780141325293"],
      seed_item_ids: ["9780141325293"],
      exclude_categories: ["History > Unknown"]
    }
  });

Add the "div" tag with the HTML slot you created above. The "data-bsft-slot" attribue key's value is the slot name that should be updated. Substitute the slot "product_banner" below with the slot name you may have created. The blueshift.live() call after initialization looks for all "div" with "data-bsft-slot" attribute, and makes a call to Blueshift servers for inserting dynamically recommended content in an iframe under the div.

  • HTML
<div data-bsft-slot='product_banner'></div>

3. Create the HTML/JSON template

Blueshift supports two ways to include dynamic content on website and mobile apps:

1. JSON content or HTML rendered content. The JSON content is typically used for mobile in-app where native rendering is desired or if you want.

2. The HTML offering is used to mobile web and desktop sites where a javascript tag can be used.

Live templates support Blueshift's dynamic template language Liquid to include dynamic content in both JSON and HTML templates. This allows including user attributes or catalog attributes in the template. Each template is also associated with a recommendation algorithm created using Recommendation Studio.

In order to create a live template, select the Create template button from the template list page and select the template type:

  • HTML: Website or mobile web where a javascript tag can be used for integrating
  • JSON: REST/JSON based integration typically used for in-app rendering
4b777c2-Screen_Shot_2017-10-16_at_10.59.10_AM.png

Enter the template name, the width/height of the slot for HTML templates and the recommendation algorithm to use. The template may be previewed for various users by entering an email address.

046eb5f-Screen_Shot_2017-02-20_at_2.46.47_PM.png

The recommendation technique can be switched or a new recommendation may be created by using Recommendation Studio.

aLtE5TIhQzIS29la880p_Screen_Shot_2016-07-15_at_11.45.13_AM.png

The HTML editor can be used to create the content of the widget. The editor allows including user attributes, product attributes, dynamic Liquid template, as well as static image assets.

1dd0d9a-Screen_Shot_2017-02-20_at_2.47.57_PM.png

You can create your own custom elements to easily edit static assets such as images and rich text.

a29KDhGgQjCVeBnT9Nzs_Screen_Shot_2016-07-15_at_11.47.43_AM.png

JSON templates need a template name and the algorithm to use along with the JSON message body:

SfZCFHGrSdekkc9116zm_Screen_Shot_2016-07-15_at_3.58.19_PM.png

The JSON message body will include the user attributes and a list of items that need to be returned for the user. The items can use recommendation attributes and liquid variables.

kBcIhKB3S0qcMrY1o8AZ_Screen_Shot_2016-07-15_at_3.58.27_PM.png

Example JSON template you can use that includes user attributes as well as personalized product attributes:

  • Liquid
{
	"user": {
      "firstname": "{{user.firstname}}",
      "lastname": "{{user.lastname}}"
    },
	"products": [
     {% for product in products %}
      {% if forloop.first == false %}, {% endif %}
      {
        "name": "{{product.title}}",
        "sku": "{{product.sku}}",
        "image_url": "{{product.image}}",
        "url": "{{product.web_link}}",
        "price": "{{product.price}}"
	   }
     {% endfor %}
    ]
}

4. Create a Live campaign

Select "Live" as the channel type during campaign creation.

f30c830-Screen_Shot_2017-10-16_at_11.03.11_AM.png

After entering the campaign name, enter other campaign parameters:

  • Segment: Select target segment or select 'All Users' to target every user. 'All Users' is a special segment which includes anyone (even new users) who come to your site.
  • Start date: Date campaign should begin
  • End date: Date campaign should end
  • Slot: The target slot for the campaign. The API/Javascript call will refer to this slot string. For example: item_detail_page_right_sidebar.
  • Template: The template to display for the campaign.
  • Day parting: You may set the campaign to run only at certain times of the day.
dc4590e-Screen_Shot_2017-10-16_at_11.00.49_AM.png

Once the campaign is setup, click on "Save" and then "Launch" the campaign.

2kO8MsaSrSk2KIM14EhK_Screen_Shot_2016-07-15_at_4.13.26_PM.png

A slot may have multiple campaigns executing and competing for the user. The campaign picked for the user depends on the segment the user is a part of and the corresponding priorities for each campaign. If a user is a member of multiple segments, the campaigns are sorted by priority, and the first one in ascending order is picked for the user. It is recommended that you always have a campaign targeting the default "Everyone" segment, that way, you always have some content to show to all users.

Best practice:

  1. Multiple campaigns against a slot: It is recommended that you have multiple campaigns against a slot with fine-grained targeting roles for segment and content recommendations. That way, you can measure the efficacy and performance of each of your campaigns targeting the same slot. For example, you may choose to have two campaigns on the homepage, campaign1 targeting logged in users and campaign2 targeting anonymous users. By having two separate campaigns with different segments and content recommendations, you can measure the performance of content recommendations for logged in users vs anonymous users.

  2. Catch all campaign: It is recommended that you have a catch-all campaign targeting a slot with the segment as "Everybody". The catch all campaign ensures that every user (even first time anonymous users) will see some content targeting them. In addition, you can measure the performance of those campaigns.

The campaign screen shows performance data for live campaigns including metrics for:

  • sent: Number of requests received for the campaign
  • open: Number of impressions
  • click: Number of clicks
  • unique open: Number of unique impressions
  • unique click: Number of unique clicks
  • orders: Number of purchases
  • purchase: Revenue attributed to the campaign
  • custom: Counts for any custom goals you may have setup
Was this article helpful?
0 out of 0 found this helpful