Con un gestor de eventos de JavaScript, puede iniciar una llamada de Floodlight cuando los usuarios realicen alguna acción, como hacer clic, descargar un PDF, seleccionar un elemento de un menú o enviar un formulario.
El método descrito a continuación requiere que el navegador del usuario tenga habilitado JavaScript. Si JavaScript está desactivado, no se hará la llamada de Floodlight.
Información general
El objetivo de este método es crear un iframe o una etiqueta de imagen (en el caso de las etiquetas de imagen de Floodlight) de forma dinámica mediante JavaScript, que incluya todos los parámetros necesarios (como las variables personalizadas, las relacionadas con las ventas, y la prevención de almacenamiento en la memoria caché).
Dado que los parámetros utilizados para definir la actividad de Floodlight en sí misma (type y cat) también están presentes en la URL, también es posible usar este método para llamar a distintas actividades de Floodlight de forma dinámica desde la misma página. Esto es útil para páginas basadas en AJAX.
Se puede llamar a las funciones que se describen a continuación utilizando una función onclick() u onsubmit() dentro del cuerpo del archivo HTML. En el caso de los eventos onclick que redirijan a una página de destino o a una descarga de archivo, debe usar el atributo target="_blank". De lo contrario, la redirección a la misma pestaña del navegador evitará que la etiqueta se active correctamente.
Puede encontrar otros ejemplos similares de código implementados en esta página de demostración (el administrador del sitio web puede revisar el código fuente): https://storage.googleapis.com/dcm-floodlight/Floodlight_on_Click_EXAMPLE.html.
Se recomienda implementar todas las declaraciones de función de JavaScript en la sección <head> de la página web.
En el siguiente ejemplo se usa una variable personalizada: u1.
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD1(type, cat, u1) {
var axel = Math.random()+"";
var a = axel * 10000000000000000;
var flDiv=document.body.appendChild(document.createElement("div"));
flDiv.setAttribute("id","DCLK_FLDiv1");
flDiv.style.position="absolute";
flDiv.style.top="0";
flDiv.style.left="0";
flDiv.style.width="1px";
flDiv.style.height="1px";
flDiv.style.display="none";
flDiv.innerHTML='<iframe id="DCLK_FLIframe1" src="http://12345678.fls.doubleclick.net/activityi;src=12345678;type=' + type + ';cat=' + cat + ';u1=' + u1 + ';ord=' + a + '?" width="1" height="1" frameborder="0"><\/iframe>';
}
//]]>
</script>
</head>
<body>
<!-- Este es un ejemplo de una llamada "onclick" en una etiqueta de enlace -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD1('testtype', 'testcat', 'testu1');" target="_blank">Haga clic aquí para probar la etiqueta</a>
</body>
Tenga en cuenta que si se usa una etiqueta de imagen no se activarán las etiquetas predeterminadas y de editor.
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD2(type, cat, u1) {
var axel = Math.random()+"";
var a = axel * 10000000000000000;
var spotpix = new Image();
spotpix.src="http://ad.doubleclick.net/activity;src=12345678;type=" + type + ";cat=" + cat + ";u1=" + u1 + ";ord=" + a + "?";
}
//]]>
</script>
</head>
<body>
<!-- Este es un ejemplo de una llamada "onclick" en una etiqueta de enlace -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD2('testtype', 'testcat', 'testu1');" target="_blank">Haga clic aquí para probar la etiqueta</a>
</body>
En este caso, al llamar a una función con el valor 1 (o un valor genérico) de isUnique, se llamará a una etiqueta de tipo recuento de usuarios únicos en 24 horas, mientras que si se transmite el valor 0 o se omite el valor, se llamará a una etiqueta de tipo recuento estándar.
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD3(type, cat, isUnique) {
var axel = Math.random()+"";
var a = axel * 10000000000000000;
var flDiv=document.body.appendChild(document.createElement("div"));
var cachebust = (isUnique)?';ord=1;num=':';ord=';
flDiv.setAttribute("id","DCLK_FLDiv1");
flDiv.style.position="absolute";
flDiv.style.top="0";
flDiv.style.left="0";
flDiv.style.width="1px";
flDiv.style.height="1px";
flDiv.style.display="none";
flDiv.innerHTML='<iframe id="DCLK_FLIframe1" src="http://12345678.fls.doubleclick.net/activityi;src=12345678;type=' + type + ';cat=' + cat + cachebust + a + '?" width="1" height="1" frameborder="0"><\/iframe>';
}
//]]>
</script>
</head>
<body>
<!-- Este es un ejemplo de una llamada "onclick" en una etiqueta de enlace -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD3('testtype', 'testcat', 1);" target="_blank">Haga clic aquí para probar la etiqueta</a>
</body>
Con un fragmento de código como el siguiente, puede crear etiquetas en las que se especifiquen los parámetros qty (recuento de actividad), cost y ord, además de la variable personalizada u1.
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD4(qty, cost, u1, ord) {
var flDiv=document.body.appendChild(document.createElement("div"));
flDiv.setAttribute("id","DCLK_FLDiv1");
flDiv.style.position="absolute";
flDiv.style.top="0";
flDiv.style.left="0";
flDiv.style.width="1px";
flDiv.style.height="1px";
flDiv.style.display="none";
flDiv.innerHTML='<iframe id="DCLK_FLIframe1" src="http://12345678.fls.doubleclick.net/activityi;src=12345678;type=123;cat=456;qty=' + qty + ';cost=' + cost + ';u1=' + u1 + ';ord='+ ord + '?" width="1" height="1" frameborder="0"><\/iframe>';
}
//]]>
</script>
</head>
<body>
<!-- Este es un ejemplo de una llamada "onclick" en una etiqueta de enlace -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD4(2, 100.34, 'testu1', 'testorderid');" target="_blank">Haga clic aquí para probar la etiqueta</a>
</body>
