AdWords Call Conversion Tracking with Google Tag Manager

/

adwords-call-tracking-google-tag-manager

Why Track Calls?

For many organizations tracking calls is an essential piece for lead-generation and sales. Overlooking calls as a valuable conversion source might do your digital advertising a disservice by excluding conversions and user behavior that is critical to overall marketing performance.

You can use Google Forwarding Numbers to measure calls from your website (not your ad extensions) as success metrics in the evaluation of your Google AdWords account. You will be able to see which campaigns, ad groups, and keywords produce the greatest call volume allowing you to optimize accordingly.

Requirements:

In order to use AdWords Call Tracking you must:

  • Have an AdWords account
  • Be using at least one call extensions (can set up before or after tag implementation)
  • Opt into using Google Forwarding Numbers (a component of the above item)
  • Locate your business in an eligible country
  • Have a website
  • Have the ability to edit that website

Where to Get the Tag

To create a Google AdWords Website Call conversion, visit the conversion section of your account, select the “Phone Calls” option, then create your conversion tag as you normally would.

Phone Call Tracking

AdWords will generate the new call tracking tag after all settings have been properly configured. Copy the tag to use in Google Tag Manager later.

AdWords Phone Conversion Tracking Tag

Set Up Phone Tracking in Google Tag Manager

There are only a couple of steps involved; let’s dive in. First, we create a tag in GTM to track AdWords call conversions. Next, we set up another tag to swap out the existing phone number on the site with a Google Forwarding Number. We will fire these tags on All Pages and DOM Ready, respectively. Finally, we will test everything and publish the container.

Create an AdWords Call Conversion Tag in GTM

Step 1. In your GTM Container, create a new Custom HTML Tag.

Step 2. Paste the call conversion tag copied from AdWords into the HTML textbox, and give the tag a name: HTML – AdWords Call Tracking or HTML – AdWords Phone Number Tracking. Follow your preferred naming convention.

Step 3. Select All Pages as the trigger if this conversion tag should be fired on all pages; otherwise, create a more specific trigger to include the pages where you want to track call conversions.

conversionTag-cropped

Create a Tag to Generate a Google Forwarding Number

Follow the steps below to replace all business phone numbers on the site with a Google Forwarding Number. Ideally, we want the visitors to see an identical phone number across the site.

Step 1. Create a new Custom HTML Tag, and call it HTML – AdWords – Google Forwarding Number.

Step 2. Copy the code below and paste it into the HTML textbox.

  • In the above code, on line 5, replace 888.123.1234 with your business phone number.
  • In line 9, replace a#telNum with an appropriate CSS selector to find the existing phone number on page. In this example, we are targeting an anchor tag whose id is telNum.
  • example phone element

  • The variable formattedNumber will contain the resulting Google Forwarding Number, displayed in the same format as the original number.
  • The variable mobileNumber will return a number formatted for use in a clickable link with tel protocol.
  • If there are more than one phone numbers on the page, use different query selectors to capture and replace them all with one Google Forwarding Number.

google forwarding number callback

Step 3. Fire the tag on DOM Ready. If you don’t have a DOM Ready trigger, it’s a good time to set it up now:

DOM ready trigger

You should have successfully implemented this tag by now.

google forwarding number in GTM

Finally, put the container in Debug Mode and get ready to test.

Testing and Debugging

It’s time to verify if the call conversion tag is firing as expected. Google your campaign keywords, click on your ad, and go to your website. Your business phone number should now be changed to a Google Forwarding Number. You can publish the container if everything looks good.

Summary

Going through the steps in this post, you have implemented AdWords call conversion tracking in GTM. You now have a new tool for measuring the impact of your marketing strategies on your lead-generation and sales. Please come back and let us know how you utilized this tool.

Zee is an Analytics Engineer with a passion for user experience design. He is an advocate of simplicity, and he appreciates data-driven designs. He received a degree in Electrical Engineering from Georgia Tech where he challenged himself to solve complex engineering problems and competed at numerous coding hackathons. Zee enjoys reading, learning new languages, and helping local tech startups.

  • SunnyK

    Thanks!

  • http://www.apicalanalytics.com Travis Yano

    I’m a titch confused. Perhaps someone can clarity. The way I read this article, and let me say many thanks to Zee for his continuous sharing of novel ideas and implementations using GMT/GA….it appears to me that this then displays the AdWords forwarding number for all visits to a website, not just AdWords visits…or is this not true?….So, then it’s essentially a call tracking method in which you can then go back and see source/medium?

    • http://www.lunametrics.com/blog/author/zee/ Zee D

      Hi Travis,

      This method would change the business number to a Google forwarding number ONLY IF the visit is an AdWords visit. The Google forwarding number will also be displayed on the following visits (sessions) and that’s how it enables you to see the true source/medium values for a call conversion.

  • David

    Thank you for this solution. I have a page that display my business number in different locations, all of which reference the same class name. I tried your solution and it only updates the first instance of the phone number.

    I may feel like an idiot here, but how would you suggest I go about it so that I can have all phone numbers on the page changed?

    Thanks!!

    • David

      Just moments after I posted this, I realized I had some errors in my code and resolved it. My callback function now looks like this:

      function callback(formattedNumber, mobileNumber) {

      var phoneElement = document.getElementsByClassName(“phone”);
      for(var i=0; i < phoneElement.length; i++) {
      phoneElement[i].href = "tel:" + mobileNumber;
      phoneElement[i].innerHTML = "";
      phoneElement[i].appendChild(document.createTextNode(formattedNumber));
      }
      };

      Hopefully this will be somewhat helpful to someone that runs into my same situation in the future.

      Thanks again for the great insight.

      • http://www.lunametrics.com/blog/author/zee/ Zee D

        Great! I was going to suggest using a for loop to go through all the selected phone elements on page, so I’m glad you figured it out already.

        • Alex Foo

          Thanks David and Zee

          2 clarification questions to also help others reading this:

          Q1
          so on the webpage source code itself where the phone numbers are, what’s the syntax?

          i’ve tried:
          000 111 222

          but doesn’t seem to pick up and change to Google call forwarding number…

          Q2
          how long does the script take to actually change the biz phone number to a Google call forwarding number?

          I ask because when the page loads for the original id method – it took displayed the real biz ph number for a few mins before suddenly switching to google forwarding number

          thanks!

  • Sean Van Guilder

    What if I have multiple numbers for multiple locations on the same page?

    • http://www.lunametrics.com/blog/author/zee/ Zee D

      You can use the query selector to select all those numbers. When you do that, all those numbers will be changed to the same google forwarding number. Is that what you want to see?

      • Sean Van Guilder

        Partially, yes. We have a locations page with multiple numbers that we’re directing paid clicks to land on. I’m just wondering if there is a way to have the variations of numbers be set to different call tracking numbers? For example, we have 206-555-1212 and 206-555-5555 but would want different numbers to track which location they called when landing on the page.

        • http://www.lunametrics.com/blog/author/zee/ Zee D

          Alright. In that case you must define two separate callback functions, and have two separate _googWcmGet calls. In each “callback” function, you should select a different phone element, using the querySelector method. Each _googWcmGet function will then return a new forwarding number. It could look like the following code. Modify it to get a second one.

          function callbackFirstNum(formattedNumber, mobileNumber) { // Callback for the first number

          var phoneElement = document.querySelector(‘a#telNum’); // Find the first number

          if (phoneElement) {
          phoneElement.href = “tel:” + mobileNumber;
          phoneElement.innerHTML = “”;
          phoneElement.appendChild(document.createTextNode(formattedNumber));
          }
          };

          _googWcmGet(callbackFirstNum, originalNumber); // Get the first google forwarding number

          • Sean Van Guilder

            Thank you so much!

  • pasha

    Hi there

    If my number includes (code of the city), can I ignore the brackets?
    For example, (972) -127647614 and 972-ashdfuwuf what variant will be right?

    Thanks

    • http://www.lunametrics.com/blog/author/zee/ Zee D

      You can your preferred format for your business phone number. In your example, you can ignore the parenthesis and say:
      var originalNumber = ‘972-127647614’;
      _googWcmGet function will return a forwarding number matching the format of your original phone number.

      • pasha

        Oh tanks) It`s easy!

  • azaid

    would that work with click to call button on mobile landing page. how would we go about with integrating with click to call button instead of number link?

    • http://www.lunametrics.com/blog/author/zee/ Zee D

      Yes! That is the actual purpose of using this tracking system; to track call button clicks on mobile landing pages, etc. For the second question, can you elaborate what you mean by integrating with click to call button instead of number link?

      • azaid

        ok so i use to use google tracking website call conversion code which was 888-888-8888 . so now what im trying to figure out instead of using that code. i want to use a click to call button not the number link. basically i dont want the number to show on the website just a tap to call button. so my question how would i write the code that can automatically change the number in backend when user click the tap to call button? like is that possible.

        • azaid

          this is the script i use on my mobile lander. after the google tracking script.

          var callback = function(formatted_number, mobile_number) {

          // formatted_number: number to display, in the same format as

          // the number passed to _googWcmGet().

          // (in this case, ‘855-977-7963’)

          // mobile_number: number formatted for use in a clickable link

          // with tel:-URI (in this case, ‘+8559777963’)

          var e = document.getElementById(“number_link”);

          e.href = “tel:” + mobile_number;

          e.innerHTML = “”;

          e.appendChild(document.createTextNode(formatted_number));

          };

          855-977-7963

          [ So basically i just want the number to change in the backend when user tap the tap to call button].

          • http://www.lunametrics.com/blog/author/zee/ Zee D

            Now the question became more of a design question rather than a call conversion tracking question. Seems like you have everything figured out and done and you need to not show the number; right? Well, just don’t show the number in the link then. That would do it.

          • azaid

            So instead of Leave this part blank?

  • David

    Great post!

    3 questions.

    1. If you have multiple IDs where and how what the code change? Same number everywhere.

    var phoneElement = document.querySelector(‘a#telNum’); // Find the phone number’s HTML element

    2. If you have a mix of IDs and Classes how would that look. Same number everywhere.

    3. I can’t see where you put in the mobile number? Is that taken care of? For instance the orginalnumber display number might be: 08 – 12 34 56 78 and the tel: click number might be +46812345678

    Thanks!

    • http://www.lunametrics.com/blog/author/zee/ Zee D

      Hi David,

      1. Select each element and change its attributes. The easiest way would be to copy the callback function, rename it to something else like callback2, and inside callback2 use a different css selector.
      function callback2(formattedNumber, mobileNumber) {

      var phoneElement = document.querySelector(‘a#theOtherID’); // Find the phone number’s HTML element

      if (phoneElement) {
      phoneElement.href = “tel:” + mobileNumber;
      phoneElement.innerHTML = “”;
      phoneElement.appendChild(document.createTextNode(formattedNumber));
      }
      };

      _googWcmGet(callback2, originalNumber);

      2. Same as above. Find each element and change its attributes. The code gets bigger and uglier; there is no way around that. The “callback” function, provided by Google, doesn’t have a third argument to accept a cssSelector, and that’s why we are stuck with this ugly copy/paste solution.

      3. You put your original, formatted, number on Line 5. The actual digits can’t be different between what you are displaying and what the click number is. That is how the code was written by Google.
      var originalNumber = ‘468 – 12 34 56 78’; // Replace with your phone number

      Let me know if you have any questions!

      • David

        Ok, thank you! Quick and great reply.

        So more like this then:

        ; (function() {

        var originalNumber = ’08-123 456 789′; // Replace with your phone number

        function callback(formattedNumber, mobileNumber) {

        var phoneElement = document.querySelector(‘a#googtel’); // Find the phone number’s HTML element

        if (phoneElement) {
        phoneElement.href = “tel:” + mobileNumber;
        phoneElement.innerHTML = “”;
        phoneElement.appendChild(document.createTextNode(formattedNumber));
        }
        };

        function callback2(formattedNumber, mobileNumber) {

        var phoneElement = document.querySelector(‘a#telNum’); // Find the phone number’s HTML element

        if (phoneElement) {
        phoneElement.href = “tel:” + mobileNumber;
        phoneElement.innerHTML = “”;
        phoneElement.appendChild(document.createTextNode(formattedNumber));
        }
        };

        _googWcmGet(callback2, originalNumber);

        })();

        Is there any way to alter the code for debug purpose to see that the code is working properly?
        Such as here: http://www.search-star.co.uk/blog/2015/implementing-adwords-call-tracking-with-google-tag-manager

        • http://www.lunametrics.com/blog/author/zee/ Zee D

          You missed your line to envoke “callback”:

          _googWcmGet(callback, originalNumber); // you forgot to put in this one.
          _googWcmGet(callback2, originalNumber);

          And for testing/debugging: Put your container in Debug Mode > Go on google.com and look for your Ad > Click on the ad > The contact number of the page should be changed to a google forwarding number.

          • David

            Yes 🙂 Thanks!

            I know that is the way for testing it, but I was wondering if there’s anyway to test it without clicking the Ad? Because if you set this up for a new account it will take 30 clicks before you see the number.

            So perhaps to alter the code somehow when debugging.

          • http://www.lunametrics.com/blog/author/zee/ Zee D

            Yeah there is no way really to test that. Reason: AdWords conversion tracking code won’t fire if you are not coming from an AdWords ad.

            Thanks for visiting this blog, and asking great questions, David.
            Best of luck,
            Zee
            twitter: @zeedrak

          • Moak Designs

            Your code is extremely helpful and so is this issue/solution in this comment thread. Thank you so much for that!

            For Debugging Purposes: I came across this article that mentioned about debugging and it was interesting so I thought I’d share that here and see what your thoughts are on that: http://www.trevorayers.com/how-to-set-up-google-adwords-call-forwarding-with-google-tag-manager/

            Also quick question to follow up on the code above; to use both callback functions after both phoneElement code block?

            Like this:

            ; (function() {

            var originalNumber = ‘888.123.1234’; // Replace with your phone number

            function callback(formattedNumber, mobileNumber) {

            var phoneElement = document.querySelector(‘a#telNum’); // Find the phone number’s HTML element

            if (phoneElement) {
            phoneElement.href = “tel:” + mobileNumber;
            phoneElement.innerHTML = “”;
            phoneElement.appendChild(document.createTextNode(formattedNumber));
            }
            };

            function callback2(formattedNumber, mobileNumber) {

            var phoneElement = document.querySelector(‘a#telNum’); // Find the phone number’s HTML element

            if (phoneElement) {
            phoneElement.href = “tel:” + mobileNumber;
            phoneElement.innerHTML = “”;
            phoneElement.appendChild(document.createTextNode(formattedNumber));
            }
            };

            _googWcmGet(callback, originalNumber);
            _googWcmGet(callback2, originalNumber); //Here as you suggested

            })();

            or would the callback function has to between the code blocks?

          • http://www.lunametrics.com/blog/author/zee/ Zee D

            Thanks!
            Those two lines, the _goodWcmGet calls, should be placed at the bottom of the code.

          • Moak Designs

            That’s what I thought! Thanks again.

            Another quick question. I noticed that when I ran a test on one of my clients site, worked beautifully, however when I visited the site again directly instead of clicking on the ad, the forwarding number showed instead of their local number. Is this to be expected or is there something I might have missed? I’ve cleared my cookies & site cache several times and it’s still persistent.

          • http://www.lunametrics.com/blog/author/zee/ Zee D

            That’s strange. Send me a link and I’ll take a look when I get a chance.

          • Moak Designs

            sf-management.com

          • http://www.lunametrics.com/blog/author/zee/ Zee D

            Could’t find an ad copy on google for this site. I can’t make sure I’m replicating what you did on your end if I can’t see the AdWords ad

          • Moak Designs

            Type this in the search, “house pressure washing fort myers” I have it on location targeting restricitions so that may be the reason why you’re unable to find the ad. Plus, it’s a small company among many of other same businesses in SWFL.

          • Moak Designs

            Zee, any luck at all?

          • Moak Designs

            Any luck at all?

          • Moak Designs

            Any luck Zee?

  • delanon

    Quick question:

    My number shows up as follows in my source:
    Call 919-555-1212

    Is the unique selector ‘number’ in this case or something else?
    var phoneElement = document.querySelector(‘number’);

  • delanon

    Quick question:

    My number shows up as follows in my source:

    Call 919-906-2218

    Is the unique selector ‘number’ in this case or something else?
    var phoneElement = document.querySelector(‘number’);

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.