View Source

Este es un formato que puede subirse a e-planning como 'Banner Tradicional'.

Se deben seguir las siguientes instrucciones:

1) Seleccionar 'Agregar Anuncio' desde la Pauta

2) Seleccionar Formato >> Banner - HTML

3) Completar los campos obligatorios: Nombre,Titulo,Tamaño,Espacios Asociados,URL de Click

4) Agregar Segmentaciones/Condiciones extras al anuncio en caso de requerirlas.

Español docs > Carga de HTML5 > 31.png

5) Abrir la solapa de 'Editar Atributos del Anuncio'

6) Dentro del campo de Código HTML pegar el código generado para la pieza.

IMP! >> No eliminar las etiquetas visibles en el formulario:

Este es un ejemplo del html original:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<HTML>
<head><title>HTML5 Ejemplo 1 - Pelota en Zig Zag</title>
<script type='text/javascript'>
var posX;
var posY
var can;
var contexto;
var direccion;
var direccionV;
window.onload = function() {
    can = document.getElementById('miCanvas');
    contexto = can.getContext('2d');
    posX=15;
    posY=100;
    direccion = 0;
    direccionV = 0;
    setInterval('dibujar()',2);
}
function dibujar() {
          /* Direccion horizontal */
    if (direccion == 0)
        posX++;
    else
        posX--;
    if (posX==340) {
        direccion = 1;
    }
    if (posX==50) {
        direccion = 0;
    }
    /* Direccion vertical */
    if (direccionV == 0)
        posY++;
    else
        posY--;
    if (posY==250) {
        direccionV = 1;
    }
    if (posY==50) {
        direccionV = 0;
    }
    can.width = can.width; // limpia el canvas
    contexto.strokeStyle = '#000000';
    contexto.fillStyle = 'blue';
    contexto.beginPath();
    contexto.arc(posX,posY,50,0,Math.PI*2,true);
    contexto.closePath();
    contexto.stroke();
    contexto.fill();
}
</script>
</head>
<body>
<a href='$LINKURL' target='_blank'> 
    <canvas id='miCanvas' height='300' width='386' style='border: 1px solid #c3c3c3'>
</canvas> </a>
</body>
</html>

-Lo marcado en rojo es lo que deben eliminar.
-Lo marcado en azul es lo que deben incorporar

Así deberá quedar en el ad server:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<HTML><HEAD>
<TITLE>$TITLE</TITLE>
</HEAD>
<BODY topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'>
<table cellpadding='0' cellspacing='0' border='0'><tr><td>
<script type='text/javascript'>
var posX;
var posY
var can;
var contexto;
var direccion;
var direccionV;
window.onload = function() {
    can = document.getElementById('miCanvas');
    contexto = can.getContext('2d');
    posX=15;
    posY=100;
    direccion = 0;
    direccionV = 0;
    setInterval('dibujar()',2);
}
function dibujar() {
          /* Direccion horizontal */
    if (direccion == 0)
        posX++;
    else
        posX--;
    if (posX==340) {
        direccion = 1;
    }
    if (posX==50) {
        direccion = 0;
    }
    /* Direccion vertical */
    if (direccionV == 0)
        posY++;
    else
        posY--;
    if (posY==250) {
        direccionV = 1;
    }
    if (posY==50) {
        direccionV = 0;
    }
    can.width = can.width; // limpia el canvas
    contexto.strokeStyle = '#000000';
    contexto.fillStyle = 'blue';
    contexto.beginPath();
    contexto.arc(posX,posY,50,0,Math.PI*2,true);
    contexto.closePath();
    contexto.stroke();
    contexto.fill();
}
</script>
<a href='$LINKURL' target='_blank'> 
    <canvas id='miCanvas' height='300' width='386' style='border: 1px solid #c3c3c3'>
</canvas> </a>
</td></tr></table>
</BODY></HTML>

Se debe tener en cuenta que se deben subir las urls exactas donde se tengan hosteadas las imágenes. e-planning no hostea imágenes.

Así mismo, en caso de que la programación sea muy extensa, se recomienda hostear parte de los códigos javascript en un .js y los estilos en un css,
de modo que el código no sea muy extenso y sea más practico de modificar.

Conteo de Clicks

La variable que se adiciona al html, permite contabilizar los clicks, que el anuncio redireccione y abra en una nueva ventana:

<a href='$LINKURL' target='_blank'>

La url de click que se coloque en el anuncio, es a la cual va a redirigir el anuncio que se está cargando en la pauta.En el caso del ejemplo a >> 'http://www.e-planning.net'

Español docs > Carga de HTML5 > 283.png

Links relacionados:

Anuncios HTML con swiffy

Clicktag en anuncios HTML