多媒體推薦
您必須在您要顯示Rich Media Recommendation範本的頁面上設定下列標籤和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"
]
}
}
);
注意：使用「類別」可篩選在預測性內容建議結果中顯示的內容。 若要將預測性內容套用至所有啟用的內容片段，請將「類別」留空。 如果您只想為Rich Media範本中的輸出建議特定內容，請在「設定內容」頁面中新增內容的類別，並在建議範本程式碼中建立該類別的關聯。 根據您網站的區段（產品或解決方案）分類相關內容。
此程式碼片段顯示為一個範本設定多個範本設定。
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。 說明也連結至不變更顏色的內容。
