Search code examples
javascriptgoogle-ads-apiconversion-tracking

What is required to use more than one Google Adwords call tracking number on a website?


I've been trying to get conversion tracking setup to use Google Adwords free call tracking numbers, but the client has multiple business locations, each with their own phone number. So we need different numbers to be replaced, depending on the page that is visited from the ads.

On top of that the numbers are also href="tel:" click to call numbers, and occur in multiple locations on the page.

There seems to be lots of contradictory advice on whether you can replace different numbers on different pages. What steps need to be taken to implement tracking numbers in this situation?

Note: this is not referring to replacing different numbers on the same page with different tracking numbers. The advice seems pretty universal on this that it can't be done.


Solution

  • Okay, so after much testing and gnashing of teeth, it is possible to implement this, and it is (relatively) straightforward. I'll explain how I did this using Google Tag Manager (GTM) to add the code to the pages. I'd welcome thoughts and feedback on how perhaps this might be done more elegantly...

    • First, you need to create a new Phone Call conversion event in Adwords under Tools->Conversions.
    • Choose "Calls to a phone number on your website", do the setup, but under Tag options choose "Don't enter a number. You'll need to edit your website code manually".
    • Copy the conversion tracking tag, put it in a tag in GTM and set it to trigger on the page view for the particular page.
    • Next create a GTM tag and enter this code modified from the one shown here:

    .

    <script type="text/javascript" id="adwords_google_forwarding_num">
    ; (function() {
        var originalNumber = 'xx xxxx xxxx'; // replace with number to be tracked
        function callback(formattedNumber, mobileNumber) {
          var phoneElement = document.querySelectorAll('.number_link'); //replace with whatever selector you're using to using
          if (phoneElement) {
            for(i=0;i<phoneElement.length;i++){
              phoneElement[i].href = "tel:" + mobileNumber;
              phoneElement[i].innerHTML = "";
              phoneElement[i].appendChild(document.createTextNode(formattedNumber));
            }
          }
        };
        _googWcmGet(callback, originalNumber);
      })();
    </script>
    
    • This will deal with multiple instances of the number and with the click to call aspect. Trigger this tag in GTM on DOM load of the particular page.
    • Test by clicking on an ad. The very helpful suggestion of using #google-wcc-debug described here, only works if you've click an ad at least once.
    • Lastly, when testing different pages, use incognito or clear cache. Sounds obvious but easy to overlook and once a number is called for one page, it won't replace numbers on other pages. The debug message will show something like "Advertiser number doesn't match previous call:".
    • It doesn't seem to matter whether you put brackets around area codes or not. Not sure about other special characters...