Para transformar um criativo em criativo dinâmico, você precisa conectar uma lista de diferentes opções de conteúdo (normalmente armazenada em uma planilha) a contêineres no criativo que incluam texto, imagens ou vídeo. Esses contêineres são principalmente divs ou outros elementos HTML.
Você também pode passar outras informações da planilha para uma variável no seu criativo que é usada para controlar a aparência do criativo. Por exemplo, você pode armazenar três temas coloridos (azul, verde e roxo) na sua planilha e aplicar regras que selecionem um desses temas para um público específico usando regras definidas no seu perfil dinâmico. Quando o anúncio é veiculado, a regra passa um dos temas de cor para o criativo, e o código do criativo mostra o conteúdo do criativo correspondente ao tema de cor.
Antes de começar
Antes de conectar dados dinâmicos ao seu criativo, crie a estrutura básica do criativo, planejando o texto do título, as imagens e outros elementos de design que compõem seu anúncio.
Se você não usa o Google Web Designer, seu criativo deve incluir o Enabler do Studio, e o código necessário já deve estar adicionado para rastrear saídas, contadores ou timers. Para saber mais, siga nossos guias de criação .
As etapas abaixo orientam na criação de criativos com outro software de edição de HTML.
Determinar quais elementos criativos são dinâmicos
Durante a concepção do criativo, identifique quantos e quais elementos do anúncio você pretende trocar dinamicamente. Esses elementos, também chamados de elementos dinâmicos, costumam incluir, mas não se limitar a:
- texto;
- imagens;
- URLs de saída;
- vídeos.
Criar um mapeamento dinâmico
Para visualizar melhor como o conteúdo do feed se encaixa no criativo, crie um mapeamento dinâmico, um esboço do anúncio que marca claramente os elementos dinâmicos. Por exemplo, no mapeamento dinâmico abaixo, é possível ver que existem os seguintes elementos dinâmicos: texto do cabeçalho, imagem do produto, ordem de ação (CTA) e texto da oferta. Há também observações úteis na lateral.
Etapa 1: colar o código de configuração do Studio
Depois de configurar um perfil no Studio, é preciso vincular esse perfil ao criativo HTML5 para gerar a funcionalidade dinâmica. Para fazer isso, basta copiar o código de configuração da Etapa 4: gerar código na guia de conteúdo dinâmico do Studio. Selecione o botão HTML5, copie o código HTML5 gerado e cole-o no seu criativo.
Os exemplos de código JavaScript abaixo podem estar in-line no arquivo HTML ou em um arquivo JS separado.
Exemplos de códigos de configuração da "Etapa 4: gerar código"<!-- DynamicContent Start: HTML5 invocation code. -->// Dynamic Content variables and sample valuesEnabler.setProfileId(12345);var devDynamicContent = {};devDynamicContent.SampleElement = [{}];devDynamicContent.SampleElement[0]._id = 0;devDynamicContent.SampleElement[0].headline = "Some headline";devDynamicContent.SampleElement[0].image_url = {};devDynamicContent.SampleElement[0].image_url.Url ="http://yourServer/sample.jpg";devDynamicContent.SampleElement[0].landing_url = {};devDynamicContent.SampleElement[0].landing_url.Url ="http://www.yoursite.com";Enabler.setDevDynamicContent(devDynamicContent);
<!--
* You may access the variables in the following manner
* AFTER the Studio Enabler is initialized:
* var price = dynamicContent.Product[0].price;
* Note: be sure to use "dynamicContent", not "devDynamicContent"
-->
Etapa 2: conectar os dados dinâmicos
Adicione o código para conectar os dados dinâmicos aos elementos individuais (como texto, imagens e URLs de saída) no seu criativo. Adicione o código após a inicialização do Enabler.
Ao escrever o código que acessa dados dinâmicos, use dynamicContent, e não devDynamicContent, como indicado no código de configuração acima e exibido nos exemplos abaixo.
Exemplo: configuração de texto dinâmico
document.getElementById('headline').innerHTML =
dynamicContent.SampleElement[0].headline;
Exemplo: configuração de uma imagem dinâmica
document.getElementById('background').src =
dynamicContent.SampleElement[0].image_url.URL
Exemplo: configuração de URL de clique dinâmico
document.getElementById('cta').addEventListener('click', ctaHandler);
function ctaHandler() {
Enabler.exitOverride(
"yourExitID",
dynamicContent.SampleElement[0].landing_url.Url);
}
Exemplo:
var data = {};
data.headline = dynamicContent.SampleElement[0].headline;
e, depois, no seu código:
document.getElementById('headline').innerHTML = data.headline;
Etapa 3: testar valores dinâmicos diferentes
Antes de fazer upload do criativo para o Studio, é necessário testar diferentes valores possíveis para o conteúdo dinâmico. No feed, procure por um intervalo de valores para testes (por exemplo, diferentes URLs para imagens dinâmicas ou diferentes strings para texto, especialmente em "casos extremos", como textos muito longos ou muito curtos). Associe cada valor ao código de configuração no seu criativo e visualize os resultados. Isso ajudará você a detectar os problemas antes que eles apareçam no controle de qualidade.
Além disso, é possível modificar os valores no código de configuração para explicitar que são valores de desenvolvimento:
<!-- DynamicContent Start: HTML5 invocation code. -->
// Dynamic Content variables and sample values
// ...
devDynamicContent.SampleElement[0].headline = "Default headline";
Isso ficará evidente quando o criativo for visto na visualização dinâmica (ou com uma tag ativa) se este não usar dados dinâmicos "reais", mas, sim, os valores de desenvolvimento do código de configuração.