Rastreamento de conversão de Floodlight

Implementar Floodlight nas páginas em Flash

Este artigo fornece diretrizes sobre como implementar tags Floodlight em um site Flash. Consideramos que você conheça o funcionamento do Flash e do HTML, além de ter conhecimentos básicos sobre as tags do Floodlight.

As técnicas de implementação discutidas neste documento não requerem códigos no contêiner HTML, já que todos os códigos serão implementados no filme Flash.

As seguintes situações serão analisadas:

  • Implementação de tag Floodlight padrão (iframe) em ActionScript 2 e ActionScript 3

  • Implementação de tag de imagem Floodlight em ActionScript 2 e ActionScript 3

Para obter implementações alternativas que exigem a definição de uma função dinâmica de JavaScript no recipiente HTML, conforme denominado pelo ActionScript, consulte Chamar uma tag do Floodlight depois de um evento de JavaScript.

 

Por que o processo de implementação de tags iframe (fls) e tags de imagem é diferente?

Uma tag de imagem Floodlight é uma tag de imagem HTML padrão que solicita uma imagem de 1x1 pixel. Como o Flash pode realizar chamadas externas e carregar imagens externas hospedadas em outro servidor, a implementação das tags de imagem nos filmes em Flash é tão simples quanto carregar qualquer outra imagem externa em seu filme.

Por outro lado, as tags Iframe solicitam e carregam código HTML que pode chamar diversos pixels. Esse código HTML não pode ser carregado nem processado diretamente do filme Flash. Em vez disso, vamos aproveitar a capacidade do Flash de se comunicar com o HTML da página e manipular de forma dinâmica o modelo de objeto de documento (DOM), acrescentando o Iframe ao HTML da página quando o usuário interagir com o filme Flash.

Mesmo que você acrescente de forma dinâmica o Iframe à página HTML em que o filme Flash reside, não há necessidade de adicionar nenhum código extra à página HTML. Tudo será manipulado no filme Flash. Para que esse método funcione, o Flash Player precisa ter acesso garantido a scripts externos. Para isso, certifique-se de que o parâmetro do Flash Player AllowScriptAccess esteja definido como always ou samedomain. Esse parâmetro é definido dentro de tags <object> e <embed> usadas para colocar o filme Flash na página da web. No exemplo abaixo, o valor AllowScriptAccess é definido como always nas tags <object> e <embed>.

 

Etapas da implementação

Neste caso, um conjunto de tags deve ser implementado em um site Flash. Cada tag (Iframe ou de imagem) precisa ser acionada mediante um evento específico. Por exemplo, o clique de um usuário em um botão, o filme chegar a um determinado frame e assim por diante.

Para implementar suas tags do Floodlight em um site Flash:

1. Determine se as tags são Iframe ou de imagem

Como a implementação é diferente, você deve determinar se trabalha com tags Iframe ou de imagem.

  • Uma tag Iframe contém um <iframe...> com uma chamada para os servidores Floodlight (fls) e um rótulo activityi: <iframe src=http://1234567.fls.doubleclick.net/activityi...>

  • Uma tag de imagem contém uma chamada <img...> aos servidores de anúncios DoubleClick (ad) e um marcador activity: <img src=http://ad-region.doubleclick.net/activity...>

2. Recupere o URL para usar na implementação do Flash

Agora que você sabe com que tipo de tag está trabalhando, deve recuperar o URL que será usado na implementação do Flash. O URL é basicamente o valor do parâmetro src= nas tags. De qualquer modo, certifique-se de excluir do URL os valores de parâmetros usados para inserir números aleatórios. Como um número aleatório será gerado pelo código Flash, não há necessidade de usar um número aleatório gerado nas tags do Floodlight. Nas tags de exemplo neste artigo, a variável para o número aleatório é representada por '+a+'"?", uma vez que a variável a é atribuída à função math.random() do JavaScript.

  • Se a tag tiver os valores-chave ord= e num=, exclua o valor do parâmetro num=.

  • Se a tag tiver um valor-chave ord= e nenhum num=, verifique o valor do parâmetro ord=. Se o valor-chave for ord=[SessionID] ou ord=[OrderID], implemente o valor-chave conforme necessário para inserir o valor correto. Exclua todos os outros valores do parâmetro ord= para tags sem valores-chave num=.

Para saber mais sobre esses valores-chave, consulte Tags do Floodlight.

Exemplos de URLs necessários à implementação do Flash:

  • Iframe (fls):

    http://1234567.fls.doubleclick.net/activityi;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2];ord=1;num=[Random Number]
  • Imagem:

    http://ad-region.doubleclick.net/activity;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2];ord=1;num=[Random Number]

3. Implemente o código

Se você seguiu as etapas 1 e 2, deve ter todas as informações necessárias para implementar a tag do Floodlight no filme em Flash. Os exemplos apresentados aqui pressupõem que a tag será disparada quando um usuário clicar em um botão Flash, mas a mesma lógica pode se aplicar a qualquer outro evento Flash.

 

Exemplos

Exemplos de implementação de iframe (fls)

Nestes exemplos:

  • O URL recuperado na etapa 2 é o valor da variável flood_url.

  • Há um botão no estágio com instância de nome mybutton_btn.

Para implementação da tag Iframe no ActionScript 2, recomendamos usar a abordagem de Interface externa, já que getURL pode não funcionar adequadamente no Internet Explorer (IE) devido ao limite de caracteres nos URLs (de 1.024 caracteres em versões mais antigas do navegador), que pode ser excedido pela sequência gerada pelo método getURL. Se você escolher usar o método getURL, recomendamos um teste meticuloso com um rastreador HTTP para garantir que a implementação funcione, e o Floodlight seja solicitado adequadamente.
 

ActionScript 2, método de interface externa

O método de Interface externa é recomendado para implementar tags do Floodlight com ActionScript 2. Requer o Flash 8 ou superior.

import flash.external.*;
mybutton_btn.onRelease = function() {
;   var rand:String = Math.floor(Math.random() * 100000000) + "?";
   var flood_url:String = "http://1234567.fls.co.doubleclick.net/activityi;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
   var tag_url:String = flood_url + rand;
   var dclk_flood = 'f = function() { if (document.getElementById("DCLK_FLDiv")) { var flDiv = document.getElementById("DCLK_FLDiv"); }';
   dclk_flood += 'else{var flDiv = document.body.appendChild(document.createElement("div"));';
   dclk_flood += 'void(flDiv.id = "DCLK_FLDiv"); void(flDiv.style.display= "none"); }';
   dclk_flood += 'var DCLK_FLIframe = document.createElement("iframe"); void(DCLK_FLIframe.id = "DCLK_FLIframe_' + Math.floor(Math.random() * 10000) + '");';
   dclk_flood += 'void(DCLK_FLIframe.src="' + tag_url + '"); void(flDiv.appendChild(DCLK_FLIframe)); }';

;   if (ExternalInterface.available) {
;        ExternalInterface.call(dclk_flood);
   }
};

ActionScript 2, método getURL

Por causa de limites de caracteres em URLs, esse método não é recomendado e só deve ser usado quando não houver outro método viável.

on (release) {
;   var rand = Math.floor(Math.random() * 1000000) + "?";
   var flood_url = "http://1234567.fls.co.doubleclick.net/activityi;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
   var tag_url = flood_url + rand;
;   var dclk_flood = 'javascript:SE(document.getElementById("DCLK_FLDiv")) { var flDiv = document.getElementById("DCLK_FLDiv"); }';
   dclk_flood += 'else { var flDiv = document.body.appendChild(document.createElement("div"));';
   dclk_flood += 'void(flDiv.id = "DCLK_FLDiv"); void(flDiv.style.display = "none"); }';
   dclk_flood += 'var DCLK_FLIframe = document.createElement("iframe"); void(DCLK_FLIframe.id = "DCLK_FLIframe_' + Math.floor(Math.random() * 10000) + '");';
   dclk_flood += 'void(DCLK_FLIframe.src = "' + tag_url + '"); void(flDiv.appendChild(DCLK_FLIframe));';
   getURL(dclk_flood, "_self");
}

ActionScript 3

  • O URL deve ser adicionado à variável flood_url.

  • O código abaixo presume um botão no estágio com o nome fictício mybutton_btn.

import flash.display.*;
import flash.events.*;
import flash.external.*;
import flash.net.URLRequest;

mybutton_btn.addEventListener(MouseEvent.MOUSE_UP, onButtonClick);

function onButtonClick( Event:MouseEvent ):void {
;   var rand:String = Math.floor(Math.random() * 100000000) + "?";
   var flood_url:String = "http://1234567.fls.co.doubleclick.net/activityi;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
   var tag_url:String = flood_url + rand;
;   var dclk_flood = 'f = function() { if (document.getElementById("DCLK_FLDiv")) { var flDiv = document.getElementById("DCLK_FLDiv"); }';
   dclk_flood += 'else { var flDiv = document.body.appendChild(document.createElement("div"));';
   dclk_flood += 'void(flDiv.id="DCLK_FLDiv"); void(flDiv.style.display = "none"); }';
   dclk_flood += 'var DCLK_FLIframe = document.createElement("iframe"); void(DCLK_FLIframe.id = "DCLK_FLIframe_' + Math.floor(Math.random() * 10000) + '");';
   dclk_flood += 'void(DCLK_FLIframe.src = "' + tag_url + '"); void(flDiv.appendChild(DCLK_FLIframe)); }';

   if (ExternalInterface.available) {
       ExternalInterface.call(dclk_flood);
   }
}

Exemplos de implementação da tag de imagem

ActionScript 2

Neste exemplo:

  • O URL recuperado na etapa 2 é o valor da variável flood_url.

  • As variáveis u1 e u2 foram preenchidas com valores fictícios (u1=value1 e u2=value2).

on(release) {
   var rand = Math.floor(Math.random() * 1000000) + "?";
   var flood_url = "http://ad-region.doubleclick.net/activity;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
   var tag_url = flood_url + rand;
;   loadMovieNum(tag_url, 2);
}

ActionScript 3

Neste exemplo:

  • O URL recuperado na etapa 2 é o valor da variável flood_url.

  • As variáveis u1 e u2 foram preenchidas com valores fictícios (u1=value1 e u2=value2).

  • Há um botão no estágio com instância de nome mybutton_btn.

import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
mybutton_btn.addEventListener(MouseEvent.MOUSE_UP, onButtonClick);
function onButtonClick( Event:MouseEvent ):void {
;   try {
;       var ldr:Loader = new Loader();
;       var rand:String = Math.floor(Math.random() * 100000000) + "?";
       var flood_url:String = "http://ad-region.doubleclick.net/activity;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
       var tag_url:String = flood_url + rand;
;       var urlReq:URLRequest = new URLRequest(tag_url);
;       ldr.load(urlReq);
;   } catch (e:Error) {
       trace("error");
   }
}

Seu anunciante também pode fazer o download de exemplos de Flash que implementam tags de imagem do Floodlight ou dinâmicas usando o ActionScript 2 e o ActionScript 3 de nosso Repositório de criativos.

O código fornecido é apenas um exemplo, partindo do princípio de que a tag do Floodlight será acionada pelo clique de um usuário em um botão Flash. Você deve substituir o URL do Floodlight e os valores de suas variáveis. Você pode ainda adaptar o código para funcionar com outros eventos Flash de acordo com suas próprias necessidades e padrões de codificação. No entanto, o URL recuperado na etapa 2 não pode ser modificado.