Static call script

Description of the script for replacing the numbers of any operators on the site. Constructor for visual script customization. Header substitution for different traffic sources.

What is the script for?

The script for changing phone numbers on the site helps to set up the conditions when a certain number should appear. Numbers can be of any operators, it’s only important that you can get statistics on calls to these numbers.

The script also remembers where the visitor came from. If for the first time he came from Yandex, and then, repeatedly from the bookmarks, the phone number associated with Yandex is displayed.

Suppose you need to determine how many calls from users who come from advertising Yandex Direct and articles on websites. To track the two sources of traffic will require 3 numbers. One number will count calls from all other sources.

To do this, you need to install a script on the site that determines where the visitor came from and shows him the desired phone number.

How to install and configure the script

Download the script and connect to the site.

<script src='/js/sipuni-calltracking.js'></script> 

Add the CSS class ct_phone in the elements where the numbering will take place. If the number is in the header and in the basement of the site, then for all numbers you need to add a class.

 <span class="ct_phone">+7 888 888-88-88</span> 

Paste the substitution code. It can be inserted anywhere on the page, as long as it is after the elements in which the substitution occurs.

 <script> sipuniCalltracking({ sources: { 'yadirect':{'utm_source': 'direct.yandex.ru'}, 'articles':{'ref': /(habrahabr|oborot.ru)/ig} }, phones: [ {'src':'yadirect', 'phone':['+74951111114']}, {'src':'articles', 'phone':['+74952222224']} ], pattern:'+# (###) ###-##-##' }, window); </script> 

If substitution is required only in the header of the site, then the code can be inserted directly below the numbers. In this case, the substitution of numbers is almost imperceptible.

For no particular reason, I do not recommend to execute the code in the readiness event of the DOM model or in the Google Tag Manager, because the substitution of numbers becomes more noticeable.

Customization using the constructor

To simplify customization, we created a constructor . To work with the designer, I advise you to read the entire article in order to understand the values ​​of the parameters.

In the first section, you need to create traffic sources and conditions how to determine them. Below, you set the appropriate traffic sources and phone numbers. Ready script at the bottom of the page.

In the designer there are examples of determining the sources of traffic. They can be used as a basis, and expanded if required.

When all set up ready-made code can be copied at the bottom of the page.

Configure traffic sources

In the sources array, traffic sources are specified.

 'articles':{'ref': /(habrahabr|oborot.ru)/ig} 

In this example, articles is the name of the source. This name is used in the phones array. The ref key means to search for the source address, and the value is a regular expression with which to execute the search.

The following search locations are supported:

• ref - the address from which the visitor came to your site.
• dst - the address of the page on which the visitor came.
• utm is only a parameter starting with utm .

In this example, utm_medium will search for the substring email.

 'email': {'utm_medium': 'email'} 

By replacing the substring with a regular expression, you can use more complex search rules.

 'email': {'utm_medium': /(email|eml)/ig } 

If searching for a substring or a regular expression is not enough, it is possible to set a function. The value of the search location is supplied to the function parameter, and the function must return true or false.

  'ydirect_openstat': {'dst': function(subject){ var o = query.getRawParam(subject, '_openstat'); return (o && a2b(o).indexOf('direct.yandex.ru')>-1); } } 

In this function, the _openstat parameter is unpacked from the page address and verified that it is from Yandex Direct.

Matching traffic sources and phone numbers

After setting up the traffic sources, you need to set the correspondence of numbers and sources.

 phones: [ {'src':'yadirect', 'phone':['+74951111114']}, {'src':'articles', 'phone':['+74952222224']} ], 

If the site displays multiple numbers at the same time, they need to be listed in the phone array.

 targets: ['.phone1', '.phone2'], phones: [ {'src':'yadirect', 'phone':['+74951111114', '+78121111114']}, {'src':'articles', 'phone':['+74952222224', '+78122222224']} ], 

The targets parameter sets selectors for items in which to replace numbers. The number of targets must match the number of phones in the phone parameter

HTML will look like this:

 <span class="phone1">+7 495 888-88-88</span> <span class="phone2">+7 812 888-88-88</span> 

By default, targets have one selector - .ct_phone

Number display

The numbers are displayed according to the pattern parameter. By default, it is

 +# (###) ###-##-## 

Instead of # characters, numbers from numbers will be substituted.

The template must be set for specific numbers. The default template allows you to display 11-digit Russian numbers, but will not be able to correctly display the Belarusian number, because it has 12 digits.

In the template, you can use HTML tags. For example, if you want to separate the number from the city code.

 +# (###) <strong>###-##-##</strong> 

If the pattern parameter is made empty, the number will be displayed as it is written in the phones section.

If the template is not enough, the display of the number can be done using the callback function. The function parameter is supplied with an array from the list of phones.

 function substCallback(p){ if(p){ document.getElementById('top_phone').innerText=someComplexModification(p.phone[0]); } } sipuniCalltracking({ callback: substCallback, sources: { ... }, phones: [ {'src':'yadirect', 'phone':['+74951111114']}, {'src':'articles', 'phone':['+74952222224']} ], }, window); 

Substitution of page headers for different traffic sources

The script can be used to replace any page content depending on the sources of traffic.

Header substitution for different keywords

A simple version of the substitution, when instead of phone numbers indicated by the title.

 sipuniCalltracking({ pattern: '', sources: { 'yadirect_ustanovka':{'utm_keyword': ''}, 'yadirect_rassrochka':{'utm_keyword': ''} }, phones: [ {'src':'yadirect_ustanovka', 'phone':['   ']}, {'src':'yadirect_rassrochka', 'phone':['   ']} ] }, window); 

Now we need to add a CSS class in the header tag.

 <h1 class="ct_phone"> </h1> 

If the visitor came to the announcement of gas boilers with the installation, the title “Gas boilers with installation” will appear to him. Since the script remembers where the visitor came from for the first time, when you re-enter the site, he will still see “Gas boilers with installation”.

In the pattern parameter, we submit an empty string so that the pattern is not applied to the lines in the output.

You can change the title and subtitle, and make the CSS classes clearer by setting targets.

 pattern:'', targets: ['.title', '.subtitle'], phones: [ {'src':'yadirect_ustanovka', 'phone':[ '   ', '       ']}, {'src':'yadirect_rassrochka', 'phone':[ '   ', '   6 ']} ], 

Mark up the CSS classes title and subtitle elements in which we change the content.

 <h1 class="title"> </h1> <p class="subtitle">    </p> 

Substitution of content using the callback function.

For a more complex substitution option, you can use the function. This option will podoytet if you want to replace the image. The dictionary from the list of phones is passed to the function or null if the source is not found.

 function substCallback(p){ if(p){ document.getElementById('header_img').src=p.phone[1]; }else{ document.getElementById('header_img').src = '/default.png'; } } sipuniCalltracking({ pattern:'', targets:['.title'], callback: substCallback, sources:{ ... }, phones:[ {src:'yadirect_dostavka', phone:['  ', '/kotel_dostavka.png']}, {src:'yadirect_ras', phone:['  ', '/kotel_ras.png']} ] }, window); 

Check and debug substitution code

You can check the script in jsFiddle. In order to connect the script file use this link . Directly jsFiddle does not allow to connect files from GitHub therefore the link is converted using rawgit.com service

Landing Page and Referrer

In normal mode, the second parameter of the script is the window object. For debugging, use a dictionary instead, in which specify the referrer and landing page.

 var wnd = { document:{referrer:'http://yandex.ru'}, location:{href:'http://mysite.com/?utm_keyword=dostavka'} }; sipuniCalltracking({ … }, wnd); 

Turn off remembering the source of the visitor

When debugging, it is important to disable the mechanism for storing the visitor’s source in the cookie. To do this, add two parameters:

 cookie_ttl_days: 0, cookie_key: 'test1', 

Example

Example jsFiddle to test the script: https://jsfiddle.net/xndmnydj/1/

Not forget

After debugging, do not forget to remove the cookie_ttl_days and cookie_key and replace the wnd parameter with the window.

Conclusion

Static call tracking has several advantages over dynamic: there is no shortage of numbers when traffic increases, there are no collisions when the number is shown to another person, and the previous visitor calls on it.

Static call tracking is suitable for evaluating the performance of advertising channels, for example, organic, social networks, contextual advertising. This will help the script described in the article.

We created the script for our clients, but since it works with the numbers of any operators, we decided to make it open, the license is MIT.

Plans to add the installation through a package manager, such as Browserify or Webpack.

→ GitHub repository