리치 미디어 권장 사항
리치 미디어 권장 사항 템플릿을 표시할 페이지에서 다음 태그 및 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의 예
이름: template1 설명: 이미지, 제목, 설명 및 콜 투 액션 단추를 포함하는 가로 콘텐츠.
리치 미디어 추천 템플릿 #2의 예
이름: template2 설명: 이미지, 제목, 설명 및 콜 투 액션 단추를 포함하는 세로 콘텐츠
리치 미디어 추천 템플릿 #3의 예
이름: template3 설명: 제목과 설명만 포함하는 세로 콘텐츠 마우스를 가져가면 헤더가 색상을 변경하고 콘텐츠 URL에 하이퍼링크됩니다. 설명 또한 색상을 변경하지 않은 콘텐츠에 대한 링크입니다.
