クリックコンバージョンタグ

スマホサイトの電話ボタンなど、クリックイベントにコンバージョンポイントがある場合、クリック時にコンバージョンタグが発火するように実装することも可能です。
このチュートリアルでは、HTMLエレメントのOnClick属性に関数をバインドする方法と、 jQueryを使って各要素のclickイベントに関数をバインドする方法の２つを紹介します。jQueryのロードの有無、サイトの構成を考慮したうえで、適した方をお選びください。

onclick

目次

  1. 方法１：HTMLエレメントのOnClick属性に関数をバインドする

  2. 方法２：jQueryを使って各要素のclickイベントに関数をバインドする

方法１：HTMLエレメントのOnClick属性に関数をバインドする

1 ■トランザクションIDはJavaScriptランダム関数で生成します■

'Transaction ID': Math.floor(Math.random()*99999999999),

2 ■JavaScriptでclickoutconv関数を実装■

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">                 

var criteo_sitetype = /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";

function clickoutconv(vId,vPrice,vQuantity)
{  
    window.criteo_q = window.criteo_q || [];
    criteo_q.push(
    { event: "setAccount", account: {{accountid}} },
    { event: "setSiteType", type: criteo_sitetype },
    { event: "trackTransaction", id: Math.floor(Math.random()*99999999999),
            item: [{ id: vId, price: vPrice, quantity: vQuantity }]});
}           
</script>

3 ■HTML要素にonclick属性を追加■

<a href="http://" onclick="clickoutconv('productid1',1,1);return false;">電話をかける</a>

■コンバージョンされた商品の金額や数を動的に代入したい場合は、関数clickoutconvの引数として入れてください。■

【動的代入に必要な編集箇所】

clickoutconv('#商品ID#',単価,個数)

【例】※priceとquantityが取得できない場合は固定で1を入れてください。

clickoutconv('productid1',1,1)

■実装をデモぺージでご覧になれます■

１、”電話をかける”をクリック。

２、エレメントにCriteoのヘッダーリクエストが出力されます。これでオンクリックでタグが発火していることが確認できます。

demo

方法２：jQueryを使って各要素のclickイベントに関数をバインドする

1 ■トランザクションIDはJavaScriptランダム関数で生成します■

'Transaction ID': Math.floor(Math.random()*99999999999),

2 ■v_というプリフィックスが付いている各変数に動的に値を入れてください■ 【動的代入が必要な編集箇所】

var v_pid ="#商品ID#";
var v_price = #単価#;
var v_quantity = #個数#;

【例】※priceとquantityが取得できない場合は固定で1を入れてください

var v_pid ="productid1";
var v_price = 1;
var v_quantity = 1;

3 ■JavaScriptのタグを実装する■

<input type="button"  width="270" height="60" name="submit" value="電話をかける" style="border:none;">

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">                 

$(document).ready(function() {
        var crto_itemArray = [];
        var crto_sitetype= /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";
        var v_button =$("input[value='電話をかける']");
        var v_pid ="productid1";
        var v_price = 1;
        var v_quantity = 1;
        crto_itemArray.push({id:v_pid, price: v_price, quantity: v_quantity });

          v_button.click(function(){
              window.criteo_q = window.criteo_q || [];
              window.criteo_q.push(
               { event: "setAccount", account: {{accountid}} },
               { event: "setSiteType", type: crto_sitetype },
             { event: "trackTransaction", id: Math.floor(Math.random()*99999999999),
               item: crto_itemArray }
              );
          });
});     
</script>

■実装をデモぺージでご覧になれます■

１、”電話をかける”をクリック。

２、networkタブににCriteoのwidget callが出力されます。これでオンクリックでタグが発火していることが確認できます。

jquery_demo