O criativo dinâmico (DCO - Dynamic Creative Optimization) usa vários componentes como imagens, títulos e descrições e os otimiza para resultados eficientes para cada impressão exibida. Eles ajudam você a criar variações personalizadas de criativos para cada pessoa que vê o anúncio, o que pode aumentar o desempenho.
O criativo dinâmico é uma ferramenta de otimização excelente quando você não sabe ao certo qual criativo será relevante para públicos diferentes.
O DCO é composto pelo arquivo index.html da peça e um arquivo javascript que contem um dicionário de linhas criativas no padrão json e o código para aplicar a troca automática dos parametros de acordo com a linha criativa escolhida.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="ad">
<div id="text1" style="line-height: 60px; text-align: center; font-size: 40px">
</div>
<div id="text2" style="line-height: 40px; text-align: center; font-size: 30px">
</div>
<img id="image1" style="position: absolute; bottom: 10px; right: 10px; width: 100px; text-align: center" />
</div>
//CÓDIGO REFERENCIADO A SEGUIR
<script src="data.js"></script>
</body>
</html>
O dicionário deverá ser dividir por linha criatva (linha1, linha2, etc.) e cada linha terá propriedades cujo nome deve ser igual ao id dos elementos html que os valores deverão ser aplicados. Deverá ser definida também a propriedade (tipo) do elemento (imagem, html, etc.). Conforme exemplo a seguir:
Obs: Todas as imagens deverão estar na mesma pasta que os arquivos index.html e data.js.
/*
Defina as variáveis que serão alimentadas dinamicamente junto com as propriedades, conforme o exemplo abaixo:
*/
var data = {
linha1: {
text1: {
value: 'Text 1 Linha 1',
property: 'innerHTML'
},
text2: {
value: 'Text 2 Linha 1',
property: 'innerHTML'
},
image1: {
value: 'trophy.png',
property: 'src'
},
ad: {
value: 'url("background.jpg")',
property: 'backgroundImage'
}
},
linha2: {
text1: {
value: 'Text 1 Linha 2',
property: 'innerHTML'
},
text2: {
value: 'Text 2 Linha 2',
property: 'innerHTML'
},
image1: {
value: 'trophy.png',
property: 'src'
},
ad: {
value: 'url("background.jpg")',
property: 'backgroundImage'
}
}
};
//NÃO REMOVER
const params = new URLSearchParams(window.location.search);
for (key in (data[params.get('l') || Object.keys(data)[0]])) { var e = document.getElementById(key); if (e) { var d = (data[params.get('l') || Object.keys(data)[0]])[key]; d.property in e && (e[d.property] = d.value), d.property in e.style && (e.style[d.property] = d.value); } }