Last updated: Mar 09 2018

Applies to versions: 1.0 and higher (JavaScript API)

JSON integration for Promote

Promote callback

Promote content is provided by Episerver in the form of a JavaScript callback method. When the content is ready, it is passed to this callback function in the form of JSON data.

PeeriusCallbacks={ 
    smartContent:function(jsonData) { 
       // your content rendering code here …. 
    } 
}

The jsonData parameter is an array with JSON data, where each item of the array contains a Promote creative with its properties.

Name Short description Usage
creatives An array of creatives  
  • id
The Episerver ID of the creative [64bit number]
  • position
Name of the page position for this creative [String] Use this attribute to determine the page position in which to show this creative.
  • name
The name of the creative, as configured in the Personalization Portal [String]
  • html
The creative's HTML code [String] Used for the creative's image URLs and hyperlink. It can also contain HTML added to the creative (e.g., width, height).

Below is an example JSON array response.

{ 
"creatives":[{ 
      "id": 54321376, 
      "position": "home_creative1", 
      "name": "the first creative", 
      "html": "<a href=www.google.com> 
               <img src="image.com/image1.jpg"> 
               <a>" 
      }, { 
      "id": 63265912, 
      "position": "home_creative2", 
      "name": "the second creative", 
      "html": "<a href=www.google.com> 
               <img src="image.com/image2.jpg"> 
               <a>" 
      }]
}

Promote function

You need to add a function inside the PeeriusCallbacks variable to render the content from the JSON array.
An example of smartContent function added in the PeeriusCallbacks is shown below.

var PeeriusCallbacks = { 
    track: { 
         //tracking JSON here 
    }, 
    smartRecs: function (jsonData) {
         // your recommendation rendering code here 
    },
    smartContent: function (jsonCreative) { 
       for (var i in jsonCreative.creatives) { 
            var position = jsonCreative.creatives[i].position; 
            if (position == "smartcontent1") { 
                  jQuery('#content1').html(jsonCreative.creatives[i].html); 
                  jQuery('#content1').click(function () { 
                       Peerius.smartContentClick(jsonCreative.creatives[i].id); 
                   }); 
            } else if (position == "smartcontent2") { 
                jQuery('#content2').html(jsonCreative.creatives[i].html); 
                jQuery('#content2').click(function () { 
                      Peerius.smartContentClick(jsonCreative.creatives[i].id); 
                      }); 
             } 
        } 
     } 
     info: function (jsonData) { 
     // can be used for A/B test information 
     } 
}

Example explained

The "smartcontent1" and "smartcontent2" are the position names. They are used to differentiate between content containers in the same page.

In this example, the content with position names "smartcontent1" and "smartcontent2" is placed in different locations in the same page – "content1" and "content2" respectively. "content1" and "content2" are the IDs of the desired containers in the page, as shown in the example below.

Alternatively, you can use a class name instead of a container ID.

… 
<div id="content1"></div> 
… 
<div id="content2"></div> 
…

Marking clicks on Promote content

If the user clicks on a Promote creative, the click must be tracked in order to generate useful recommendations and reports. So you must call Peerius.smartContentClick(id) when a creative is clicked, and the click takes the customer to a new page.

Usage of smartContentClick(id) is demonstrated in the example below.

var PeeriusCallbacks = { 
     track: { 
         //tracking JSON here
     }, 
     smartRecs: function (jsonData) { 
           // your recommendation rendering code here 
     }, 
     smartContent: function (jsonCreative) { 
         for (var i in jsonCreative.creatives) { 
            var position = jsonCreative.creatives[i].position; 
            if (position == "smartcontent1") { 
                 jQuery('#content1').html(jsonCreative.creatives[i].html); 
                 jQuery('#content1').click(function () { 
                      Peerius.smartContentClick(jsonCreative.creatives[i].id);  
                 }); 

            } else if (position == "smartcontent2") { 
                jQuery('#content2').html(jsonCreative.creatives[i].html); 
                jQuery('#content2').click(function () { 
                    Peerius.smartContentClick(jsonCreative.creatives[i].id); 
                }); 
            } 
        } 
     } 
     info: function (jsonData) { 
          // can be used for A/B test information  
     } 
}

Comments