Sunday, January 31, 2016

Testing AdWords Website Call Conversions WITHOUT Clicking on Ads

Testing AdWords Website Call Conversions WITHOUT Clicking on Ads

Already familiar with AdWords Website Call Conversions and want to jump right to the easy way to test them without click on ads? Click here!

Background:

AdWords Website Call Conversions (aka WCC) are a powerful, yet rarely utilized feature offered by AdWords. They work like this; if someone clicks on one of your AdWords ads and visits your website as a result, any phone number listed on your site is automatically replaced with a dynamic call tracking number that Google will use to track the call and make sure the keywords/campaign used to drive the call are properly credited.

The biggest drawback to AdWords Website Call Conversions is that Google does not offer any easy way to test it and make sure you have set it up correctly. In fact, their official guide just says to try and do a search that will bring up your ad, then click on it and check to see if the number is dynamically replaced on your site. This a terrible testing system though, as this doesn’t work if you are an ad agency that build campaigns for clients that are geo-targeting outside of your location, plus, it requires that you not only stumble upon your own ad, but you also have to get an impression for one that has an active call extension. Add in the fact that call extensions require a certain search volume to be shown, and it can make it very hard to test WCCs.

Recently, I got fed up with the lack of testing tools for AdWords calls to website conversions and decided to take a look at the Javascript source for the script that is called when you implement the conversion on a site. I’m glad I did, because I found two very useful testing tools!

Sunday, January 10, 2016

Javascript to Force Phone Number Input Formatting (Quick and Dirty)

Javascrip Phone Number Format Forcer

One of the common issues with HTML forms is how to handle a variety of input from the user, while maintaining compatibility with the system that is the destination for the values from the form (e.g. a CRM system, a database, etc.)

I ran into this issue head-first at work, when we discovered that a specific CRM that our leads were being sent to required that phone numbers be in a specific format (###-###-####), but our form allowed users to input characters into the phone number field in whatever format they wanted. There are two main options here.

  • One, you can force users to enter their phone number in your format (break up the phone field into three separate fields, then use JS to concatenate the fields with dashes). I don't like this method, because it has the potential to confuse users and doesn't always work with browsers that store past field values.
  • A better method is to simply change the users input to the preferred format, after they have already entered it.

I'm still a novice when it comes to Javascript, but in about 15 minutes I had a solution that I was happy with and works perfectly. It uses plain vanilla Javascript (I'm a sucker for JQuery, but this is better for compatibility) and is reusable (just change the ID to match whatever the ID of your phone input field is). For my specific application, I used this for an embedded Caspio web form.

Javascript Code:

document.getElementById("InsertRecordPhone").addEventListener("blur",Fix_Phone);

function Fix_Phone(){
 var phone_field_content = document.getElementById("InsertRecordPhone").value;
 var phone_numbers_only = phone_field_content.replace(/[^\d]/g,"");
 if (phone_numbers_only.length > 10){ // If user includes country code
  var country_code = phone_numbers_only.slice(0,1);
  var area_code = phone_numbers_only.slice(1,4);
  var main_num1 = phone_numbers_only.slice(4,7);
  var main_num2 = phone_numbers_only.slice(7,11);
  document.getElementById("InsertRecordPhone").value = (area_code+"-"+main_num1+"-"+main_num2);
 }
 else {
  var area_code = phone_numbers_only.slice(0,3);
  var main_num1 = phone_numbers_only.slice(3,6);
  var main_num2 = phone_numbers_only.slice(6,10);
  document.getElementById("InsertRecordPhone").value = (area_code+"-"+main_num1+"-"+main_num2);
 }
}

Demo:


Further Notes:

Depending on your personal preference, you might want to add more to my code (e.g. validation of the number, warn user if number is not valid, etc).