Rich Media Recommendation

The following tags and API calls need to be setup on the page that you want to display the Rich Media Recommendation template.

  1. In the Page Header
    1. Have the RTP tag installed
    2. Add the GET call to the page to populate the recommendations
    3. Add the SET call to configure the template
  2. In the Page Body
    1. Place the template tag (div class) in the location where you want the template to appear

More information is available here.

You must become a Web Personalization customer and have the RTP tag deployed on your site prior to using the User Context API.

Template Tag

Attribute Optional/Required Description
class Required Specify that this div HTML element is RTP recommendation div.
data-rtp-template-id Required The template id.  This determines the alignment of your recommendation.  Use “template1” for horizontal alignment, “template2” for vertical alignment, or “template3” for vertical alignment that includes only title and description.  The script will inject the matching template into this div.

Permissible values: template1, template2, template3.

Examples

To display your recommendations in horizontal alignment, use “template1”.

To display your recommendations in vertical alignment, use “template2”.

To display your recommendations in vertical alignment with title and description only, use “template3”.

See screenshots of template alignments here.

Populate Recommendation

This method will populate all the rich media divs on the page with recommendations.

Usage

rtp(‘get’, ‘rcmd’, ‘richmedia’);

Parameter Optional/Required Type Description
‘get’ Required String Method action.
‘rcmd’ Required String Method name.
‘richmedia’ Required String Sub method  name.

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);

Parameter Optional/Required Type Description
‘set’ Required String Method action.
‘rcmd’ Required String Method name.
‘richmedia’ Required String Sub Method name.
template_id Optional String The template id for configuration changes.  Use to specify settings change for only one template.
conf_obj Required Object The new configuration. The object will hold all the configurations as key/value pair.

Examples

This code snippet changes the title text for a template.

This code snippet shows setting categories with multiple configurations for a template.

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. For example, categorizing relevant content according to sections of your website (products or solutions).

This code snippet shows setting multiple template configurations for a template.

Configuration Properties

Configuration Example Description
rcmd.general.font.family “rcmd.general.font.family” : “arial” Changes the font family for all the text in the template. This property support all the CSS values by the browser type. It is possible to use a custom font family if it exists on the page.
rcmd.content.background.color “rcmd.content.background.color” : “black Changes the background color of the template inner boxes. This property supports all the CSS values by the browser type.
rcmd.title.text “rcmd.title.text” : “RECOMMENDED CONTENT” Changes the template title.
rcmd.title.background.color “rcmd.title.background.color” : “blue” Changes the title box background color. This property support all the css color value (e.g. color name, rgb, …)
rcmd.title.font.size “rcmd.title.font.size” : “26px” Changes the title font size. The property supports all the possible font sizes CSS value (e.g. px, em, …)
rcmd.title.font.color “rcmd.title.font.color” : “white” Changes the title font color. This property supports all the font color values (e.g. rgb, hex, …)
rcmd.description.font.color “rcmd.description.font.color” : “white” Changes the description font color. This property supports all the font color values (e.g. rgb, hex, …)
rcmd.cta.background.color “rcmd.cta.background.color” : “green” Changes the button background color. This property support all the css color value (e.g. color name, rgb, …)
rcmd.cta.font.color “rcmd.cta.font.color” : “rgb(90, 84, 164)” Changes the button font color. This property supports all the font color values (e.g. rgb, hex, …)
rcmd.cta.text “rcmd.cta.text” : “Push” Changes the button text. The text is the same for all the buttons.
category “category” : [“one category”] Changes the recommendation category this template supports. The template will display only recommendations with one of the categories set by this configuration.

Note: The configuration support can change per template.

Basic Example

This example will have one template with three recommendations. Just copy this example into an HTML page, and then replace the RTP tag with your tag.

Advanced Example

This example will have one template with three recommendations. The template title will be “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.

Example of Rich Media Recommendation Template #1

Name: template1
Description: Horizontal content including image, title and description and call to action button.

image2015-6-1 17-8-33

Example of Rich Media Recommendation Template #2

Name: template2
Description: Vertical content including image, title and description and call to action button.

ResizedImage600584-template2

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.