Puoi utilizzare un gestore di eventi JavaScript per avviare una chiamata Floodlight quando gli utenti eseguono azioni del tipo fare clic, scaricare un PDF, selezionare una voce di menu o inviare un modulo.
Il metodo descritto di seguito richiede l'attivazione di JavaScript nel browser dell'utente. Se JavaScript è disattivato, sarà impossibile effettuare la chiamata a Floodlight.
Panoramica
Alla base di questo metodo si presuppone lo sviluppo di un tag iframe o un tag immagine (nel caso di tag Floodlight immagine) utilizzando JavaScript in modo dinamico e tutti i parametri richiesti come, variabili personalizzate, variabili relative alle vendite e cache buster.
I parametri utilizzati per definire l'attività Floodlight in sé (type e cat) sono anche presenti nell'URL, pertanto è possibile ricorrere anche a questo metodo per richiamare in modo dinamico attività Floodlight diverse da una stessa pagina. Una procedura utile nel caso di pagine basate su AJAX.
Le funzioni descritte di seguito possono essere richiamate mediante una funzione onclick() o onsubmit() all'interno del testo del file HTML. Per eventi onclick che reindirizzano a una pagina di destinazione o al download di un file, devi utilizzare l'attributo target="_blank", altrimenti il reindirizzamento alla stessa scheda del browser impedirà la corretta attivazione del tag.
Troverai altri esempi simili sulla gestione del codice implementato in questa pagina demo (l'amministratore del sito web può esaminare il codice sorgente): https://storage.googleapis.com/dcm-floodlight/Floodlight_on_Click_EXAMPLE.html
Consigliamo di implementare eventuali dichiarazioni di funzioni JavaScript nella sezione <head> della pagina web.
L'esempio seguente utilizza la variabile personalizzata 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>
<!-- This is an example of a "onclick" call on a anchor tag -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD1('testtype', 'testcat', 'testu1');" target="_blank">Click here to test the tag</a>
</body>
Tieni presente che l'utilizzo di un tag immagine impedisce l'attivazione dei tag publisher e dei tag predefiniti.
<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>
<!-- This is an example of a "onclick" call on a anchor tag -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD2('testtype', 'testcat', 'testu1');" target="_blank">Click here to test the tag</a>
</body>
In questo caso, la chiamata di una funzione con valore 1 (o con un valore generico) per isUnique richiamerà il tag come tipo di contatore Utenti univoci nelle 24 ore. Viceversa, il trasferimento di un valore pari a 0 oppure l'omissione del valore richiamerà il tag come tipo di contatore standard.
<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>
<!-- This is an example of a "onclick" call on a anchor tag -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD3('testtype', 'testcat', 1);" target="_blank">Click here to test the tag</a>
</body>
Utilizza il codice seguente per creare tag specificando i parametri qty (conteggio attività), cost e ord, nonché la variabile personalizzata 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>
<!-- This is an example of a "onclick" call on a anchor tag -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD4(2, 100.34, 'testu1', 'testorderid');" target="_blank">Click here to test the tag</a>
</body>
