Call to get started now

Configuring the Webmatch Javascript code for tracking website visitors

Webmatch is a Javascript library which tracks website hits to your website and matches them up with phone calls that may eventually be placed from a unique telephone number on your website. This is similar to the Google Analytics Javascript tracking code, but we only report on website visits that led to a phone call.

Note: If you're using Wordpress, download our plugin and the accompanying documentation.

Add the Javascript to your page

This is the most basic form of the Javascript snippet. This code must be present on all pages within your website for accurate tracking. You can place this in the <head> or in the <body> of your HTML document. We recommend placing it at the bottom of the <body> tag so that your important page content loads first before downloading our Javascript.


For “static” phone numbers:

<script src="//webmatch.callcap.com/track/webmatch.js" type="text/javascript"></script>
<script language="javascript">
var webmatch = new Webmatch({u: '<unique callcap campaign id>'}).init();
</script>

For dynamic phone numbers:

<script src="//webmatch.callcap.com/track/webmatch.js" type="text/javascript"></script>
<script language="javascript">
var webmatch = new Webmatch({
rotate: 'Bgy-xxx-zkOz',
instance_class: 'callcap_phone_number'
}).init();
</script>

Display the phone number on your page

The phone number associated with your Webmatch snippet should be on the webpage so the visitor knows which number to call.

For static phone numbers

You must add the phone number manually to your website HTML code, or in your content management system.

For dynamic phone numbers

If you're not sure how a Dynamic Number Rotator might benefit you, read our whitepaper.

To set up a Dynamic Number Rotator, follow these steps.

The phone number is chosen from your pool of numbers and assigned to the visitor for the rest of the day. The Webmatch Javascript code will automatically insert this phone number anywhere on your page that has a class that is the same as instance_class in your Javascript code from above. By default, we look for the class callcap_phone_number but you can change this to any valid class string.

For example, let’s say you want to display 2 different dynamic numbers on your webpage servicing New York City. You want to display one phone number with the area code associated with Manhattan (212) and another phone number with the area code associated with Brooklyn (718). Your Webmatch objects would look like the following:

<script src="//webmatch.callcap.com/track/webmatch.js" type="text/javascript"></script>
<script language="javascript">
var webmatch212 = new Webmatch({
rotate: 'Bgy-xxx-zkOz',
instance_class: 'webmatch212'
}).init();

var webmatch718 = new Webmatch({
rotate: 'Cwe-yyy-oiSm',
instance_class: 'webmatch718'
}).init();
</script>

Notice we’ve given each separate dynamic number group its own variable name (webmatch212 and webmatch718). We’ve also changed the instance_class to the same string as the variable name. Each Webmatch definition must have a unique instance_class to make sure the right phone numbers are placed in the right locations.

In the HTML layout we would have something similar to this:

<p>Manhattan: <span class="webmatch212"></span></p>
<p>Brooklyn: <span class="webmatch718"></span></p>

After the Javascript code picks a phone number for the visitor for each dynamic number group, it will place it in the appropriate place. The HTML would then look something like this:

<p>Manhattan: <span class="webmatch212">212-555-1234</span></p>
<p>Brooklyn: <span class="webmatch718">718-555-9876</span></p>

Advanced options

Required configuration options

u The unique campaign ID for your static number. This will be provided when setting up the phone number. Do not modify the u variable; it will cause calls to be tracked incorrectly or not at all. Required for static phone numbers.
rotate The unique ID for your dynamic phone number group. Do not modify the rotate variable; it will cause calls to be tracked incorrectly or not at all. Required for dynamic numbers.
instance_class This must be a string that is a valid HTML class. We will find HTML elements with this class and insert the dynamic phone number inside of it. Required for dynamic numbers, but defaults to callcap_phone_number.

Display options for dynamic phone numbers

phone_format The formatting applied to the dynamic phone number. Options:
dash - 555-123-4567 (Default)
paren - (555) 123-4567

You can also set phone_format to a function that accepts one argument (the phone number) and returns a string.
phone_link If set to true, the formatted dynamic phone number will be wrapped in an HTML anchor tag to allow smart phones to load the number into the dialer when touched. Defaults to false.

Example: <a class="phone" itemprop="telephone" href="tel:5551234567">555-123-4567</a>

Using a function for phone_format

By creating a custom phone_format function, you can wrap the selected phone number in any HTML you need. One common use is to display an image that contains the chosen phone number. You would need to create an image that includes every phone number in your dynamic number group and use a common naming scheme for the image files.

function renderPhoneNumberAsImage(phoneNumber) {
	return '<img src="/img/call-' + phoneNumber + '.png" alt="Call ' + phoneNumber + '" title="Call ' + phoneNumber + '" />';
}

var webmatch = new Webmatch({
	rotate: "XXX-YYY-ZZZ",
	phone_format: renderPhoneNumberAsImage,
	phone_link: false,
	instance_class: "callcap_phone_number",
	loadUtmParams: true,
	useUtmTermForSearch: true
}).init();
					

The result would look something like this:

<div class="callcap_phone_number">
    <img src="/img/call-5551239876.png" alt="Call 5551239876" title="Call 5551239876" />
</div>
					

You may wish to make the image a clickable/touchable "tel" link to make dialing on mobile easier. This can be done with the "phone_link" argument.

function renderPhoneNumberAsImage(phoneNumber) {
    return '<img src="/img/call-' + phoneNumber + '.png" alt="Call ' + phoneNumber + '" title="Call ' + phoneNumber + '" />';
}

var webmatch = new Webmatch({
    rotate: "XXX-YYY-ZZZ",
    phone_format: renderPhoneNumberAsImage,
    phone_link: true,
    instance_class: "callcap_phone_number",
    loadUtmParams: true,
    useUtmTermForSearch: true
}).init();
					

The result:

<div class="callcap_phone_number">
    <a class="phone" itemprop="telephone" href="tel:5551239876">
        <img src="/img/call-5551239876.png" alt="Call 5551239876" title="Call 5551239876" />
    </a>
</div>
					

Tagging and tracking options

We provide 4 built in variables for tagging and additional information related to the web visit. They are named after suggested use-cases, but can be used for any data (with a maximum of 255 characters each).

k “Keyword” can be used to track keyword campaigns, and is separate from the organic search term that we capture automatically.
c "Creative" can be used to track different versions of an ad or landing page.
a "Ad Group" can be used to track multiple ads in the same Ad Group.
p "Ad Placement" can be used to track different placement options for ads.
loadUtmParams If set to true, the Webmatch library will look for standard “UTM” URL tagging parameters to set the Callcap tagging variables automatically. Defaults to false.
URL parameter mappings:
utm_term → Callcap k variable
utm_content → Callcap c variable
utm_campaign → Callcap a variable
utm_source → Callcap p variable
utm_medium → Traffic type (source medium*)

Note: Even if set to true, if you manually place text into one of the tagging variables, that text will override the URL parameter.

More information about setting up UTM parameters: https://support.google.com/analytics/answer/1033867?hl=en
useUtmTermForSearch If set to true, the Webmatch library will use the URL parameter utm_term as the primary “Search Term” if the search engine hides the actual search term. This will let you still run keyword search term reporting even when search engines like Google hide visitor search terms.
pull_parameters If set to true, the Webmatch library will look for specific URL parameters to set the tagging variables automatically. Defaults to false.
URL parameter mappings:
cc_k → Callcap k variable
cc_c → Callcap c variable
cc_a → Callcap a variable
cc_p → Callcap p variable

Note: Even if set to true, if you manually place text into one of the tagging variables, that text will override the URL parameter.

*A note about source medium tracking and tagging

We attempt various methods of determining the medium of your traffic. Some of these methods are increasingly being hidden by search engines such as Google. To make sure that Callcap always marks your leads as coming from paid search or a display network you should add the "utm_medium" parameter to your ad destination URLs (ex. "utm_medium=ppc" or "utm_medium=gdn").

We will always use what you specify in utm_medium as the source medium, whether loadUTMParams is on or not.

Adwords campaign dimension tagging

Using the loadUtmParams option of the Webmatch Javascript code, tagging URL parameters from your Adwords campaigns will bring that data inside Callcap.

Important: If you are using Adwords "auto-tagging" you must also use "manual-tagging" with UTM parameters (optimally in a tracking template) for Callcap to see and report on ad campaign dimensions. Adwords auto-tagging sends only an identifier ("gclid") and there is currently no way to match that ID to your ad information. Learn more about auto-tagging vs. manual tagging.

For example, if you wanted to track all visits that came from the ad group "Ad 1" just change your ad destination URLs from www.example.com to www.example.com/?utm_campaign=ad_1

Use ValueTrack parameters to make setup even easier

ValueTrack is an Adwords feature that appends tracking values to your ad's landing page URLs. To set up ValueTrack, you add special tags called URL parameters to your ad's landing page URL, tracking template, or custom parameters. ValueTrack URL parameters are dynamic, which means they'll change based on the details of the ad when it was clicked. Each URL parameter is a piece of text that starts and ends with braces ({ }), like {keyword}. This will allow you to automatically include important information about your Adwords campaigns in Callcap.

How to set up ValueTrack parameters and tracking templates

We recommend that you set up your tracking by first defining your final URL, then adding your UTM parameters in a tracking template in “URL options.”

Example

  • Let's say you manage a shoe store with the website http://www.example.com, and you want to track the keywords people use before they click your ad.
  • You could set your final URL to www.example.com, then add a utm_term parameter to your tracking template in URL options (we recommend setting this up at the account level). Your tracking template would look like this: {lpurl}?utm_term={keyword}
  • Tracking templates can be set up at the ad group, campaign, or account level in Adwords. Learn more about tracking templates.
  • If your ad has a match keyword of “ankle boots”, when someone searches for "black ankle boots" and clicks on your ad, the URL they click through will look like this: www.example.com/?utm_term=ankle%20boots
  • Using this ValueTrack parameter passes on the Adwords keyword that was matched to the visitor’s search term. It does not pass on the full search term that the visitor typed in.

For more detailed instructions, check the Adwords Help page: https://support.google.com/adwords/answer/6305348

Important: For Callcap’s automatic tagging to work you must use one of the following:

  • “UTM” parameters (utm_term, utm_content, utm_campaign, utm_source) with loadUtmParams set to true.
  • Callcap-specific URL parameters (cc_k, cc_c, cc_a, cc_p) with pull_parameters set to true (and loadUtmParams set to false or not specified).

Callcap Webmatch setup

To capture the URL parameters automatically, you only need to set loadUtmParams to true in the Webmatch object initialization. Once this is complete we will automatically find those ValueTrack parameters and report on them.

Example

If your destination URL looks like this:

http://www.example.com/?utm_term={keyword}&utm_content=ad_1&utm_campaign=example_ads&utm_source=adwords&utm_medium=ppc

And your Webmatch object looks like this:

var webmatch = new Webmatch({
u: '<unique callcap campaign id>',
loadUtmParams: true
}).init();

Then, a “Webmatched” phone call may look like this:

  • Referrer: https://www.google.com
  • Page: http://www.example.com/
  • Medium: ppc
  • K: ankle boots
  • C: ad_1
  • A: example_ads
  • P: adwords

Each website hit from Adwords will have k, c, a, and p Webmatch variables set to the string in the corresponding URL parameter.

NEXTms and TPI: The Perfect Match
Posted February 15, 2018 on our Blog