Cómo insertar el clickTag en banners HTML5 con Google Web Designer y Adobe Animate

15 junio, 2016 por Naiara Fernández

Voy a empezar poniéndote un poquito al día. Hace unos cuantos meses, en septiembre de 2015 concretamente, te contaba que Firefox y Chrome, entre otros, habían decidido decir adiós a Flash. Esto significaba que todo el contenido y anuncios publicitarios en formato Flash incluidos en nuestras páginas web ya no se iban a visualizar, o más bien, iban a aparecer con el símbolo del “play”, dándole la oportunidad al usuario de decidir si reproducirlo o no.

Para hacer frente a este “problema” tenemos dos opciones, crear un .GIF animado o una animación en HTML5. Para recursos sencillos, la primera opción es más que suficiente, sin embargo para crear contenidos interactivos más elaborados te recomiendo la segunda.

Bien, pues imagina que tienes que diseñar un banner y decides hacerlo en HTML5 por la cantidad de opciones que te ofrece. ¿Qué pasa entonces con el clickTag? ¿Tengo que implementarlo al igual que hacía en Flash? Si es así, ¿cómo lo hago?

Sigue leyendo y encontrarás la respuesta a todas las preguntas 😉

Cómo insertar el #clickTag en archivos #HTML5 con #GWD y #Adobe Animate

Click To Tweet

¿Tengo que implementar el clickTag en banners en formato HTML5?

Como bien sabes el objetivo del clickTag es realizar un seguimiento de los clicks que reciben aquellos anuncios publicitarios que se sirven en una web.

En función de la plataforma de publicación de anuncios que utilice la página en cuestión los requisitos para su implementación variarán. Vamos a ver cómo funciona para los dos adservers más utilizados:

Adwords. El clickTag no será un problema 😉

Si diseñas tu banner HTML5 con Google Web Designer:

1. Crea un nuevo documento → escoge el entorno “Adwords”

2. Una vez creado tu diseño → Publicar → Publicar localmente

3. Sube el archivo .zip que se ha generado en Adwords

4. ¡Listo! Se podrá hacer click en tu anuncio aunque no lleve el clickTag

Si diseñas tu banner HTML5 con otras herramientas (Edge, Tumult Hype, Animate…):

Todo el área del anuncio será clickable por defecto, con lo cual no tienes que hacer nada extra 😉

DoubleClick for Publishers (DFP SM y Premium)

En este caso sí hay que incluir el clickTag en los banners en HTML5. De esta manera indicaremos al trafficker dónde debe insertar la macro de clicks para que el seguimiento sea satisfactorio.

¿Cómo implemento el clickTag en un banner en HTML5?

La manera de hacerlo variará en función de la herramienta que utilices para diseñar tu animación. Yo te voy a enseñar a hacerlo con Google Web Designer (GWD) y Adobe Animate.

>> Google Web Designer

A modo de introducción te diré que GWD es una herramienta de Google (DoubleClick y Adwords también lo son), disponible en Mac y PC, que cuenta con un training gratuito (en inglés), y que además te ofrece la posibilidad de certificarte.

Según mi punto de vista, una opción muy buena si lo que buscas es diseñar banners.

Bueno, vamos a lo que vamos…

1. Una vez tienes terminado tu diseño en GWD, tienes que ir a “Componentes” → “Área sensible” → Y arrastrar este componente al escenario

2. A continuación desde el panel de propiedades modificas:

El nombre, por ejemplo puedes utilizar “clickTag”
El posicionamiento, si en izquierda y derecha pones 0, se centrará con tu diseño
El tamaño, que debe ser tan grande como tu banner, en mi caso 300×250 píxeles

3. En la línea del tiempo o cronograma, comprueba que el “Área sensible” que acabas de generar va de principio a fin de tu animación. Para ello puedes activar y desactivar el visor.

4. En el cronograma mantente posicionado sobre la capa de “Área sensible” y vete al panel “Eventos”. En el menú desplegable elige “Selección”. En la parte inferior izquierda hay un +, pincha sobre él.

5. A continuación selecciona “clickTag” (o en su defecto, el nombre que le hayas dado a tu “Área sensible”.

6. En evento despliega “Área sensible” y selecciona “Toque/Clic”.

7. En acción despliega “Anuncio de Google” y selecciona “Salir del anuncio”

8. En Receptor pulsa sobre “gwd-ad”.

9. En Configuración, incluye:

ID de métricas: clickTag o clickTAG (el que te hayan comentado desde el adserver)
URL: la URL de destino del anuncio. Si aún no cuenta con ella no te preocupes, puedes poner otra, ya que se podrá modificar posteriormente desde DoubleClick for Publishers.
Contraer al salir: esta opción tiene sentido activarla si tu anuncio es intrusivo, como por ejemplo un interstitial, ya que como su nombre indica permite que el anuncio se cierre cuando el usuario clicke en él
Pausar medios al salir: en este caso esta casilla debe ir marcada si el anuncio incluye vídeo o audio y queremos que cuando el usuario pinche sobre él se pare.

Una vez todo listo, pulsa en “Aceptar”.

10. Por último, en la parte superior derecha elige “Publicar” → “Publicar localmente”. Y en la nueva venta que se te abre comprueba que “Crear archivo comprimido (ZIP)» esté marcado.

Y ya tenemos listo nuestro material. Sólo queda enviar el archivo comprimido (ZIP) al departamento de tráfico del medio en el que se vaya a publicar, y serán éstos quienes incluyan las correspondientes macro de clicks desde DFP.

>> Adobe Animate

Ahora parece que se lleva mucho eso de reinventarse. Pues cuando Adobe vio que Flash se quedaba sin futuro, decidió darle un giro y crear Adobe Animate.

Si sabías utilizar Flash estás de suerte, Animate funciona exactamente igual.

¿Inconvenientes?

Es de pago
Hay que hacer bastantes modificaciones en los archivos resultantes para que sea compatible con DFP y con Adwords

Mientras Adobe Animate salía al mercado mucha gente ha estado utilizando Adobe Edge Animate, valga la redundancia. Pero parece que han decido dejar de actualizarlo para centrar sus esfuerzos en Adobe Animate. Y esta es la razón de que explique esta última.

Empecemos…

1. Una vez lista tu creatividad, tienes que ir a Archivo → Publicar

*Como aclaración comentarte que según qué adserver se vaya a utilizar para publicar el banner la «Configuración de la publicación» variará.

2. Verás que en el directorio donde has guardado tu archivo .fla se habrá generado, entre otros, un .html.

Ábrelo con un editor de texto y código, como por ejemplo Notepad++ o Dreamweaver, y posiciónate en el <head> (es la cabecera y está al comienzo del documento):

Bajo el “title” añade la siguiente línea (modifica el width y el height en función del tamaño de tu anuncio):
```
<meta name="ad.size" content="width=300,height=250">
```

Debajo de la línea “meta name” incluye el siguiente script:

<script>
 var clickTag = "%%CLICK_URL_UNESC%%%%DEST_URL%%";
</script>

A continuación te explico para qué sirven estas macros:

%%CLICK_URL_UNESC%% contabilizará los clicks
%%DEST_URL%% permitirá que el anuncio enlace a la URL que el trafficker incluya desde DFP.

En el caso de conocer la URL de destino de antemano, puedes incluirla en la variable del clickTag de la siguiente manera:

<script>
 var clickTag = "%%CLICK_URL_UNESC%%http://midominio.com";
</script>

Una vez hechos todos los cambios, el código quedaría de esta manera:

<head>
<meta charset="UTF-8">
<title>clicktag-animate</title>
<meta name="ad.size" content="width=300,height=250">
<script>
 var clickTag = "%%CLICK_URL_UNESC%%%%DEST_URL%%";
</script>

La parte relativa al clickTag que es lo que nos acontece en este post estaría resuelta, ¿qué ocurre? Que si enviamos el material al trafficker tal cual lo genera Adobe Animate, no funcionará ni en Adwords ni en DFP.

Hay una solución, pero es un proceso largo y complejo que te enseñaré en un post posterior.

Y hasta aquí el artículo de hoy. ¿Siguen surgiéndote dudas? Haz un comentario y vemos cómo solucionarlo 😉

Fuente de imagen: 1

Acerca de
Últimas entradas

Sígueme 😉

Naiara Fernández

Diseñadora gráfica y web con gran experiencia en el ámbito de la comunicación online. Mi objetivo es ayudar a profesionales y pequeñas empresas a crear su identidad digital.

Mi tiempo offline lo paso de camino a algún monte, inmortalizando algún momento con mi cámara de fotos, de visita a algún lugar recóndito del mundo o simplemente pasando un buen rato con mis amigos