Track a button onclick event

Question

I have a script that tracks outgoing links when the link is inside an <a> tag.

The script is from here

The script will track html inside the tag or an image.

What I need is for it to track a button as seen below.

Here is the code I guess I need to modify:

    function clicktracker(e)
{
var ie  = navigator.appName == "Microsoft Internet Explorer";
var src = ie ? window.event.srcElement : e.target;
var tag =  (src.tagName.toLowerCase() != "a") ? src.parentNode : src;

if (!tag || tag.tagName.toLowerCase() != "a") return;

domain    = clicktracker_domain   (tag.href);
extension = clicktracker_extension(tag.href);

if ( clicktracker_inarray(clicktracker_domains, domain) &&
    !clicktracker_inarray(clicktracker_extensions, extension)) return;

var url   = tag.href;
var title = '';

if (!title) if (tag.tagName.toLowerCase() ==   "a") title = clicktracker_innertxt(tag.innerHTML);
if (!title) if (tag.tagName.toLowerCase() ==   "a") title = clicktracker_innertxt(tag.title);
if (!title) if (src.tagName.toLowerCase() == "img") title = clicktracker_innertxt(src.alt);
if (!title) if (src.tagName.toLowerCase() == "img") title = clicktracker_innertxt("Image");
url   = escape(url  .substr(0, 150));
title = escape(title.substr(0, 150));

if (url && title) setTimeout("clicktracker_aux('"+url+"', '"+title+"')", 10);
return;
}

Here is the button I want to track

<button type="button" title="title" style="background:#cda85c;" class="button btn-cart" onclick="window.open('http://www.example.com')"><span><span><?php echo $this->__('Buy Now') ?></span></span></button>

Here is the full script:

function clicktracker_inarray (arr, val)
{
for (var i in arr) if (arr[i] == val) return true;
return false;
}

// ***** clicktracker_innertxt *****

function clicktracker_innertxt(str)
{
str = str.replace(/<[^>]*>/g, ' ');
str = str.replace(  /&amp;/g, '&');
str = str.replace( /&nbsp;/g, ' ');
str = str.replace(   /^\s+/g,  '');
str = str.replace(   /\s+$/g,  '');
return str;
}


// ***** URL *******************************************************************

var clicktracker_re_scheme = "^\\w+://";
var clicktracker_re_folder = "((?:-|\\w|\\.)*)";
var clicktracker_re_domain = clicktracker_re_scheme+       clicktracker_re_folder;
var clicktracker_re_urlall = clicktracker_re_domain+"(?:/"+clicktracker_re_folder+')*';

// ***** clicktracker_domain *****

function clicktracker_domain(url)
{
var reg   = new RegExp(clicktracker_re_domain);
var match = reg.exec(url);
if (!match) return "";
match = match[match.length-1];
return match;
}

// ***** clicktracker_extension *****

function clicktracker_extension(url)
{
var reg   = new RegExp(clicktracker_re_urlall);
var match = reg.exec(url);
if (!match) return "";
match = match[match.length-1].split(".");
return (match.length >= 2) ? match[match.length-1] : "";
}


// ***** Track *****************************************************************

// ***** clicktracker_aux *****

function clicktracker_aux(url, title)
{
var img = new Image();
img.src = clicktracker_url+"?url="+url+"&title="+title+"&rand="+Math.random();
}

// ***** clicktracker *****

function clicktracker(e)
{
var ie  = navigator.appName == "Microsoft Internet Explorer";
var src = ie ? window.event.srcElement : e.target;
var tag =  (src.tagName.toLowerCase() != "a") ? src.parentNode : src;

if (!tag || tag.tagName.toLowerCase() != "a") return;

domain    = clicktracker_domain   (tag.href);
extension = clicktracker_extension(tag.href);

if ( clicktracker_inarray(clicktracker_domains, domain) &&
    !clicktracker_inarray(clicktracker_extensions, extension)) return;

var url   = tag.href;
var title = '';

if (!title) if (tag.tagName.toLowerCase() ==   "a") title = clicktracker_innertxt(tag.innerHTML);
if (!title) if (tag.tagName.toLowerCase() ==   "a") title = clicktracker_innertxt(tag.title);
if (!title) if (src.tagName.toLowerCase() == "img") title = clicktracker_innertxt(src.alt);
if (!title) if (src.tagName.toLowerCase() == "img") title = clicktracker_innertxt("Image");
url   = escape(url  .substr(0, 150));
title = escape(title.substr(0, 150));

if (url && title) setTimeout("clicktracker_aux('"+url+"', '"+title+"')", 10);
return;
}


// ***** Attach Events *********************************************************

if (navigator.appName == "Microsoft Internet Explorer")
    document.attachEvent   ('onclick', clicktracker);
else document.addEventListener('click', clicktracker, false);

edit*****

The clicks are then stored in the database and called for from a php page.

Answer 1

There's a lot going on in those scripts and it's not clear what you mean by "track", so I'll just give a short version:

document.addEventListener('click',function(e){
    var tag=e.target.tagName.toLowerCase();
    switch(tag){
        case "a":
            //use e.target to track this link event
            break;
        case "img":
            //use e.target to track this image event
            break;
        case "button":
            //use e.target to track this button event
            break;
    }
});

This listens for clicks anywhere on the page, and you use e.target to inspect the click.

Edit:

e is just the name I gave to the event object, which is automatically passed into the function by the event listener. One of the properties that's always in this object is target which contains a bunch of info about the event. if you drop console.log(e) inside the function in the event listener above, you can pull it up in Chrome, hit control+shift+i, go to the javascript console, and explore what's in there.