Liu Kang Liu Kang - 1 month ago 11
Javascript Question

Track button click as goal in Google Analytics

I have a button on my website, clicking on this button reveals a phonenumber.

HTML

<div class="call-wrapper-middle">
<button id="call-phone-middle"><i class="fa fa-phone"></i>Call us</button>
<div class="call-number-middle" style="display: block;"> <a href="tel:555" class="number">555</a></div>
</div>


Using the following jQuery

(function($) {
$("button#call-phone-middle").click(function() {
$(this).hide();
$("div.call-number-middle").show();
});
})(jQuery);


This works great. But I also wish to track the clicks on the button as a goal in Google Analytics.

So I added
href="/show/phonenumber-middle" onclick="javascript:pageTracker._trackPageview (‘Phonenumber Middle’);" target="blank"
to the button:

<div class="call-wrapper-middle">
<button href="/show/phonenumber-middle" onclick="javascript:pageTracker._trackPageview (‘Phonenumber Middle’);" target="blank" id="call-phone-middle"><i class="fa fa-phone"></i>Call us</button>
<div class="call-number-middle" style="display: block;"> <a href="tel:555" class="number">555</a></div>
</div>


And added a goal in Google Analytics with the following settings:.

Goal setup:
Custom


Goal type:
Destination


Destination; Equals to:
/show/phonenumber-middle


Getting "This Goal would have a 0% conversion rate based on your data" and in the Real Time report there is no conversations.

My guess is that something is wrong with the
<button>
but I have no clue.

Update

Changed the button to the following:

<button type="button" onclick="ga('send', 'event', 'button', 'click', 'phone-number-middle');" id="call-phone-middle"><i class="fa fa-phone"></i>Call us</button>


Updated the Goal to the following:

Goal type:
Event


Event conditions:

Category; Equals to:
button


Action; Equals to:
click


Label; Equals to:
phone-number-middle


Still dosen't work.

Answer

I would use a Google Analytics event for this. Here is the documentation for a GA click event. Then in goals, you would set your goal type to event, and you can track it via the Category, Action, or Label attributes

<div class="call-wrapper-middle">
    <button href="/show/phonenumber-middle" onclick="__gaTracker('send', 'event', 'buttons', 'click', 'phone-number-middle');" target="blank" id="call-phone-middle" style="display: none;"><i class="fa fa-phone"></i>Call us</button>
    <div class="call-number-middle" style="display: block;"> <a href="tel:555" class="number">555</a></div>
</div>