ピクセル・タグおよびJavaScriptタグを使用したマウス・クリック・イベントの収集
イメージ・ピクセル・コンテナ・タグおよびJavaScriptコンテナ・タグを使用して、デスクトップおよびモバイルWebページのマウス・クリック・イベント(「カートに追加」、「ビデオの再生」、「チェックアウト」のボタンのクリックなど)を収集できます。このことは、ボタンがクリックされるとアクションを実行するが、ページのURLが変わるAJAX Webページでのユーザー・インタラクションのトラッキングに役立ちます。
ノート: デスクトップWebページのマウス・クリック・イベントを収集する場合は、イメージ・ピクセル・タグをお薦めします。モバイルWebページでは、JavaScriptタグを使用する必要があります。
JavaScriptイベント・ハンドラの例
次の例は、JavaScript環境においてクリック・イベント・ハンドラでピクセル・コンテナ・タグおよびJSコンテナ・タグを実装する方法を示しています。これらの例では、クリック・イベント・リスナーが「カートに追加」ボタンに付加されています。「カートに追加」ボタンのIDは「addToCart」となり、コンテナ・タグはイベントを記述するいくつかのphint (キーと値のペア)を指定して発火されます。
ピクセル・コンテナ・タグ・タイプ(デスクトップWebページ用)
<script type='text/javascript'>
if(typeof addEventListener != "undefined") {
var element = document.getElementById("addToCart");
element.addEventListener('click', function() {
var bk_event_handler_pixel = new Image(); //create new image pixel
//add in additional key/value pairs as needed (for example, phint=event%3DAddToCart)
bk_event_handler_pixel.src="https://stags.bluekai.com/site/siteID?phint=event%3DAddToCart";
}, false);
} else {
var element = document.getElementById("addToCart");
element.attachEvent('onclick', function() {
var bk_event_handler_pixel = new Image(); //create new image pixel//add in addition key/value pairs as needed (for example, phint=event%3DAddToCart)
bk_event_handler_pixel.src="https://stags.bluekai.com/site/siteID?phint=event%3DAddToCart";
});
}
</script>
JSコンテナ・タグ・タイプ(モバイルWebページ用)
<script type="text/javascript" src="https://tags.bkrtx.com/js/bk-coretag.js"></script>
<script type='text/javascript'>
if(typeof addEventListener != "undefined") {
var element = document.getElementById("addToCart");
element.addEventListener('click', function() {
bk_addPageCtx('eventType', 'Add To Cart'); //describe the click event
bk_addPageCtx('productName', 'Blue Sweater'); //provide the product name
bk_addPageCtx('productCategory', 'Women Tops'); //provide the product category
// bk_addPageCtx(<<Key1>>, <<Value1>>); //add in key value pairs as needed
bk_doJSTag(<<site ID>>, 0);
}, false);
} else {
var element = document.getElementById("addToCart");
element.attachEvent('onclick', function() { //event handler for I.E.
bk_addPageCtx('eventType', 'Add To Cart'); //describe the click event
bk_addPageCtx('productName', 'Blue Sweater'); //provide the product name
bk_addPageCtx('productCategory', 'Women Tops'); //provide the product category// bk_addPageCtx(<<Key1>>, <<Value1>>); //add in key value pairs as needed
bk_doJSTag(<<site ID>>, 0);
});
}
</script>
jQueryイベント・ハンドラの例
次の例は、jQuery環境においてクリック・イベント・ハンドラでピクセル・コンテナ・タグおよびJSコンテナ・タグを実装する方法を示しています。サードパーティのJavaScriptライブラリを使用できるUI開発者は、イベント・リスナーをボタン・クリックに簡単に付加できるため、多くの場合jQueryを使用します。JavaScriptの例と同様に、クリック・イベント・リスナーが「カートに追加」ボタンに付加され、「カートに追加」ボタンのIDは「addToCart」となり、コンテナ・タグはイベントを記述するいくつかのphint (キーと値のペア)を指定して発火されます。
ピクセル・コンテナ・タグ・タイプ(デスクトップWebページ用) - pre-jQuery v1.7
<script type='text/javascript'>
$( "#addToCart" ).bind( "click", function() {
//add in additional key/value pairs as needed (i.e. phint=event%3DAddToCart)
var bk_event_handler_pixel = "https://stags.bluekai.com/site/siteID?phint=event%3DAddToCart";
//create new image pixel src$('<img />').on('load').attr('src',bk_event_handler_pixel)
});
</script>
ピクセル・コンテナ・タグ・タイプ(デスクトップWebページ用) - post-jQuery v.1.7
<script type='text/javascript'>
$( "#addToCart" ).on( "click", function() {
//add in additional key/value pairs as needed (i.e. phint=event%3DAddToCart)
var bk_event_handler_pixel = "https://stags.bluekai.com/site/siteID?phint=event%3DAddToCart";
//create new image pixel src$('<img />').on('load').attr('src',bk_event_handler_pixel);
});
</script>
JavaScriptコンテナ・タグ・タイプ(モバイルWebページ用) - pre-jQuery v1.7
<script type="text/javascript" src="https://tags.bkrtx.com/js/bk-coretag.js"></script>
<script type='text/javascript'>
$( "#addToCart" ).bind( "click", function() {
bk_addPageCtx('eventType', 'Add To Cart'); //describe the click event
bk_addPageCtx('productName', 'Blue Sweater'); //provide the product name
bk_addPageCtx('productCategory', 'Women Tops'); //provide the product category
// bk_addPageCtx(key1, value1); //add in key value pairs as needed
bk_doJSTag(siteID, 0);
});
</script>
JavaScriptコンテナ・タグ・タイプ(モバイルWebページ用) - post-jQuery v1.7
<script type="text/javascript" src="https://tags.bkrtx.com/js/bk-coretag.js"></script>
<script type='text/javascript'>
$( "#addToCart" ).on( "click", function() {
bk_addPageCtx('eventType', 'Add To Cart');
bk_addPageCtx('productName', 'Blue Sweater'); //provide the product name
bk_addPageCtx('productCategory', 'Women Tops'); //provide the product category
// bk_addPageCtx(key1, value1); //add in key value pairs as needed
bk_doJSTag(siteID, 0);
});
</script>