Track calls to a phone number on a website

After you've set up your Google tag, you’ll need to add a phone snippet. The phone snippet replaces a phone number on your website with a Google forwarding number. Install this snippet on site pages where your phone number appears.

1. Next to “Phone snippet,” click Download snippet. You can enter the phone snippet manually on your website. The phone snippet replaces a number on your website with a Google Forwarding Number so you can see how effectively your ads lead to phone calls from your website. The snippet will be automatically populated with the display number you entered.
2. Select how you want to install your tag. You can:
   • Install the tag yourself. If you select this option, you’ll need to follow the instructions below to edit your website code manually after you install your tag. This option is more advanced, and is recommended only if you’re comfortable using JavaScript. You should use this option if you want to track calls to multiple phone numbers on your website. Note: Only one number can be tracked on a single page using the default Javascript tag.
   • Email the tag.
   • Use Google Tag Manager.
3. If you chose Email the tag, next to “Email address,” enter your web developer’s email address.
4. Click Send and continue.
5. Click Create and continue.

1. Open the HTML for the page where you added the phone snippet, or the page where your phone number appears. The phone snippet will look like the code sample below, where “TAG_ID” stands for your tag ID and “CONVERSION_LABEL” stands for your conversion label:

   <script>
gtag('config', 'TAG_ID/CONVERSION_LABEL', {
'phone_conversion_number': 'REPLACE WITH VALUE'
});
</script>

2. For the phone_conversion_number parameter, replace “REPLACE WITH VALUE” with your business phone number. Make sure the number matches the number on your page exactly and includes any relevant country codes.
3. (Optional) Add the following optional parameters to your phone snippet. Follow these guidelines to enter values for the following parameters:
   1. phone_conversion_callback: Enter a callback function. This function will be invoked with 2 arguments. The first argument is the formatted telephone number (in the same format as the phone_conversion_number parameter) The second argument is the telephone number in a plain format (Example: '18001234567').
   2. phone_conversion_css_class: Enter a CSS class name. All elements of that class will have their contents replaced with a formatted telephone number.
   3. phone_conversion_options: You can enter one of the following values:
      • timeout: Maximum time in milliseconds that is allowed for retrieving a number. If a number cannot be fetched within this time, no number is sent to the target. The default timeout is 5000 milliseconds.
      • cache: Set to false to disable caching of the retrieved number in a cookie; otherwise, set the value to true.

   Example of phone snippet with optional parameters

   <script>
gtag('config', 'TAG_ID/CONVERSION_LABEL', {
'phone_conversion_number': '1-650-555-5555',
'phone_conversion_callback': function(formatted_number, mobile_number) {
// formatted_number: number to display, in the same format as the
// number passed to 'phone_conversion_number'.
// (in this case, '1-650-555-5555')
// mobile_number: number formatted for use in a clickable link
// with tel:-URI (in this case, '+16505555555')
var e = document.getElementById("number");
e.innerHTML = "";
e.appendChild(document.createTextNode(formatted_number));
},
'phone_conversion_options': {
'timeout': 20,
'cache': false
}
});
</script>
4. Save the changes to your webpage.

The examples below show how to implement this code snippet in 3 different use cases.

Example 1: Replace your static phone number with a Google forwarding number

This function gets a telephone number and replaces the contents of all spans of the given class. In this example, the phone number "1-800-123-4567" inside the span tag will be replaced with the dynamically generated, formatted forwarding number.

1. Add the phone_conversion_css_class parameter with the value number to your phone snippet. This line is highlighted in the example below:

   <script type="text/javascript">
gtag('config', 'TAG_ID/CONVERSION_LABEL', {
'phone_conversion_number': '1-800-123-4567',
'phone_conversion_css_class':'number'
});
</script>

2. In the HTML for the webpage that has your phone number(s), add the class from the phone_conversion_css_class parameter (highlighted in the example below) to the span tag that contains your phone number.
   <body>
<span class="number">1-800-123-4567</span>
</body>

Example 2: Pass the Google forwarding number to a custom callback function

This function gets a telephone number and sends it to a callback function. The example callback function will replace contents of an element with the ID "number" with the formatted forwarding number.

1. Update your phone snippet to match the code sample below. Replace “1-800-123-4567” with the phone number that appears on your website. Also, make sure to replace “TAG_ID” with the tag ID unique to your Google Ads account, and replace “CONVERSION_LABEL” with the conversion label unique to the conversion action.

   <script type="text/javascript">
var callback = function(formatted_number, mobile_number) {
// formatted_number: number to display, in the same format as
// 'phone_conversion_number'.
// (in this case, '1-800-123-4567')
// mobile_number: number formatted for use in a clickable link
// with tel:-URI (in this case, '+18001234567')
var e = document.getElementById("number");
e.innerHTML = "";
e.appendChild(document.createTextNode(formatted_number));
};

   gtag('config', 'TAG_ID/CONVERSION_LABEL', {
'phone_conversion_number': '1-800-123-4567',
'phone_conversion_callback': callback
});
</script>

2. In the HTML for the webpage that has your phone number(s), add the ID parameter with the value number (highlighted in the example below) to the span tag that contains your phone number.
   <body>
<span id="number">1-800-123-4567</span>
</body>

To allow people viewing your website on a mobile phone to call your business easily, you can make the Google forwarding number clickable.

Example 3: Pass the Google forwarding number to a custom callback function on your mobile site
On mobile web pages with a clickable phone number, replace both the number that is displayed and the number that is called when clicked. This requires use of the callback function.

1. Update your phone snippet to match the code sample below. Replace “1-800-123-4567” with the phone number that appears on your website. Also, make sure to replace “CONVERSION_ID” with the conversion ID unique to your Google Ads account, and replace “CONVERSION_LABEL” with the conversion label unique to the conversion action.
   <script type="text/javascript">
var callback = function(formatted_number, mobile_number) {
// formatted_number: number to display,in the same format as
// 'phone_conversion_number'.
// (in this case, '1-800-123-4567')
// mobile_number: number formatted for use in a clickable link
// with tel:-URI (in this case, '+18001234567')
var e = document.getElementById("number");
e.href = "tel:" + mobile_number;
e.innerHTML = "";
e.appendChild(document.createTextNode(formatted_number));
};
gtag('config', 'TAG_ID/CONVERSION_LABEL', {
'phone_conversion_number': '1-800-123-4567',
'phone_conversion_callback': callback
});
</script>
2. In the HTML for the webpage that has your phone number(s), add the ID attribute with the value number (highlighted in the example below) to the <a> tag that contains your phone number.
   <body>
<a href="tel:18001234567" id="number">1-800-123-4567</a>
</body>