Recomendación de medios enriquecidos

Las siguientes etiquetas y llamadas de API deben configurarse en la página que desea que muestre la plantilla Recomendación de medios enriquecidos.

  1. En el encabezado de la página

    1. Tener instalada la etiqueta RTP
    2. Añada la llamada de GET a la página para rellenar las recomendaciones.
    3. Añada la llamada SET para configurar la plantilla
  2. En el cuerpo de la página

    1. Coloque la etiqueta de plantilla (clase div) en la ubicación donde desee que aparezca la plantilla

Encontrará más información aquí.

Etiqueta de plantilla

Atributo
Opcional/Requerida
Descripción
clase
Obligatorio
Especifique que este elemento del HTML div es un div de recomendación RTP.
data-rtp-template-id
Obligatorio
ID de la plantilla. Esto determina la alineación de la recomendación. Utilice "template1" para la alineación horizontal, "template2" para la alineación vertical o "template3" para la alineación vertical que incluya únicamente el título y la descripción. La secuencia de comandos inserta la plantilla coincidente en esta div.Permissible values: template1, template2, template3.

Ejemplos

Para mostrar las recomendaciones en alineación horizontal, utilice "template1".

<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>

Para mostrar las recomendaciones en alineación vertical, utilice "template2".

<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>

Para mostrar las recomendaciones en alineación vertical solo con título y descripción, utilice "template3".

<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>

Ver capturas de pantalla de alineaciones de plantilla aquí.

Rellenar recomendación

Este método rellena todos los medios enriquecidos <divs> en la página con recomendaciones.

Uso

rtp('get', 'rcmd', 'richmedia');

Parámetro
Opcional/Requerida
Tipo
Descripción
'get'
Obligatorio
Cadena
Acción de método.
'rcmd'
Obligatorio
Cadena
Nombre del método.
'richmedia'
Obligatorio
Cadena
Nombre del submétodo.

Cambiar configuración de plantilla

Este método cambia la configuración predeterminada de la plantilla.

Nota: Cuando se utiliza este método, se debe llamar antes de llamar a rtp('get','rcmd', 'richmedia');

Uso

rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);

Parámetro
Opcional/Requerida
Tipo
Descripción
'set'
Obligatorio
Cadena
Acción de método.
'rcmd'
Obligatorio
Cadena
Nombre del método.
'richmedia'
Obligatorio
Cadena
Nombre del submétodo.
template_id
opcional
Cadena
El ID de plantilla para los cambios de configuración. Se utiliza para especificar cambios de configuración solo para una plantilla.
conf_obj
Obligatorio
Objeto
La nueva configuración. El objeto contiene todas las configuraciones como par clave/valor.

Ejemplos

Este fragmento de código cambia el texto del título de una plantilla.

rtp("set", "rcmd", "richmedia","template1",
    {
        "rcmd.title.text": "RECOMMENDED CONTENT"
    }
);

Este fragmento de código muestra la definición de categorías con varias configuraciones 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"
            ]
        }
    }
);

NOTA: Utilice "category" para filtrar el contenido que se muestra en el resultado de las recomendaciones de contenido predictivo. Para aplicar contenido predictivo a todos los fragmentos de contenido habilitados, deje vacía la "categoría". Si desea recomendar solo contenido específico para la salida en la plantilla de medios enriquecidos, agregue una categoría para el contenido en la página Definir contenido y asocie esa categoría dentro del código de plantilla de recomendación. Categorizar el contenido relevante según las secciones del sitio web (productos o soluciones).

Este fragmento de código muestra la configuración de varias plantillas para una plantilla.

rtp("set", "rcmd", "richmedia",
    {
        "template1":
        {
            "rcmd.title.text": "RECOMMENDED CONTENT",
            "rcmd.general.font.family": "arial"
        }
    }
);

Propiedades de configuración

Configuración
Ejemplo
Descripción
rcmd.general.font.family
"rcmd.general.font.family" : "arial"
Cambia la familia de fuentes para todo el texto de la plantilla. Esta propiedad admite todos los valores CSS por tipo de explorador. Es posible utilizar una familia de fuentes personalizada si existe en la página.
rcmd.content.background.color
"rcmd.content.background.color" : "black"
Cambia el color de fondo de los cuadros interiores de la plantilla. Esta propiedad admite todos los valores CSS por tipo de explorador.
rcmd.title.text
"rcmd.title.text" : "CONTENIDO RECOMENDADO"
Cambia el título de la plantilla.
rcmd.title.background.color
"rcmd.title.background.color" : "blue"
Cambia el color de fondo del cuadro de título. Esta propiedad admite todos los valores de color css (nombre de color, rgb, …)
rcmd.title.font.size
"rcmd.title.font.size" : "26 px"
Cambia el tamaño de fuente del título. La propiedad admite todos los tamaños de fuente posibles del valor CSS (px, em, …)
rcmd.title.font.color
"rcmd.title.font.color" : "blanco"
Cambia el color de fuente del título. Esta propiedad admite todos los valores de color de fuente (rgb, hex, …)
rcmd.description.font.color
"rcmd.description.font.color" : "white"
Cambia el color de fuente de la descripción. Esta propiedad admite todos los valores de color de fuente (rgb, hex, …)
rcmd.cta.background.color
"rcmd.cta.background.color" : "green"
Cambia el color de fondo del botón. Esta propiedad admite todos los valores de color css (nombre de color, rgb, …)
rcmd.cta.font.color
"rcmd.cta.font.color" : "rgb(90, 84, 164)"
Cambia el color de fuente del botón. Esta propiedad admite todos los valores de color de fuente (rgb, hex, …)
rcmd.cta.text
"rcmd.cta.text" : "Push"
Cambia el texto del botón. El texto es el mismo para todos los botones.
categoría
"categoría" : ["una categoría"]
Cambia la categoría de recomendación que admite esta plantilla. La plantilla solo muestra las recomendaciones con una de las categorías establecidas por esta configuración.

Nota: La compatibilidad con la configuración puede cambiar por plantilla.

Ejemplo básico

Este ejemplo tiene una plantilla con tres recomendaciones. Copie este 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 tiene una plantilla con tres recomendaciones. El título de la plantilla es "CONTENIDO RECOMENDADO" y el texto del botón será "Más información". Copie este 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 imagen, título y descripción y botón de llamada a la acción.

Plantilla de medios enriquecidos

Ejemplo de #2 de plantilla de recomendación de medios enriquecidos

Nombre: plantilla2 Descripción: contenido vertical que incluye imagen, título y descripción y botón de llamada a la acción.

Plantilla de medios enriquecidos

Ejemplo de #3 de plantilla de recomendación de medios enriquecidos

Nombre: plantilla3 Descripción: contenido vertical que incluye solo título y descripción. Al pasar el ratón por encima, el encabezado cambia de color y aparece un hipervínculo a la dirección URL de contenido. La descripción también vincula al contenido sin cambiar el color. Plantilla de medios enriquecidos

recommendation-more-help
bb269a6d-047a-4bf7-9acd-23ad9a63dc59