Rich Media Recommendation
To display a Rich Media Recommendation template, add the required tags and API calls to the page.
-
In the page header:
- Install the RTP tag.
- Add the GET call that populates the recommendations.
- Add the SET call that configures the template.
-
In the page body:
- Place the template tag (div class) where you want the template to appear.
For more information, see Enable Predictive Content for Web Rich Media.
Template Tag
div. Permissible values: template1, template2, template3.Examples
Use “template1” to display recommendations horizontally.
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
Use “template2” to display recommendations vertically.
<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>
Use “template3” to display recommendations vertically with only a title and description.
<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>
See the template alignment examples.
Populate Recommendation
This method populates all rich media <divs> on the page with recommendations.
Usage
rtp('get', 'rcmd', 'richmedia');
Change Template Configuration
This method changes the default template configuration.
Call this method before calling rtp(‘get’,‘rcmd’, ‘richmedia’);
Usage
rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);
Examples
This example changes the title text for a template.
rtp("set", "rcmd", "richmedia","template1",
{
"rcmd.title.text": "RECOMMENDED CONTENT"
}
);
This example sets categories and multiple configuration properties 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"
]
}
}
);
Use “category” to filter the content displayed in predictive content recommendations. To use predictive content for all enabled content, leave “category” empty.
To recommend only specific content in the Rich Media template, add a category for the content on the Set content page. Then associate that category with the recommendation template code. For example, categorize relevant content by the product or solution sections of your website.
This example sets multiple configuration properties for a template.
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial"
}
}
);
Configuration Properties
Configuration support can vary by template.
Basic Example
This example displays three recommendations in one template. Copy the 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=UTF-8">
<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 displays three recommendations in one template. The template title is “RECOMMENDED CONTENT” and the button text is “Read More”. Copy the 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=UTF-8">
<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 that includes an image, title, description, and call-to-action button.
Example of Rich Media Recommendation Template #2
Name: template2
Description: Vertical content that includes an image, title, description, and call-to-action button.
Example of Rich Media Recommendation Template #3
Name: template3
Description: Vertical content that includes only a title and description. On mouse hover, the header changes color and links to the content URL. The description also links to the content without changing color.
