Para que una creatividad sea dinámica, deberá conectar una lista con las distintas opciones de contenido (normalmente en forma de hoja de cálculo) a contenedores de su creatividad que puedan incluir texto, imágenes o vídeos. Estos contenedores son normalmente divs u otros elementos HTML.
También puede enviar otro tipo de información desde la hoja de cálculo a una variable de su creatividad que controle el aspecto de la creatividad. Por ejemplo, puede almacenar tres esquemas de color diferentes (azul, verde y púrpura) en su hoja de cálculo y definir reglas que determinen qué esquema utilizar para una audiencia específica, de acuerdo con lo que establezca en su perfil dinámico. Cuando el anuncio se publique, la regla pasa los valores de uno de los esquemas de color a la creatividad, cuyo código hará que se muestre un contenido acorde a ese esquema.
Antes de empezar
Antes de poder vincular los datos dinámicos a la creatividad, debe diseñar la estructura básica de la creatividad, definir el texto del título, las imágenes y demás elementos del diseño que servirán para construir el anuncio.
Si no utiliza Google Web Designer, la creatividad debería incluir Enabler de Studio y el código necesario para registrar salidas, contadores y temporizadores. Más información sobre compilar creatividades
Los pasos que se incluyen a continuación le guiarán por el proceso de creación de creatividades utilizando software de edición de HTML diferente.
Averiguar qué creatividades son dinámicas
Durante el diseño conceptual de las creatividades, identifique cuántos elementos del anuncio quiere intercambiar de forma dinámica. Estos elementos, que se denominan elementos dinámicos, suelen incluir, entre otros:
- Texto
- Imágenes
- Direcciones URL de salida
- Vídeos
Cree una asignación dinámica
Para hacerse una idea más clara de cómo se adapta el contenido del feed en la creatividad, cree un mapa de contenido dinámico, es decir, una réplica del anuncio que indique de forma clara qué elementos son dinámicos. Por ejemplo, en la asignación dinámica que se muestra a continuación, puede ver que existen los siguientes elementos dinámicos: texto del título, imagen del producto, CTA y texto de la oferta. También se han incluido unas notas en el lateral que le resultarán útiles.
Paso 1: Pegue el código de configuración desde Studio
Una vez que haya configurado un perfil en Studio, debe enlazarlo con la creatividad HTML5 para crear la funcionalidad dinámica. Para ello, copie el código de configuración de Paso 4: Genere código en la pestaña Contenido dinámico de Studio. Seleccione el botón HTML5 y, a continuación, copie y pegue el código HTML5 generado en la creatividad
Los siguientes ejemplos de código JavaScript pueden encontrarse insertados en el archivo .html o en un archivo .js independiente.
Ejemplo de código de configuración del Paso 4: Generar código<!-- DynamicContent Start: HTML5 invocation code. -->// Variables de contenido dinámico y valores de muestraEnabler.setProfileId(12345);var devDynamicContent = {};devDynamicContent.SampleElement = [{}];devDynamicContent.SampleElement[0]._id = 0;devDynamicContent.SampleElement[0].headline = "Un título";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);
<!--
* Puede acceder a las variables de la siguiente forma
* DESPUÉS de que el Enabler de Studio se inicie.
* var price = dynamicContent.Product[0].price;
* Nota: Asegúrese de usar "dynamicContent", no "devDynamicContent"
-->
Paso 2: Conecte los datos dinámicos
Añada el código para conectar los datos dinámicos con los elementos individuales de la creatividad como el texto, las imágenes y las URL de salida. Asegúrese de añadir el código después de que se haya inicializado el componente Enabler.
Al escribir código que accede a los datos dinámicos, recuerde utilizar dynamicContent y no devDynamicContent, como se menciona en el código de configuración anterior y se muestra en los ejemplos siguientes.
Ejemplo: definición de texto dinámico
document.getElementById('headline').innerHTML =
dynamicContent.SampleElement[0].headline;
Ejemplo: definición de una imagen dinámica
document.getElementById('background').src =
dynamicContent.SampleElement[0].image_url.URL
Ejemplo: definición de URL de destino dinámicas
document.getElementById('cta').addEventListener('click', ctaHandler);
function ctaHandler() {
Enabler.exitOverride(
"yourExitID",
dynamicContent.SampleElement[0].landing_url.Url);
}
Ejemplo:
var data = {};
data.headline = dynamicContent.SampleElement[0].headline;
y más adelante en el código:
document.getElementById('headline').innerHTML = data.headline;
Paso 3: Pruebe distintos valores dinámicos
Antes de subir las creatividades a Studio, se deben probar diferentes valores para el contenido dinámico. Busque en el feed un intervalo de valores que probar; por ejemplo, distintas URL para imágenes dinámicas o distintas cadenas para texto, en especial casos extremos como texto muy largo o muy corto. Coloque cada valor en el código de configuración de la creatividad y observe la vista previa de los resultados. Esto le ayudará a adelantarse y evitar posibles problemas en lugar de esperar a detectarlos durante el proceso de control de calidad.
Además, tal vez le interese modificar los valores del código de configuración de modo que quede claro que son valores de desarrollo:
<!-- DynamicContent Start: HTML5 invocation code. -->
// Variables de contenido dinámico y valores de muestra
// ...
devDynamicContent.SampleElement[0].headline = "Default headline";
Esto hará que resulte evidente cuándo se está mostrando la creatividad en una vista previa dinámica (o con una etiqueta activa) si la creatividad no está utilizando datos dinámicos "reales", sino que usa los valores de desarrollo del código de configuración.