Mobile Response Tap

Our client wanted a way to get more information about what caused people to call them, and to have an easy 'tap to call' phone number link on their website.

About Response Tap

Response Tap is a way to find out more about the people who phone you. It does this by providing you with various telephone numbers. These can be put in print materials to let you know the source of the call. When implemented into websites, the number is created dynamically and can relay where the caller came from, what they searched for and other information.

From Response Tap's Tracking Code Installation Guide :
'The tracking code enables the provision of unique dynamic numbers for each visitor who views your website and also provides the link between the website visitor’s online journey and their phone call to your business.'

Recommended Installation

Response Tap provides you with the code needed for their system to work on your website through a web interface. It consists of two parts.

First, there is the code to get a tracking number from Response Tap. This needs to be loaded after the content, so is placed at the end of the HTML, just before the </body> tag.

var adiInit = "XXXXX", adiRVO = true;
var adiFunc = null;
(function() {
  var adiSrc = document.createElement("script"); adiSrc.type = "text/javascript";
  adiSrc.async = true;
  adiSrc.src = ("https:" == document.location.protocol ? "https://static-ssl" : "http://static-cdn") +
    ".responsetap.com/static/scripts/rTapTrack.min.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(adiSrc, s);
})();

Then your phone number is placed on the page, where-ever it need to go. It is wrapped in a <span> tag with a class so it can be targeted by Respose Tap's script.

<span class="rTapNumberYYYYYY">01632 287831</span>

Clickable Phone Numbers

Our client required that the viewer should be able to tap the number on a phone to make the call. To do this we changed the phone number html to:

<a href='tel:01623287831' class="rTapNumberYYYYYY">01632 287831</a>

The problem we came across is that Response Tap doesn't change the href attribute to the new number.

The Solution

We tried a few methods to change the href tag, but none of them worked correctly in all browsers. After a quick call to Response Tap's support, they suggested that we use rTapPostReplacement().

rTapPostReplacement() is called by the Response Tap script, if it exists, after the number has been changed. So all we had to do is get the new number and, after a bit of processing, change the href attribute on the necessary links.

function rTapPostReplacement(){
  var trackingNum = jQuery("a.rTapNumberYYYYYY")[0].text.split(' ').join('');
  jQuery("a.rTapNumberYYYYYY").attr('href', 'tel:' + trackingNum + '');
};

Conclusion

Our client's website now has a dynamic telephone number to help them better understand the people that phone them, along with a tap-able call to action for mobile devices.