Rich Media Recommendation
The following tags and API calls must be set up on the page that you want to display the Rich Media Recommendation template.
-
In the Page Header
- Have the RTP tag installed
- Add the GET call to the page to populate the recommendations
- Add the SET call to configure the template
-
In the Page Body
- Place the template tag (div class) in the location where you want the template to appear
More information is available here.
Template Tag
div.Permissible values: template1, template2, template3.Examples
To display your recommendations in horizontal alignment, use 鈥渢emplate1鈥�.
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
To display your recommendations in vertical alignment, use 鈥渢emplate2鈥�.
<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>
To display your recommendations in vertical alignment with title and description only, use 鈥渢emplate3鈥�.
<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>
See screenshots of template alignments聽here.
Populate Recommendation
This method populates all the rich media <divs> on the page with recommendations.
Usage
rtp('get', 'rcmd', 'richmedia');
Change Template Configuration
This method changes the default configuration for template.
Note: When using this method it must be called before calling rtp(鈥榞别迟鈥�,鈥榬肠尘诲鈥�, 鈥榬颈肠丑尘别诲颈补鈥�);
Usage
rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);
Examples
This code snippet changes the title text for a template.
rtp("set", "rcmd", "richmedia","template1",
{
"rcmd.title.text": "RECOMMENDED CONTENT"
}
);
This code snippet shows setting categories with multiple configurations for a template.
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial",
"category":
[
"webinar",
"blog posts",
"pricing_page_category",
"product_a_category"
]
}
}
);
NOTE: Use 鈥渃ategory鈥� to filter content that is displayed in the outcome of predictive content recommendations. To apply predictive content to all enabled content pieces, leave the 鈥渃ategory鈥� empty. If you want to recommend only specific content for the output in the Rich Media template, add a category for the content in the Set content page and associate that category within the recommendation template code. Categorizing relevant content according to sections of your website (products or solutions).
This code snippet shows setting multiple template configurations for a template.
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial"
}
}
);
Configuration Properties
Note: The configuration support can change per template.
Basic Example
This example has one template with three recommendations. Copy this example into an HTML page, and then replace the RTP tag with your tag.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>RTP recommendation</title>
<!-- RTP tag -->
<script type='text/javascript'>
// This tag needs to be replaced with your account tag
(function(c,h,a,f,i,e){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
c[a].a=i;c[a].e=e;var g=h.createElement("script");g.async=true;g.type="text/javascript";
g.src=f+'?aid='+i;var b=h.getElementsByTagName("script")[0];b.parentNode.insertBefore(g,b);
})(window,document,"rtp","//example.rtp.com/rtp-api/v1/rtp.js","account_id");
// Send page view (required by the recommendation)
rtp('send','view');
// Populate recommendation
rtp('get','rcmd', 'richmedia');
</script>
<!-- End of RTP tag -->
</head>
<body>
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
</body>
</html>
Advanced Example
This example has one template with three recommendations. The template title is 鈥淩ECOMMENDED CONTENT鈥� and the button text will be 鈥淩ead More鈥�. Copy this example into an HTML page, and then replace the RTP tag with your tag.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>RTP recommendation</title>
<!-- RTP tag -->
<script type='text/javascript'>
// This tag needs to be replaced with your account tag
(function(c,h,a,f,i,e){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
c[a].a=i;c[a].e=e;var g=h.createElement("script");g.async=true;g.type="text/javascript";
g.src=f+'?aid='+i;var b=h.getElementsByTagName("script")[0];b.parentNode.insertBefore(g,b);
})(window,document,"rtp","//example.rtp.com/rtp-api/v1/rtp.js","account_id");
// Send page view (required by the recommendation)
rtp('send','view');
// Populate the recommendation zone
rtp('get', 'campaign',true);
// Change template configuration
rtp('set', 'rcmd', 'richmedia',
{
template1 :
{
"rcmd.title.text" : "RECOMMENDED CONTENT",
"rcmd.cta.text" : "Read More"
}
}
);
// Populate recommendation
rtp('get','rcmd', 'richmedia');
</script>
<!-- End of RTP tag -->
</head>
<body>
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
</body>
</html>
Example of Rich Media Recommendation Template #1
Name: template1 Description: Horizontal content including image, title, and description and call to action button.
Example of Rich Media Recommendation Template #2
Name: template2 Description: Vertical content including image, title, and description and call to action button.
Example of Rich Media Recommendation Template #3
Name: template3 Description: Vertical content including only title and description. On mouse hover, header changes color and is hyperlinked to content URL. Description also links to content without color change.
