富媒体推荐
必须在要显示富媒体推荐模板的页面上设置以下标记和API调用。
-
在页眉中
- 已安装RTP标记
- 将GET调用添加到页面以填充推荐
- 添加SET调用以配置模板
-
在页面正文中
- 将模板标记（div类）放置在要显示该模板的位置
此处提供了详细信息。
模板标记
div.Permissible值：template1、template2、template3。示例
要以水平对齐方式显示推荐，请使用“template1”。
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
要以垂直对齐方式显示推荐，请使用“template2”。
<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>
要以仅与标题和描述垂直对齐的方式显示推荐，请使用“template3”。
<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>
在此处查看模板对齐的屏幕截图。
填充推荐
此方法使用推荐填充页面上的所有富媒体<divs>。
使用情况
rtp('get', 'rcmd', 'richmedia');
更改模板配置
此方法会更改模板的默认配置。
注意：使用此方法时，必须在调用rtp('get'，'rcmd'， 'richmedia')之前调用它；
使用情况
rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);
示例
此代码片段会更改模板的标题文本。
rtp("set", "rcmd", "richmedia","template1",
{
"rcmd.title.text": "RECOMMENDED CONTENT"
}
);
此代码片段显示了如何为一个模板设置具有多个配置的类别。
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"
]
}
}
);
注意：使用“类别”可筛选在预测内容推荐结果中显示的内容。 要将预测内容应用于所有启用的内容片段，请将“类别”留空。 如果只想为富媒体模板中的输出推荐特定内容，请在设置内容页面中为内容添加类别，并在推荐模板代码中关联该类别。 根据网站区域（产品或解决方案）对相关内容进行分类。
此代码片段显示了如何为一个模板设置多个模板配置。
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial"
}
}
);
配置属性
注意：每个模板的配置支持可能会发生更改。
基本示例
此示例有一个包含三个推荐的模板。 将此示例复制到HTML页中，然后将RTP标记替换为您的标记。
<!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>
高级示例
此示例有一个包含三个推荐的模板。 模板标题为“推荐的内容”，按钮文本将为“了解更多”。 将此示例复制到HTML页中，然后将RTP标记替换为您的标记。
<!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>
富媒体推荐模板#1示例
名称：模板1 描述：包含图像、标题和描述的水平内容以及行动号召按钮。
富媒体推荐模板#2示例
名称：模板2 描述：垂直内容，包括图像、标题和描述，以及行动号召按钮。
富媒体推荐模板#3示例
名称：模板3 描述：仅包含标题和描述的垂直内容。 鼠标悬停时，标题会更改颜色并超链接到内容URL。 描述还链接到不发生颜色更改的内容。
