Hide phone number and reveal on click with jQuery

Posted in: Code, Work on September 10th, 2014

Update 05 March 2015: The original post was for Classic Analytics. I have added in code for implementation in Universal Analytics and you can read more about event tracking in Universal Analytics here. However, I am now using Google Tag Manager to track events. I wrote a post about how to use GTM to track buttons without a URL.

One of my recent campaigns needed an option to register by phone on the landing page. Of course, just showing a phone number on a landing page is hard to track without using a dedicated number. So I figured the easiest way to solve this would be to obfuscate part of the number, require a click to reveal the entire number and use Google Analytics events to track that click.

I wanted to obfuscate the last 5 characters of the phone number, allow it to degrade gracefully in case Javascript is turned off and be relatively simple to add or edit the phone number. I started with a span with the full phone number inside.

1
<span id="clickToShow">123-456-7890</span>
<span id="clickToShow">123-456-7890</span>

Then I created a variable for the partially obfuscated number, then used substring to remove the last 5 characters. You could adjust the number of characters removed from the end by changing the number 5 to something else.

1
var shortNumber = $("#clickToShow").text().substring(0,  $("#clickToShow").text().length - 8);
var shortNumber = $("#clickToShow").text().substring(0,  $("#clickToShow").text().length - 8);

Next I created a variable to store my event tracking tags for Google Analytics. The event tags are category (to group events), action (for the type of action the user completed) and label (something to identify the event). These can be set to whatever is required for the campaign, but in this case something generic like Button for category and Click for action may be suitable.

[update 05 Mar 15] Please note that exact event tracking code will depend on your version of Google Analytics. Classic analytics uses _gaq.push(['_trackEvent', ..., whereas universal analytics uses ga('send', 'event', ...

1
2
3
4
5
// Classic Analytics event tracking snippet
var eventTracking = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL']);";
 
// Universal Analytics event tracking snippet
var eventTracking = "ga('send', 'event', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL']);"; 
// Classic Analytics event tracking snippet
var eventTracking = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL']);";

// Universal Analytics event tracking snippet
var eventTracking = "ga('send', 'event', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL']);"; 

Finally, there is some simple jQuery to hide the full phone number and append a button with the partial phone number, then show the full phone number when the button is clicked.

1
2
3
4
5
$("#clickToShow").hide().after('<button id="clickToShowButton">' + shortNumber + '... (click to show number)</button>');
$("#clickToShowButton").click(function() {
    $("#clickToShow").show();
    $("#clickToShowButton").hide();
});
$("#clickToShow").hide().after('<button id="clickToShowButton">' + shortNumber + '... (click to show number)</button>');
$("#clickToShowButton").click(function() {
    $("#clickToShow").show();
    $("#clickToShowButton").hide();
});

Try it out!

Share This:

2 Responses to “Hide phone number and reveal on click with jQuery”

    • Hi Andre,

      This snippet is for classic analytics so won’t work with Universal Analytics. But I have just updated the post so it includes the snippet for Universal Analytics too. That said, I would recommend checking out Google Tag Manager. I don’t really use the event tracking snippets any more as I have better control and easier implementation with Google Tag Manager. This post should help you get setup to track clicks in GTM.

Leave a Reply