Carga de HTML5

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.

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'

Links relacionados:

Anuncios HTML con swiffy

Clicktag en anuncios HTML

Español docs

Carga de HTML5

Related content