Recomendación de medios enriquecidos
Para mostrar una plantilla de Recomendación de medios enriquecidos, agregue las etiquetas y llamadas de API necesarias a la página.
-
En el encabezado de la página:
- Instale la etiqueta RTP.
- Añada la llamada GET que rellena las recomendaciones.
- Añada la llamada SET que configura la plantilla.
-
En el cuerpo de la página:
- Coloque la etiqueta de plantilla (clase div) donde desee que aparezca la plantilla.
Para obtener más información, consulte Habilitar contenido predictivo para medios enriquecidos en web.
Etiqueta de plantilla
div. Valores permitidos: template1, template2, template3.Ejemplos
Utilice “template1” para mostrar las recomendaciones horizontalmente.
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
Utilice “template2” para mostrar las recomendaciones verticalmente.
<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>
Utilice “template3” para mostrar las recomendaciones verticalmente con solo un título y una descripción.
<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>
Vea los ejemplos de alineación de plantilla.
Rellenar recomendación
Este método rellena todos los medios enriquecidos <divs> en la página con recomendaciones.
Uso
rtp('get', 'rcmd', 'richmedia');
Cambiar configuración de plantilla
Este método cambia la configuración de plantilla predeterminada.
Llame a este método antes de llamar a rtp(‘get’,‘rcmd’, ‘richmedia’);
Uso
rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);
Ejemplos
En este ejemplo se cambia el texto del título de una plantilla.
rtp("set", "rcmd", "richmedia","template1",
{
"rcmd.title.text": "RECOMMENDED CONTENT"
}
);
En este ejemplo se establecen categorías y varias propiedades de configuración para una plantilla.
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"
]
}
}
);
Utilice “category” para filtrar el contenido mostrado en las recomendaciones de contenido predictivo. Para utilizar contenido predictivo para todo el contenido habilitado, deje vacío “categoría”.
Para recomendar solo contenido específico en la plantilla Medios enriquecidos, agregue una categoría para el contenido en la página Definir contenido. A continuación, asocie esa categoría con el código de plantilla de recomendación. Por ejemplo, categorice el contenido relevante por las secciones de productos o soluciones del sitio web.
En este ejemplo se establecen varias propiedades de configuración para una plantilla.
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial"
}
}
);
Propiedades de configuración
La compatibilidad con la configuración puede variar según la plantilla.
Ejemplo básico
Este ejemplo muestra tres recomendaciones en una plantilla. Copie el ejemplo en una página de HTML y, a continuación, reemplace la etiqueta RTP por la etiqueta.
<!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>
Ejemplo avanzado
Este ejemplo muestra tres recomendaciones en una plantilla. El título de la plantilla es “CONTENIDO RECOMENDADO” y el texto del botón es “Más información”. Copie el ejemplo en una página de HTML y, a continuación, reemplace la etiqueta RTP por la etiqueta.
<!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>
Ejemplo de #1 de plantilla de recomendación de medios enriquecidos
Nombre: plantilla1
Descripción: contenido horizontal que incluye una imagen, un título, una descripción y un botón de call-to-action.
Ejemplo de #2 de plantilla de recomendación de medios enriquecidos
Nombre: plantilla2
Descripción: contenido vertical que incluye una imagen, título, descripción y botón de call-to-action.
Ejemplo de #3 de plantilla de recomendación de medios enriquecidos
Nombre: plantilla3
Descripción: contenido vertical que incluye solamente un título y una descripción. Al pasar el ratón por encima, el encabezado cambia de color y establece vínculos a la dirección URL de contenido. La descripción también se vincula al contenido sin cambiar el color.
