JavaScript イベント ハンドラを使用すると、ユーザーがなんらかの操作（クリック、PDF のダウンロード、メニュー項目の選択、フォームの送信など）を行ったときに Floodlight 呼び出しを開始できます。
以下に説明する方法では、ユーザーのブラウザで JavaScript が有効になっていることが条件となります。JavaScript が無効になっている場合、Floodlight 呼び出しは行われません。
概要
この方法では、JavaScript を使って必要なパラメータ（カスタム変数、販売関連の変数、キャッシュ無効化など）をすべて指定した上で iFrame またはイメージタグ（Floodlight イメージタグの場合）を動的に作成することが前提となります。
Floodlight アクティビティ自体を定義するのに使われるパラメータ（type と cat）は URL 内にも存在するため、この方法で同じページから異なる Floodlight アクティビティを動的に呼び出すこともできます。この方法は、AJAX ベースのページで役立ちます。
次に示す関数は、HTML ファイルの本文内で onclick() または onsubmit() 関数を使って呼び出すことができます。ランディング ページやファイル ダウンロードにリダイレクトする onclick イベントの場合は、target="_blank" 属性を使用する必要があります。この属性を使用しないと、同じブラウザタブにリダイレクトが行われたときに、タグが適切に呼び出されなくなります。
この他にも実際に使える同じようなコード例が、次のデモページに実装されています（ウェブサイト管理者はソースコードを確認できます）。https://storage.googleapis.com/support-kms-prod/htYz5eiff51IBVoaLbe4B6P8K5zstwZH6chy
JavaScript 関数の宣言はウェブページの <head> セクションに実装することをおすすめします。
次のサンプルでは、カスタム変数 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>
イメージタグを使用すると、デフォルトタグとサイト運営者タグは実行されなくなります。
<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>
この場合、isUnique の値に 1（または汎用の値）を指定し関数を呼び出すと、24 時間のユニーク ユーザー数のカウンタタイプとしてタグが呼び出されます。値に 0 を指定したり、値を省略したりすると、標準のカウンタタイプとしてタグが呼び出されます。
<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>
次のコードを使用し、qty（アクティビティ カウント）、cost、ord の各パラメータと、カスタム変数 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>
