Crear banners HTML5 - Agencia WAKA

Hace poco vimos cómo usar el programa “Google Web Designer” para saber cómo crear banners HTML5. Este programa de Google está preparado para terminar tu edición gráfica con la publicación en DoubleClick Campaign Manager (DCM), el servidor de publicidad que compró Google hace unos años.

Qué es y para que sirve el ClickTag

El clickTag es un método de seguimiento de clics creado por Adobe en su día para aquellos banners que estaban diseñados con Flash (ahora también es necesario para crear banners en HTML5).

Sirve fundamentalmente para contabilizar los clics que se realizan sobre un anuncio, y son básicos para facilitarle la vida a diseñadores y traffickers (no será necesario crear un banner diferente cada vez que queramos cambiar la url de destino, si no que simplemente tendremos que sustituirla en el adserver).

Cómo funciona

Consiste en insertar un botón transparente en la capa superior del anuncio, asignarle una acción a través de ActionScript, que incorporará como parámetro una URL de redirección de seguimiento de clicks que hará la función de enlace, evitando así tener que incrustar un vínculo concreto directamente en el código.

Incluir el ClickTag en el banner HTML5

Uno de los pasos más delicados y que más confusión genera a la hora de crear banners HTML5 y Flash, es la implementación del clickTag. Por lo que hoy vamos a explicar cómo incluir el “clickTag”. Es muy fácil, pero poco intuitivo. Este es el ejemplo de banner:

Para poder publicar en DCM, deberás subir un ZIP con los archivos de tu banner. El código “clickTag” lo exige la plataforma para poder validar la publicación. Esto es un “evento”, según el programa GWD, y te mostramos cómo incluirlo en tu banner de manera rápida.

Paso 1. Crear un botón o área sensible

Esto ya lo comentamos en el otro post, pero bueno, lógicamente debes tener un botón que clicar. Puede ser todo el banner o un elemento de la creatividad. Lo puede añadir a partir de un “Componente” de los que ofrece el panel de herramientas del programa. Por ejemplo, el componente llamado “Área sensible”. Arrástralo sobre el lienzo de trabajo y aparecerá un rectángulo con una manita en el centro.

Paso 2. Panel de Evento

Sobre el “Área sensible” selecciona con botón derecho la opción “Añadir evento”. Te ofrecerá el complicado panel de acordeón que ves a continuación. En el primer paso, llamado “Evento”, selecciona “Ratón > Click”

Paso 3. Panel de Acción

En el panel de “Acción” debes seleccionar primero “Anuncio de Google” y después la opción “Salir”. La verdad, poco intuitivo.

Paso 4. Panel de Receptor

Esta opción es la fácil, sección “Receptor”. En la versión actual de GWD sólo vemos la opción “gwd-ad”. Con lo que podrás pasar al último paso del acordeón.

Paso 5. Panel de Configuración

Cuidado porque esto es lo más confuso. Deberás rellenar 2 campos. Como hemos dicho, para DCM el clickTag es siempre el mismo. La URL final se configurará una vez subido el banner en el adserver. Ellos realizan la sustitución de la URL. Estos son los parámetros: