Recomendação de rich media
Para exibir um modelo de Recomendação de mídia avançada, adicione as tags e chamadas de API necessárias à página.
-
No cabeçalho da página:
- Instale a tag RTP.
- Adicione a chamada GET que preenche as recomendações.
- Adicione a chamada SET que configura o template.
-
No corpo da página:
- Coloque a tag de modelo (classe div) onde deseja que o modelo apareça.
Para obter mais informações, consulte Habilitar Conteúdo Preditivo para Mídia da Web.
Tag de modelo
div. Valores admissíveis: template1, template2, template3.Exemplos
Use “template1” para exibir as recomendações horizontalmente.
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
Use “template2” para exibir as recomendações verticalmente.
<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>
Use “template3” para exibir as recomendações verticalmente com apenas um título e uma descrição.
<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>
Veja os exemplos de alinhamento do modelo.
Preencher recomendação
Este método preenche toda a mídia avançada <divs> da página com recomendações.
Uso
rtp('get', 'rcmd', 'richmedia');
Alterar configuração do modelo
Esse método altera a configuração do template padrão.
Chame esse método antes de chamar rtp(‘get’,‘rcmd’, ‘richmedia’);
Uso
rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);
Exemplos
Este exemplo altera o texto do título de um modelo.
rtp("set", "rcmd", "richmedia","template1",
{
"rcmd.title.text": "RECOMMENDED CONTENT"
}
);
Este exemplo define categorias e várias propriedades de configuração para um modelo.
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"
]
}
}
);
Use “categoria” para filtrar o conteúdo exibido nas recomendações de conteúdo preditivo. Para usar conteúdo preditivo para todo o conteúdo ativado, deixe a “categoria” vazia.
Para recomendar somente conteúdo específico no modelo Mídia avançada, adicione uma categoria para o conteúdo na página Definir conteúdo. Em seguida, associe essa categoria ao código do template de recomendação. Por exemplo, categorize o conteúdo relevante pelas seções de produto ou solução do seu site.
Este exemplo define várias propriedades de configuração para um modelo.
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial"
}
}
);
Propriedades de configuração
O suporte à configuração pode variar de acordo com o modelo.
Exemplo básico
Este exemplo exibe três recomendações em um modelo. Copie o exemplo em uma página do HTML e substitua a tag RTP pela sua tag.
<!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>
Exemplo avançado
Este exemplo exibe três recomendações em um modelo. O título do modelo é “CONTEÚDO RECOMENDADO” e o texto do botão é “Leia mais”. Copie o exemplo em uma página do HTML e substitua a tag RTP pela sua tag.
<!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>
Exemplo de modelo de recomendação de mídia avançada #1
Nome: modelo1
Descrição: conteúdo horizontal que inclui uma imagem, título, descrição e botão do call-to-action.
Exemplo de modelo de recomendação de mídia avançada #2
Nome: modelo2
Descrição: conteúdo vertical que inclui uma imagem, título, descrição e botão do call-to-action.
Exemplo de modelo de recomendação de mídia avançada #3
Nome: modelo3
Descrição: conteúdo vertical que inclui apenas um título e uma descrição. Ao passar o mouse, o cabeçalho muda de cor e de links para o URL do conteúdo. A descrição também vincula ao conteúdo sem alterar a cor.
