Scout Onsite Module

Scout is an onsite tool that displays relevant content to users when viewing a particular page.

The tool is powered by the intelligence of Sailthru’s Personalization Engine, which gathers data on your users’ individual interests, based on activity on your website, mobile device and tablet, all tied to each user’s email address.

How it Works

Scout uses an active user’s Sailthru-hosted interest profile, if available, to present a list of spidered content likely to appeal to the user. When a user’s interest data is not available or present (a user is not subscribed to a newsletter), the most recent browsing history – stored in a cookie – is used to dynamically generate a page specific for the user.

Content is weighted by browsing history, purchase history, email click history and general popularity of site content.

By default, Scout and Concierge display up to 250 items from the past 72 hours (i.e. 3 days). You can increase the time range to a maximum of 720 hours (i.e. 30 days) by following these steps:

    1. Go to the Concierge Preferences page
    2. Edit the Field near Hours Back

Setup

The below Scout scripting will pull a JSON feed of suggested content and display it in a basic format.

  1. Ensure Personalization Engine is active on your current site by following these instructions
  2. Add the following script to the page you’d like to display the user-specific Scout content; This only needs to be present on pages you want the related content to appear
  3. NOTE: You must include class=”content-item in your JavaScript to receive reporting for Scout
<div id="sailthru-scout">
  <div class="loading">
    Loading, please wait...
  </div>
</div>

<script type="text/javascript" src="//ak.sail-horizon.com/scout/v1.js"></script>
<script type="text/javascript">
                SailthruScout.setup({
                    domain: 'horizon.example.com'
                });
</script>
  • In the above, replace domain with your Personalization Engine domain.
  • By default, this code will generate a basic HTML display of the JSON feed and put it within the sailthru-scout as soon as it loads. You can use CSS to customize this display, or write your own rendering function to display the JSON exactly how you’d like (see below).

Setup Options

Parameter Description Example
numVisible The number of items to render at a time 10 (default)
includeConsumed Pass trueto include content that has already been consumed by the user false(default)
renderItem Override rendering function See below
noPageview Only use this parameter on pages that also use Concierge to avoid double-counting pageviews. true
filter Use this parameter to filter for specific meta-tags {tags:[‘foo’,’bar’]}or{tags:’foo’}

Positioning

You can additionally position the Scout module by targeting the following ID class, which is a 1×1 pixel on the bottom of the module: st-track-px

Writing Your Own Rendering Function

You can fully customize the HTML that will appear for each item by writing a rendering function and passing it as the renderItem parameter to SailthruScout.setup. The function takes two parameters: the content item, and the index number of the item (starting at 0). You could use the second parameter, for example, to make the top story appear larger than the remaining content.

Example Setup With Rendering Function

<script type="text/javascript" src="//ak.sail-horizon.com/scout/v1.js"></script>
<script type="text/javascript">
 SailthruScout.setup({
    domain: 'horizon.example.com',
    renderItem: function(item, pos) {
      var html = '';
      html += '<div class="content-item">';
      html += '<div>X</div>';
      if (item.image) {
        html += '<div><a href="' + item.url + '" target="_blank"><img src="' + item.image.thumb + '" /></a></div>';
        }
    html += '<div><a href="' + item.url + '" target="_blank">' + item.title + '</a></div>';
    html += '</div>';
    return html;
    },
 });
</script>
‘; html += ‘<div>'; html += ‘<div>X</div>'; if (item.image) { html += ‘<div><a href=”‘+item.url + ‘” target=”_blank”><img src=”‘ + item.image.thumb + ‘” /></a></div>'; } html += ‘<div><a href=”‘ + item.url + ‘” target=”_blank”>’+item.title+'</a></div>'; html += ‘</div>'; return html; }, }); </script>

Example Content Item

{"title" : "Example product",
 "image" : "http://example.com/path/to/image.jpg",
 "url" : "http://example.com/product",
 "date" : 1317137669,
 "tags" : ["tag-a", "tag-b"],
 "description" : "Here is a description of the product",
 "author" : "John Smith",
 "views" : 2423,
 "heat" : 18.23,
 "score" : 9.12
}

Additional Notes

Also, images can be resized within HTML by setting height and/or width properties on the <img> tags. For example:

<img height="140" src="image.jpg" />

Top