Recomendação de rich media

As tags e chamadas de API a seguir devem ser configuradas na página em que você deseja exibir o modelo Recomendação de mídia avançada.

  1. No cabeçalho da página

    1. Tenha a tag RTP instalada
    2. Adicionar a chamada do GET à página para preencher as recomendações
    3. Adicione a chamada SET para configurar o template
  2. No corpo da página

    1. Coloque a tag de modelo (classe div) no local onde deseja que o modelo apareça

Mais informações disponíveis aqui.

Tag de modelo

Atributo
Opcional/Obrigatório
Descrição
classe
Obrigatório
Especifique que esse elemento de HTML div é a recomendação RTP div.
data-rtp-template-id
Obrigatório
A ID do modelo. Isso determina o alinhamento da recomendação. Use "template1" para alinhamento horizontal, "template2" para alinhamento vertical ou "template3" para alinhamento vertical que inclui apenas título e descrição. O script injeta o modelo correspondente nesses div.Permissible valores: template1, template2, template3.

Exemplos

Para exibir suas recomendações em alinhamento horizontal, use "template1".

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

Para exibir suas recomendações em alinhamento vertical, use "template2".

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

Para exibir suas recomendações em alinhamento vertical somente com título e descrição, use "template3".

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

Veja as capturas de tela dos alinhamentos do modelo aqui.

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');

Parâmetro
Opcional/Obrigatório
Tipo
Descrição
'get'
Obrigatório
Sequência de caracteres
Ação do método.
'rcmd'
Obrigatório
Sequência de caracteres
Nome do método.
'richmedia'
Obrigatório
Sequência de caracteres
Nome do submétodo.

Alterar configuração do modelo

Este método altera a configuração padrão do modelo.

Observação: ao usar esse método, ele deve ser chamado antes de chamar rtp('get','rcmd', 'richmedia');

Uso

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

Parâmetro
Opcional/Obrigatório
Tipo
Descrição
'definir'
Obrigatório
Sequência de caracteres
Ação do método.
'rcmd'
Obrigatório
Sequência de caracteres
Nome do método.
'richmedia'
Obrigatório
Sequência de caracteres
Nome do submétodo.
template_id
Opcional
Sequência de caracteres
A ID do modelo das alterações de configuração. Use para especificar alterações de configurações para apenas um modelo.
conf_obj
Obrigatório
Objeto
A nova configuração. O objeto mantém todas as configurações como um par de chave/valor.

Exemplos

Este trecho de código altera o texto do título de um modelo.

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

Este trecho de código mostra categorias de configuração com várias configurações 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"
            ]
        }
    }
);

OBSERVAÇÃO: use "categoria" para filtrar o conteúdo exibido no resultado das recomendações de conteúdo preditivo. Para aplicar conteúdo preditivo a todas as partes de conteúdo ativadas, deixe a "categoria" vazia. Se você quiser recomendar somente conteúdo específico para a saída no modelo de Mídia avançada, adicione uma categoria para o conteúdo na página Definir conteúdo e associe essa categoria no código do modelo de recomendação. Categorização do conteúdo relevante de acordo com as seções do seu site (produtos ou soluções).

Este trecho de código mostra como definir várias configurações de modelo para um modelo.

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

Propriedades de configuração

Configuração
Exemplo
Descrição
rcmd.general.font.family
"rcmd.general.font.family" : "arial"
Altera a família da fonte de todo o texto no modelo. Essa propriedade oferece suporte a todos os valores CSS por tipo de navegador. É possível usar uma família de fontes personalizada se ela existir na página.
rcmd.content.background.color
"rcmd.content.background.color" : "black"
Altera a cor do plano de fundo das caixas internas do modelo. Essa propriedade oferece suporte a todos os valores CSS pelo tipo de navegador.
rcmd.title.text
"rcmd.title.text" : "CONTEÚDO RECOMENDADO"
Altera o título do modelo.
rcmd.title.background.color
"rcmd.title.background.color" : "blue"
Altera a cor do plano de fundo da caixa de título. Essa propriedade oferece suporte a todos os valores de cor css (nome da cor, rgb …)
rcmd.title.font.size
"rcmd.title.font.size" : "26px"
Altera o tamanho da fonte do título. A propriedade oferece suporte a todos os tamanhos de fonte possíveis do valor CSS (px, em, …)
rcmd.title.font.color
"rcmd.title.font.color" : "branco"
Altera a cor da fonte do título. Essa propriedade oferece suporte a todos os valores de cor de fonte (rgb, hex, …)
rcmd.description.font.color
"rcmd.description.font.color" : "branco"
Altera a cor da fonte da descrição. Essa propriedade oferece suporte a todos os valores de cor de fonte (rgb, hex, …)
rcmd.cta.background.color
"rcmd.cta.background.color" : "green"
Altera a cor de fundo do botão. Essa propriedade oferece suporte a todos os valores de cor css (nome da cor, rgb …)
rcmd.cta.font.color
"rcmd.cta.font.color" : "rgb(90, 84, 164)"
Altera a cor da fonte do botão. Essa propriedade oferece suporte a todos os valores de cor de fonte (rgb, hex, …)
rcmd.cta.text
"rcmd.cta.text" : "Push"
Altera o texto do botão. O texto é o mesmo para todos os botões.
categoria
"categoria" : ["uma categoria"]
Altera a categoria de recomendação à qual este modelo dá suporte. O modelo exibe somente recomendações com uma das categorias definidas por essa configuração.

Observação: o suporte à configuração pode ser alterado por modelo.

Exemplo básico

Este exemplo tem um template com três recomendações. Copie esse exemplo em uma página de 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 tem um template com três recomendações. O título do modelo é "CONTEÚDO RECOMENDADO" e o texto do botão será "Leia mais". Copie esse exemplo em uma página de 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, incluindo imagem, título, descrição e botão de chamada para ação.

Modelo de mídia avançada

Exemplo de modelo de recomendação de mídia avançada #2

Nome: modelo2 Descrição: conteúdo vertical, incluindo imagem, título, descrição e botão de chamada para ação.

Modelo de mídia avançada

Exemplo de modelo de recomendação de mídia avançada #3

Nome: modelo3 Descrição: conteúdo vertical que inclui apenas título e descrição. Ao passar o mouse, o cabeçalho muda de cor e é vinculado por hiperlink ao URL do conteúdo. A descrição também vincula ao conteúdo sem alteração de cor. Modelo de mídia avançada

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