Adding onclick to all tel links

Question

I have a wordpress site. Everything is working perfect and no issues. The only thing i am trying to figure out how to do is track whenever someone clicks on a tel link with the following:

<a href="tel:8002221111" onclick="_gaq.push(['_trackEvent', 'Mobile', 'Click to Call'])">Click here to call us now at 1-800-222-1111.</a>

The problem is that i can't add that in my call to action button. I can only use tel:8002221111. I know that i can use global javascript but i have no idea how i would be able to change all tel links to add the onclick option.

Any one have any ideas on how to do this or has anyone already done something like this before?

Answer 1

This will add the onclick event to every a tag whose href starts with tel.

$("a[href^='tel']").on("click",function(){
    _gap.push(['_trackEvent', 'Mobile', 'Click to Call']);
});

Answer 2

You can do this with plain JavaScript:

document.addEventListener("DOMContentLoaded", function () {
    var elements = document.querySelectorAll("a[href^='tel:']"),
        l = elements.length;
    for (var i = 0; i < l; ++i) {
        elements[i].addEventListener("click", function () {
            _gaq.push(['_trackEvent', 'Mobile', 'Click to Call']);
        });
    }
}, false);

Compatible with IE9+ and all other modern browsers.

Answer 3

Please try this :

jQuery('body').on('click', 'a[href^="tel:"]', function() {
       _gaq.push(['_trackEvent', 'ClickToCall', 'CallRequest', 'Mobile', undefined, false]);
});

If this works please let me know, Thanks.