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 “template1”.
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
To display your recommendations in vertical alignment, use “template2”.
<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>
To display your recommendations in vertical alignment with title and description only, use “template3”.
<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(‘get’,‘rcmd’, ‘richmedia’);
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 “category” to filter content that is displayed in the outcome of predictive content recommendations. To apply predictive content to all enabled content pieces, leave the “category” 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=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 has one template with three recommendations. The template title is “RECOMMENDED CONTENT” and the button text will be “Read 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=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 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.
