Using Pixel and JavaScript Tags to Capture Mouse Click Events
You can use the image pixel and JavaScript container tags to capture mouse click events on desktop and mobile web pages (for example, clicks on "Add To Cart", "Play Video", "Check Out", or any other button). This is useful for tracking users' interactions on AJAX web pages where clicking a button performs an action, but does change the page URL.
Note: For desktop web pages, the image pixel tag is recommended for capturing mouse click events. For mobile web pages, you must use the JavaScript tag.
JavaScript event handler examples
The following examples demonstrate how to implement the pixel and JS container tags in a click event handler in a JavaScript environment. In these examples, a click event listener is attached to an "Add To Cart" button. The "Add To Cart" button has an ID named "addToCart", and the container tag is fired with a few phints (key-value pairs) that describe the event.
Pixel container tag type (for desktop web pages)
<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 container tag type (for mobile web pages)
<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 event handler examples
The following examples demonstrate how to implement the pixel and JS container tags in a click event handler in a jQuery environment. UI developers that can use third-party JavaScript libraries often use jQuery as it enables them to easily attach event listeners to button clicks. As in the JavaScript example, a click event listener is attached to an "Add To Cart" button, the "Add To Cart" button has an id named "addToCart", and the container tag is fired with a few phints (key-value pairs) that describe the event.
Pixel container tag type (for desktop web pages) - 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>
Pixel container tag type (for desktop web pages) - 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 container tag type (for mobile web pages) - 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 container tag type (for mobile web pages) - 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>