JSON integration for Promote (legacy)

6 min

Promote callback (legacy)

Promote content (legacy) is provided by Optimizely 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 (legacy) with its properties.

Name		Description and usage
creatives		An array of creatives
	id	[64bit number] The Optimizely ID of the creative
	position	[String] Name of the page position for this creative. Use this attribute to determine the page position in which to show this creative.
	name	[String] The name of the creative, as configured in the Personalization Portal.
	html	[String] The creative's HTML code. Used for the creative's image URLs and hyperlink. It can also contain HTML added to the creative (for example width and 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 (legacy)

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

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> 
    …

Track clicks on Promote content (legacy)

If the user clicks on an Optimizely Promote creative (legacy), 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  
          } 
      }