Specify the element of the code that contains the needed number to allow Roistat to substitute the company number to the tracked number.

(warning) Number substitution does not work without Roistat tracking code.

Configuration

  1. Open the webpage code and check the value of class or identifier of the element that contains a number. To do it, open your browser and browse the code. The needed element will be highlighted.
  2. If the number is already tagged with some class or identifier (id), copy the name of the class or identifier. 
    A telephone number may have multiple classes. Different classes are divided by spaces.
    For example, Roistat customer service number has two different classes: roistat-phone и tel. 
    You should use the class that belongs to the substitution number. 
  3. If the element with the phone number does not have class or identifier, you should add it in the webpage code. To do it, add the class=“unique class name” or id=“unique title” inside the tag before the telephone number. 
    Thus, the phone number code should look as follows: 

    <span class="roistat-phone">11231111111</span>


  4. On step 3 (Choose website element, including the number) of the calltracking scenario, open the CSS Selector tab and specify the class or identifier in the CSS class or ID name field. Then press Enter or Space, and the specified text will be displayed as the attribute name. 
    You should enter the # symbol before the identifier name. Class names may be specified with a dot or without it. You can specify several classes or identifiers. 

  5. You can also add the telephone number of your website and CSS-Selector on step 3. Phone number and CSS-Selector will be substituted. 

If you need to add the substitution to the web-link, use the following code:

<a href="tel:11231111111" class="roistat-phone-tel"><span class="roistat-phone-tel">11231111111</span></a> 

(warning) A webpage may contain an identifier for only one element. Thus, if you specify the identifier for two phone numbers, Roistat will substitute only the first of two numbers. If you want to substitute more than one number, specify the class instead of the identifier. 

(warning) If you specify the same class or identifier for a substitution number in several scenarios and activate these scenarios, Roistat calltracking won't work correctly. Specify the unique class or identifier for substitution numbers in each scenario. 

Processing the telephone number on the website

By default, the phone number on your website is substituted by the number you specified in the scenario in the following format: +х(ххх) ххх-хх-хх.

You can change the format of the number in one of two ways:

  1. On step 3 In the Format of replacement number field. 
  2. In the website code. 
    If you use this way of configuration, the settings of the telephone number mask have the second priority in the calltracking scenario. So, if the telephone number mask is configured in code and in scenario, Roistat uses the configuration from the code.
    There are 3 classes for configuration of the format in the website code:

(warning) If you specified an identifier as the element with the phone number, the configuration of phone mask via classes is unavailable. 

(отметить) For example, to remove the + symbol from the mask, use the following code:

 <span><span class="roistat-phone-country">1</span>(<span class="roistat-phone-region">123</span>)</span><span class="roistat-phone-number">123-45-67</span> 

(отметить) If you want the phone number to be displayed without city code and country code, specify only the roistat-phone-number class.

(отметить) If you want to add the active web-link to the substituted number and change the phone number in the web-link and on the website page at the same time, use the following code: 

<a href="tel:11231111111" class="roistat-phone-tel"><span class="roistat-phone-country">1</span>(<span class="roistat-phone-region">123</span>)<span class="roistat-phone-number">111-11-11</span></a> 

Recommended articles

Calltracking scenario