‘Roll Your Own’ Phone Call Tracking Program – It Is Easy!Posted by Mike Belasco on December 8th, 2009 | Filed Under:
So you wanna track phone calls eh? Easy enough my friend. There are some excellent call tracking platforms out in the world including IfByPhone, Mongoose Metrics, VoiceStar and more. We’ve researched a ton of them and while they all had their upsides, each had a downside as well that was hard for either seOverflow or our clients to stomach. In order to solve most of these issues, we went and developed our own phone call tracking program based on the Twilio Web Service API for phone applications. Features that were important to us that were hard to find together in a single call tracking application were:
- affordable for most clients
- ability to port numbers in and out
- integration with Google Analytics for conversion tracking
- call recording
- email alerts when a call was made
- showing the ‘real’ phone number in the code to help with local search
- easy to implement
- ability to track only non-branded organic search traffic
- and more!
Building The ‘Back End’
Step 1: Register for a Twilio account. An account with Twilio is free! Phone numbers are only $5.00 per number per month, and calls cost only 3 cents per minute for ‘local’ calls or 5 cents per minute for toll-free calls. You can start by using numbers for free from the Twilio sandbox. You also get $30.00 worth of credit for free to get started!
Step 2: Buy three ‘local’ phone numbers in your account. You can search by area code for the phone numbers you want. When you find a number you want, Twilio will request a URL to associate with this number. A default URL will be filled in. Leave this default in place for now. You should now have a table with three numbers.
Step 3: Download our phone call tracking code sample zip file here. Once the file is downloaded, open up calls/twiml.php in your favorite editor. Once the file is open, replace XXXXXXXXXX with the phone number where you would like Twilio to forward your calls. Save the file.
Step 4: Open calls/handler.php in your favorite editor. Replace UA-XXXXXX-1 with your Google Analytics profile ID. Also replace email@example.com with the email address where you wish to get notices when a call is logged including a link to the recording of the call. Save the file.
Step 5: Upload twiml.php, handler.php, and Galavanize.php to a directory called/calls on your website.
Step: 6: Go back to Twilio. Decide which number you are going to use for Google visitors and click on the number in the table. Edit the description of the number (currently contains the number itself) to Google. Edit the URL to be http://www.yourdomain.com/calls/twiml.php?callsource=Google (replace yourdomain with the domain you are working with). Hit Save.
Step 7: Now it is time to test and make sure the phone numbers work, forward to your phone, send an email, hit your Google Analytics account, record the call, and finally send you an email. All that in seven steps. All you need to do to test is call the number you assigned to Google (don’t call from the phone to which you are forwarding calls). If the destination phone rang, you had a conversation, and you received an email telling you a call from Google just came in with a link to the recording of your call, then it worked! If not, check the Debugging link in Twilio and see if your program generated an error message. It can take a couple of hours, but a page view will also show up in your Google Analytics profile for the URL/calls/Google.
Building The Front End
Now that the back end of our call tracking application is working, we need to build the logic that controls which phone number to display. Rather than reinventing the wheel and coming up with our own code to detect the referrer and other information about the visitor, let’s use what Google Analytics already knows! The code we use to read the Google Analytics cookie is based on the code written by EpikOne and published in their blog post “Integrating Google Analytics With A CRM“.
Step 1: Open displaynumbers.js in your favorite editor. Enter your phone numbers as values for the appropriate variables. Enter them formatted how you would like them displayed on your web page. Enter your ‘real’ or default phone number in the value for defaultNum. Enter a list of comma separated branded search terms for which you are not interested in tracking phone calls as the value for brandedTerms. Enter the name of the class used for the SPAN or DIV containing your phone number on your HTML page. (Hint: you may need to create SPAN element around your phone number for this. I did and named it ‘tele‘.)
Step 2: Paste this JS code at the footer of your HTML page, and underneath the Google Analytics tracking code snippet. Make sure and update the path to where this file will be stored.
Step 3: Upload displaynumbers.js to your server. Also upload the HTML file you just edited to include the JS as well.
THAT’S IT! You are all done!! Congratulations!!!! Go to a search engine, type in a non-branded term for which you rank, click the search result and you should see your designated phone number for that search engine on your web page! This JS script can also easily be configured to swap out images and images used as backgrounds of a CSS class. The JS script could also be configured to work with PPC and other referrer types as well farily easily.
I hope you enjoyed creating your own phone call tracking application and that it brings you a wealth of knowledge about your phone call conversions.
Bonus Tip: You may want to configure conversion tracking for calls/* in Google Analytics. This way you can see as a conversion goal how many phone calls you received as a result of non-branded organic search.