É possível usar um manipulador de eventos JavaScript para iniciar uma chamada ao Floodlight quando os usuários realizarem alguma ação, como um clique, o download de um PDF, a seleção de um item de menu ou o envio de um formulário.
O método descrito abaixo exige que o navegador do usuário tenha o JavaScript ativado. Se o JavaScript estiver desativado, a chamada do Floodlight não será realizada.
Visão geral
A premissa básica desse método é criar dinamicamente uma tag iframe ou de imagem (no caso de tags do Floodlight de imagem) usando JavaScript, com todos os parâmetros necessários, como variáveis personalizadas, variáveis relacionadas a vendas e cachebusters.
Como os parâmetros usados para definir a conversão do Floodlight (type e cat) também estão presentes no URL, também é possível usar esse método para chamar dinamicamente diferentes conversões do Floodlight da mesma página. Isso é útil para páginas baseadas em AJAX.
As funções descritas abaixo podem ser chamadas usando uma função onclick() ou onsubmit() dentro do corpo do arquivo HTML. Para eventos onclick que redirecionam para uma página de destino ou para o download de um arquivo, é necessário usar o atributo target="_blank". Caso contrário, o redirecionamento para a mesma guia do navegador impedirá a tag de disparar corretamente.
É possível encontrar exemplos similares de códigos em funcionamento implementados nesta página de demonstração (o admin do site pode analisar o código-fonte).
Recomendamos que você implemente as declarações de função JavaScript na seção <head> da página da web.
O exemplo a seguir usa uma variável 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 é um exemplo de uma chamada "onclick" em uma tag âncora -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD1('testtype', 'testcat', 'testu1');" target="_blank">Clique aqui para testar a tag</a>
</body>
Usar uma tag de imagem impedirá que as tags padrão e do publisher sejam acionadas.
<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 é um exemplo de uma chamada "onclick" em uma tag âncora -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD2('testtype', 'testcat', 'testu1');" target="_blank">Clique aqui para testar a tag</a>
</body>
Nesse caso, a chamada de uma função com o valor 1 (ou um valor genérico) para isUnique chamará a tag como um tipo de contador 24 horas de usuários únicos, enquanto passar um valor de zero ou omitir o valor chamará a tag como um tipo de contador padrão.
<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 é um exemplo de uma chamada "onclick" em uma tag âncora -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD3('testtype', 'testcat', 1);" target="_blank">Clique aqui para testar a tag</a>
</body>
Use o código a seguir para criar tags especificando os parâmetros qty (contagem de conversões), cost e ord, além de uma variável 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 é um exemplo de uma chamada "onclick" em uma tag âncora -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD4(2, 100.34, 'testu1', 'testorderid');" target="_blank">Clique aqui para testar a tag</a>
</body>