Conteo de clic en las creatividades HTML5

An English version of this article is available here.

Podrás encontrar más información en este artículo de nuestra documentación técnica aquí. Su contenido puede ser mas actualizado que este artículo.

En este artículo se explica cómo la última tecnología de Smart AdServer le permite contar clics en las creatividades HTML5 . Esta solución sigue las recomendaciones del IAB (véase la sección “2.4 Ad Server Compatibility", página 11)

Librería de conteo de clics

En el archivo principal de la creatividad (index.html) se debe insertar en la sección <head> el siguiente script:

<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.0.js">
</script>

Variable de ClickTag

Código ejemplo con varias áreas de clic:

<!DOCTYPE html>
<html>
<head>
<title>html5 multi clicktag</title> 
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body{width:300px;height:600px;margin:0;padding:0;}
#main-container{width:300px;height:600px;cursor:pointer;}
#click-area1{background-color:red;height:150px;display:block;}
#click-area2{background-color:blue;height:150px;display:block;}
#click-area3{background-color:yellow;height:150px;display:block;}
#click-area4{background-color:black;height:150px;display:block;}
</style>
</head>
<body> 
<script type="text/javascript">
var clickTag0 = "http://smartadserver.com";
var clickTag1 = "http://google.com";
var clickTag2 = "http://wp.pl";
var clickTag3 = "http://onet.pl";
</script>
<div id="main-container">
<a id="click-area1"></a>
<a id="click-area2"></a>
<a id="click-area3"></a>
<a id="click-area4"></a>
</div>
<script type="text/javascript">
var clickArea1 = document.getElementById("click-area1");
clickArea1.onclick = function(){ 
window.open(clickTag0, "blank")
}
var clickArea2 = document.getElementById("click-area2");
clickArea2.onclick = function(){
window.open(clickTag1, "blank")
}
var clickArea3 = document.getElementById("click-area3");
clickArea3.onclick = function(){
window.open(clickTag2, "blank")
}
var clickArea4 = document.getElementById("click-area4");
clickArea4.onclick = function(){
window.open(clickTag3, "blank")
}
</script>
</body>
</html>

URL de destino simple (único)

En el archivo index.html, se debe declarar la variable “clickTag” y asignar una URL de destino.

<script>
   var clickTag = "http://www.theclickthroughurl.com";
</script>

Múltiples URLs de destino

Si la creatividad tiene varios elementos clicables, entonces se debe enumerar la variable clickTag: clickTag0, clickTag1, clickTag2...

<script>
    var clickTag0 = "http://www.theclickthroughurl-1.com";
    var clickTag1 = "http://www.theclickthroughurl-2.com";
    var clickTag2 = "http://www.theclickthroughurl-3.com";
</script>

Destino del clic

Para asignar un hipervínculo a un objeto (texto, botón, imagen, etc.), se puede elegir alguno de los siguientes métodos:.

Opción 1

<a id="clickArea"></a>
 
<script type="text/javascript">
var clickArea = document.getElementById("clickArea");
clickArea.onclick = function(){
window.open(clickTag, "blank");
}
</script>

Opción 2

<a id="clickArea" target="_blank"></a>
 
<script type="text/javascript">
var clickArea = document.getElementById("clickArea");
clickArea.href = clickTag;
</script>

Cuando se usa la opción 2, es necesario esperar que la librería de conteo de clics haya sido inicializada. La librería necesita primero, reemplazar las variables javascript clickTag, antes de que el anuncio pueda ser entregado.

Para saber cuándo se ha completado la inicialización, debe registrar la función "init", que será la devolución de la llamada cuando la biblioteca de conteo de clic haya terminado su tarea:

script
function init(){
/* this is a custom function which starts building the ad */
}
sas.clicktag.register(function(){
init();
});
</script>

Especificaciones de IAB

En las especificaciones de IAB se puede encontrar la variable de clickTag utilizada de la siguiente forma:

<a href="javascript:window.open(window.clickTag, '_blank')"</a>

Nosotros no recomendamos que se use este método porque puede hacer que el objeto “window" escriba en el contenedor después del click.

Sobreescribiendo la URL de destino

A pesar de que el desarrollador puede definir la URL de destino como un valor de la variable clickTag, también hay una forma sencilla de cambiar la URL usando la interfaz de Smart AdServer.

Esto añade flexibilidad: permite que el trafficker/gerente de campaña pueda cambiar la URL si tener que involucrar al desarrollador de la pieza.

Más información en el siguiente link.

Ejemplo de creatividades HTML5

Ejemplo 1: ClickTag unico y método window.open

<!DOCTYPE html>
<html>
<head>
<title>html5 single clicktag</title>
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body{width:300px;height:600px;margin:0;padding:0;}
#main-container{width:300px;height:600px;cursor:pointer;}
#click-area1{background-color:red;height:600px;display:block;}
</style>
</head>
<body>
<script type="text/javascript">
var clickTag = "http://smartadserver.com";
</script>
<div id="main-container">
<div id="click-area1"></div>
</div>
<script type="text/javascript">
var clickArea1 = document.getElementById("click-area1");
clickArea1.onclick = function(){
window.open(clickTag, "blank")
}
</script>
</body>
</html>

Ejemplo 2: ClickTag único y registro de callback

<!DOCTYPE html>
<html>
<head>
<title>html5 single clicktag with callback test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.0.js"></script> 
<style>
body{width:300px;height:600px;margin:0;padding:0;}
#main-container{width:300px;height:600px;cursor:pointer;}
#click-area1{background-color:red;height:600px;display:block;}
#click-area2{background-color:blue;height:150px;display:block;}
#click-area3{background-color:yellow;height:150px;display:block;}
#click-area4{background-color:black;height:150px;display:block;}
</style>
</head>
<body>
<script type="text/javascript">
var clickTag = "http://smartadserver.com";
</script>
<div id="main-container">
<a id="click-area1" target="_blank"></a>
</div>
<script>
function customerFunc(){
var clickArea1 = document.getElementById("click-area1");
clickArea1.href = clickTag;
}
sas.clicktag.register(function(){
customerFunc();
});
</script>
</body>
</html>

Ejemplo 3: Conteo de click en creativos HTML5

Baje un archivo ejemplo aquí. En los archivos ZIP, encontrarás un creativo HTML5 completo. El archivo JS incluye varias opciones de clicktag.

Was this article helpful?
1 out of 1 found this helpful
Powered by Zendesk