JavaScript API. Описание методов

JavaScript API - это методы программного интерфейса, предназначенные для динамического взаимодействия клиента с кодом приложения. Ниже мы рассмотрим все методы JS API, реализованные на данный момент, с примерами кода. Если Вам интересно узнать о типичных случаях использования JS API, читайте эту статью.

Загрузка скрипта mango.jsЗагрузка скрипта mango.js

Прежде чем использовать API коллтрекинга, необходимо загрузить JS-скрипт. Это осуществляется асинхронным образом с помощью следующего кода. Код лучше вставлять в конце страницы внутри тега <script> перед закрывающим тегом </body>:

<span style="color:#808030; ">(</span><span style="color:#800000; font-weight:bold; ">function</span><span style="color:#808030; ">(</span>w<span style="color:#808030; ">,</span> d<span style="color:#808030; ">,</span> u<span style="color:#808030; ">,</span> i<span style="color:#808030; ">,</span> o<span style="color:#808030; ">,</span> s<span style="color:#808030; ">,</span> p<span style="color:#808030; ">)</span> <span style="color:#800080; ">{</span>
           <span style="color:#800000; font-weight:bold; ">if</span> <span style="color:#808030; ">(</span>d<span style="color:#808030; ">.</span>getElementById<span style="color:#808030; ">(</span>i<span style="color:#808030; ">)</span><span style="color:#808030; ">)</span> <span style="color:#800080; ">{</span> <span style="color:#800000; font-weight:bold; ">return</span><span style="color:#800080; ">;</span> <span style="color:#800080; ">}</span> w<span style="color:#808030; ">[</span><span style="color:#800000; ">'</span><span style="color:#0000e6; ">MangoObject</span><span style="color:#800000; ">'</span><span style="color:#808030; ">]</span> <span style="color:#808030; ">=</span> o<span style="color:#800080; ">;</span>
           w<span style="color:#808030; ">[</span>o<span style="color:#808030; ">]</span> <span style="color:#808030; ">=</span> w<span style="color:#808030; ">[</span>o<span style="color:#808030; ">]</span> <span style="color:#808030; ">||</span> <span style="color:#800000; font-weight:bold; ">function</span><span style="color:#808030; ">(</span><span style="color:#808030; ">)</span> <span style="color:#800080; ">{</span> <span style="color:#808030; ">(</span>w<span style="color:#808030; ">[</span>o<span style="color:#808030; ">]</span><span style="color:#808030; ">.</span>q <span style="color:#808030; ">=</span> w<span style="color:#808030; ">[</span>o<span style="color:#808030; ">]</span><span style="color:#808030; ">.</span>q <span style="color:#808030; ">||</span> <span style="color:#808030; ">[</span><span style="color:#808030; ">]</span><span style="color:#808030; ">)</span><span style="color:#808030; ">.</span>push<span style="color:#808030; ">(</span><span style="color:#797997; ">arguments</span><span style="color:#808030; ">)</span> <span style="color:#800080; ">}</span><span style="color:#800080; ">;</span>
           w<span style="color:#808030; ">[</span>o<span style="color:#808030; ">]</span><span style="color:#808030; ">.</span>u <span style="color:#808030; ">=</span> u<span style="color:#800080; ">;</span> w<span style="color:#808030; ">[</span>o<span style="color:#808030; ">]</span><span style="color:#808030; ">.</span>t <span style="color:#808030; ">=</span> <span style="color:#008c00; ">1</span> <span style="color:#808030; ">*</span> <span style="color:#800000; font-weight:bold; ">new</span> <span style="color:#797997; ">Date</span><span style="color:#808030; ">(</span><span style="color:#808030; ">)</span><span style="color:#800080; ">;</span>
           s <span style="color:#808030; ">=</span> d<span style="color:#808030; ">.</span>createElement<span style="color:#808030; ">(</span><span style="color:#800000; ">'</span><span style="color:#0000e6; ">script</span><span style="color:#800000; ">'</span><span style="color:#808030; ">)</span><span style="color:#800080; ">;</span> s<span style="color:#808030; ">.</span>async <span style="color:#808030; ">=</span> <span style="color:#008c00; ">1</span><span style="color:#800080; ">;</span> s<span style="color:#808030; ">.</span>id <span style="color:#808030; ">=</span> i<span style="color:#800080; ">;</span> s<span style="color:#808030; ">.</span>src <span style="color:#808030; ">=</span> u<span style="color:#800080; ">;</span>
           p <span style="color:#808030; ">=</span> d<span style="color:#808030; ">.</span>getElementsByTagName<span style="color:#808030; ">(</span><span style="color:#800000; ">'</span><span style="color:#0000e6; ">script</span><span style="color:#800000; ">'</span><span style="color:#808030; ">)</span><span style="color:#808030; ">[</span><span style="color:#008c00; ">0</span><span style="color:#808030; ">]</span><span style="color:#800080; ">;</span> p<span style="color:#808030; ">.</span>parentNode<span style="color:#808030; ">.</span>insertBefore<span style="color:#808030; ">(</span>s<span style="color:#808030; ">,</span> p<span style="color:#808030; ">)</span><span style="color:#800080; ">;</span>
        <span style="color:#800080; ">}</span><span style="color:#808030; ">(</span>window<span style="color:#808030; ">,</span> document<span style="color:#808030; ">,</span> <span style="color:#800000; ">'</span><span style="color:#0000e6; ">//widgets.mango-office.ru/widgets/mango.js</span><span style="color:#800000; ">'</span><span style="color:#808030; ">,</span> <span style="color:#800000; ">'</span><span style="color:#0000e6; ">mango-js</span><span style="color:#800000; ">'</span><span style="color:#808030; ">,</span> <span style="color:#800000; ">'</span><span style="color:#0000e6; ">mgo</span><span style="color:#800000; ">'</span><span style="color:#808030; ">)</span><span style="color:#808030; ">)</span><span style="color:#800080; ">;</span>
        

Последний параметр в последней строке задаёт название для основного объекта API. Название можно поменять, если оно конфликтует с другими объектами на сайте.

Основной объект mgoОсновной объект mgo

После выполнения представленного кода становится доступным объект-функция mgo, который является центральной точной для обращения к API.

Название виджета: calltracking. Объект параметров состоит из следующих полей:

Как использовать объект-функцию?Как использовать объект-функцию?

Использовать его можно тремя способами.

Объявить виджет. Возможные вариантыОбъявить виджет. Возможные варианты

При помощи mgo Вы можете объявить некоторый виджет. Обобщенный пример

mgo({
calltracking: { /* widget params */ }
});

Примеры:
1.1 Простой виджет

mgo({
calltracking: {
id: 12345,
elements: [{selector: '#some-element'}],
}
});

1.2 Подстановка номера в два элемента mgo({
calltracking: {
id: 12345,
elements: [
{selector: '#some-element'},
{selector: '.some-other-element'}
],
}
});

1.3 Ручное форматирование номера mgo({
calltracking: {
id: 12345,
elements: [{selector: '#some-element'}],
formatNumber: function(number) {
// '74951112233' => '7<span>495</span>111-22-33'
return number.substr(0, 1) + '<span>' + number.substr(1, 3) + '</span>' + number.substr(4, 3) + '-' + number.substr(7, 2) + '-' + number.substr(9, 2);
},
}
});

1.4 Ручная обработка номераУстановка атрибута tel:.
mgo({
calltracking: {
id: 12345,
elements: [{selector: '#mango-calltracking'}],
onReady: function(event) {
$('#mango-calltracking').attr('href', 'tel:' + event.number);
},
}
}) ;

При этом html код номера должен быть таким:
<a id="mango-calltracking" href="tel:79990001122">8 (999) 000-11-22</a>

1.5 Добавление кастомного параметра mgo({
calltracking: {
id: 12345,
elements: [{selector: '#some-element'}],
customParam: 'my_user_id=123,my_project_id=456'
}
});

1.6 Добавление региона показа номера mgo({
calltracking: {
id: 12345,
elements: [{selector: '#some-element'}],
region: 'MOW'
}
});

1.7 Изменение текстового номера на сайте mgo({
calltracking: {
id: 12345,
elements: [{numberText: '79990001122'}]
}
});

1.8 Кроссдоменное использование виджета коллтрекинга
mgo({
calltracking: {
id: 12345,
elements: [{selector: '#some-element'}],
domain: 'romasha.ru'
}
});

Будет одинаково работать на всех поддоменах вида romasha.ru, msk.romasha.ru, spb.romasha.ru и т.п.

2. Вызов методов API:
mgo(function(mgo) {
mgo.someMethod();
});

Методы JS APIМетоды JS API

Вы можете использовать следующие методы JS API:

1. getNumber() - выделяет номер ДКТ по запросу. Выделенные номера принадлежат региону по умолчанию, заданному в настройках коллтрекинга.
   function getNumber(options, callback)

Параметры метода:

Параметры объекта передаваемого в callback:

Пример использования объекта IOptions: {
hash?: string; // идентификатор запроса
redirectNumber?: string; // номер на который будет переведён звонок
regionCode?: string; // код региона в ISO формате, например для Татарстана 'TA'
}

Параметры объекта передаваемого в options:

Пример вызова метода mgo.getNumber('test', function(e) {
console.log(e);
});

mgo.getNumber({
hash: 'test',
redirectNumber: '79876543210'
}, function(e) {
console.log(e);
});

Пример ответа

2. getNumberByRegion() - выделяет номер ДКТ по запросу для конкретного региона. Для выделения номера для определенного региона, в настройках виджета должна быть включена услуга Mультирегиональность.
   function getNumberByRegion(regionCode, hash, callback)

Параметры метода:

Пример вызова метода mgo.getNumberByRegion('TA', 'test', function(e) { console.log(e); });

Пример ответа

3. getExistsNumbers() - метод возвращает список номеров, закрепленных за посетителем сайта (сессией) function getExistsNumbers(callback)

Параметры метода:

Пример вызова метода mgo.getExistsNumbers(function(e) { console.log(e); });

Пример ответа [{number: '79158888888'}, {hash: 'test', number: '79158888887'}]

4. postForm() - передача данных из формы на сайте в отчёты коллтрекинга. Этот метод рекомендуется вызывать при отправке формы в событии onsubmit. function postForm(form)

Параметры метода: в качестве параметра принимает объект формы со следующими полями

Пример вызова метода mgo.postForm({name: 'Иван', email: 'ivan@mail.ru'});

Пример формы с полями `