Blog

Google Forwarding Number: A Guide for Non-Developers

blog_post_190

What is a Google Forwarding Number?

Google provides an awesome service called Google Call Forwarding Number, to help its advertisers track phone call conversions.

In a nutshell, Google provides brands with a unique phone number to display in their AdWords advertisements or on their company website. When a prospective customer rings this number, Google forwards the phone call to the business and tracks the call as a conversion on Google Analytics. Website call conversion tracking helps you identify and measure which specific keywords, ads, ad groups and campaigns are leading to call conversions. This helps you more effectively tailor your AdWords campaign budget for higher converting keywords. 

How does Google know what number to replace and how does it work?

The standard Google tracking code allows you to specify the CSS (cascading style sheet) class for the elements containing the replacement phone number, and the original business number. For example:

    
        07 3257 0677
    

While this works out of the box, it is only appropriate for simple cases. Fortunately, Google provides an alternative - callback functions.

The callback function allows you to control exactly which elements are targeted, and how the phone number should be replaced. For example:

    
        
    
    
        07 3257 0677
    

This is a great option, however, if you're not proficient writing JavaScript and you need to implement more complicated functions, such as multiple selectors or numbers numbers on a single page; it's likely you will quickly find yourself out of depth, scouring the internet for help.

Based on our research, these are common problems which nobody has managed to solve with a single, simple solution.

How can we help?

At Klyp, our Marketing team use Google forwarding numbers to help track phone call conversions on many of our clients' websites. Often our clients require a more customised option than the usual callback code; but an existing solution cannot be easily found online. So we're sharing the following snippet:

    (function (window, document) {
      // Persist existing window.onload event listener
      var onload = window.onload;
      // Define DOM selectors for replacement
      var selectors = [{
        parent: ‘header a.phone',
        child: 'span.text',
      }, {
        parent: ‘div.foobar a.phone'
      }, {
        parent: ‘footer a[href^=”tel”]',
        override: true
      }];
      // Set value to actual business number as it appears on your website
      var formatted_business_number = '123 456';
      // Set value to actual business number without any formatting (numbers only)
      var unformatted_business_number = '123456'
      // Callback with replacement Google tracking numbers
      var callback = function (formatted_number, unformatted_number) {
        if (typeof onload === 'function') onload.call();
        selectors.forEach(function (selector) {
          document.querySelectorAll(selector.parent).forEach(function (parent) {
            if (parent.tagName === 'A') parent.href = 'tel:' + unformatted_number;
            var element = (parent.querySelector(selector.child) || parent);
            element.innerHTML = (selector.override) 
              ? formatted_number 
              : element.innerHTML.replace(formatted_business_number, formatted_number);
          });
        });
      };
      // Uncomment the following line of code to test with GTM in debug mode
      // window.onload = callback('1800 222 222', '1800222222'); 
      window.onload = _googWcmGet(callback, unformatted_business_number);
    })(window, document);

This was originally based on code found in an article by John Hoffman, but since then has evolved to include support for the following situations:

Can we offer a detailed explanation?

We'll explain how to determine and specify the element selectors, how to tell Google which phone number you would like to replace. We'll also provide some more information for those wondering what the purpose of the other code is.

Selectors

For the callback function to identify what needs to be replaced with the Google Call Forwarding Number, you need to specify this by way of DOM selectors. w3schools have a useful  reference guide with examples of different selectors. As mentioned previously, the callback supports finding and replacing phone numbers in multiple elements, both with and without the same selectors. For example, let's take a look at how to find and replace the phone numbers in the following markup:

    
    
Call 123 456

There are several different elements containing phone numbers in the above code. It's best if we work from the top down, so we can see the first parent we need to find is an element, with a class of phone in the

element. Written as a DOM selector, this would become:

    parent: ‘header a.phone’

But you'll notice that the element contains two elements, one of which has a class of text and displays a phone number. This is where the support for nested child elements is useful. Written as a DOM selector, this would be:

    child: ‘span.text’

This gives us our first selector group, which we'll wrap in curly brackets:

    var selectors = [{
      parent: ‘header a.phone',
      child: 'span.text',
    }];

The second parent that we need to find is an element, with a class of phone in a

element, with a class of foobar. Written as a DOM selector, this would be:

    parent: ‘div.foobar a.phone’

You’ll notice that the element doesn’t have any child elements itself; instead it contains only the phone number. We can therefore omit the child selector property. This gives us our second selector group:

    var selectors = [{
      parent: ‘header a.phone',
      child: 'span.text',
    }, {
      parent: ‘div.foobar a.phone'
    }];

The final parent that we need to find is an element, with an href beginning with tel in a