One of my Magento clients is investing heavily into their advertising, mostly Google Adwords, and wanted to track phone calls generated by their PPC campaign. Since PPC advertising can get expensive, it’s a good idea to track its effectiveness. But how do you track phone calls?
Dynamic number insertion. What is dynamic number insertion? It’s a method that switches out or inserts a specific phone number into the content of your website, depending on the referral source or PPC campaign-driven URL parameters. Checking a referral source is easy if you’re doing it between non-SSL websites. However, since there isn’t a proper referrer URL given by ads through Google Adwords (to distinguish it from organic searches), it’s best to add a URL parameter to the destination URL of your ad. So instead of just www.yourdomain.com, it would be www.yourdomain.com?campaign=adwords when you set up your ads. For the sake of this tutorial, I am using ?campaign=adwords as my URL parameter, but of course, you can adjust it to your different campaigns.
I was given a Javascript tutorial to work from, but that just didn’t work on a Magento platform. After some experimentation, I finally got it to work.
How to Set Up Dynamic Phone Numbers in Magento
First, we have to set up a cookie for anyone that clicks through the ad. Open up your theme’s head.phtml file, and add this code right after the Magento License:
Magento Cookie Set Up
<?php
session_start();
$_SESSION["origURL"] = $_SERVER['REQUEST_URI']; // pulls the current request URL
$google = strpos($_SESSION['origURL'], "adwords"); // substitute "adwords" with the URL parameter you want to test against
if($google !== false) {
$name = 'adwords'; // sets the name of the cookie
$value = 'true'; // sets the value of the cookie
$period = 86400; // sets the expiration of the cookie in seconds -- this value is for 24 hours
// set cookie
Mage::getModel('core/cookie')->set($name, $value, $period);
}
?>
The cookie is set! This particular cookie will last 24 hours, and we will test users for this cookie. If they have this cookie, then we will serve the alternate phone numbers and alternate content to them.
Dynamic Phone/Content Switching
For this client, I have 2 site-wide images with the phone numbers on them: one is in the header and one is in the footer. I also have in-text phone numbers all over the place within CMS pages and blocks.
My site-wide images are part of the template files themselves, so it’s easy enough to set up an if-else statement to test for the cookie:
<?php $adwordsValue = Mage::getModel('core/cookie')->get("adwords"); // retrieves the value of the cookie
if($adwordsValue == "true") {
echo "Your image with the alternate/PPC phone number here";
} else {
echo "Your default image here";
}
For in-text phone numbers, however, I turned to jQuery. For any particular phone instance I need to have switched, I wrapped it in a span with a unique class (it must be unique because all instances of this class will get switched out):
<span class="phonetext">1-800-xxx-xxxx</span>
Here’s my jQuery that will only appear if the cookie is there:
<?php $adwordsValue = Mage::getModel('core/cookie')->get("adwords"); // retrieves the value of the cookie
if($adwordsValue == "true") { ?>
<script type="text/javascript">
function phoneswitch() { jQuery(".phonetext").html("1-866-xxx-xxxx"); } // the alternate phone number
jQuery(document).ready(function() { phoneswitch(); }); // switches out the phone number on page ready
</script>
<?php } ?>
Footer Problems? It’s Caching
I was finding that my footer wouldn’t display the alternate PPC-only phone number on the production site (which has caching enabled). To stop the footer from caching, you need to create a copy of /app/code/core/Mage/Page/Block/Html/Footer.php in your Magento’s local folder, and comment out the content of the _construct() function, like this:
protected function _construct()
{
/* $this->addData(array(
'cache_lifetime'=> false,
'cache_tags' => array(Mage_Core_Model_Store::CACHE_TAG, Mage_Cms_Model_Block::CACHE_TAG)
)); */
}
Once everything is set up, refresh your cache and test it by adding your URL parameter to your website’s URL. You should be able to view the alternate phone number.
