Пройдите простое обучение по настройке коллтрекинга.

JavaScript API. Основные случаи использования

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

Рассмотрим наиболее типичные случаи использования JS API.


В шапке сайта реализована возможность выбирать город

Постановка задачи: вы хотите при смене города пользователю показывать новый подменный номер из выбранного региона.

Решение: используйте метод getNumberRegion() с указанием выбранного города:

а) добавьте на сайт код виджета:
<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
    mgo({calltracking: {id: 00000}});
</script>
Не забудьте заменить 00000 на номер вашего виджета.

б) вставьте тег в код страницы, где должен размещаться номер телефона:
<span class="mgo-number"></span>

в) для получения номера телефона в нужном регионе разместите следующий скрипт после кода виджета:
<script>
    mgo(function(mgo) {
        // Запрашиваем номер для региона Санкт-Петербург
        mgo.getNumberByRegion('SPE', '', function(result) {
            // Вставляем номер во все теги с классом mgo-number
            document.querySelectorAll('.mgo-number').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
    });
</script>
Здесь SPE означает ISO код региона РФ. Замените его на код региона, который вам нужен. Полный список кодов регионов можно получить здесь (использовать без префикса RU).


В шапке сайта указано два контактных номера телефона для разных городов

Постановка задачи: допустим, вы хотите в шапке сайта видеть один номер для филиала компании в Москве, а другой для филиала в Санкт-Петербурге. Требуется подменять оба номера на странице сайта, при этом статистика по звонкам на подменные номера должна собираться в рамках одного виджета.

Решение этой задачи зависит от схемы обработки звонков на стороне владельца сайта.

Решение 1: если звонки на оба номера обрабатывают одни и те же сотрудники по одной схеме распределения звонков.
а) добавьте на сайт код виджета:
<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
    mgo({calltracking: {id: 00000}});
</script>
Не забудьте заменить 00000 на номер вашего виджета.

б) вставьте теги в код страницы, где должны размещаться номера телефонов. Первый тег для одного региона, второй для другого:
<span class="mgo-number-1"></span>
<span class="mgo-number-2"></span>

в) для получения номеров телефонов в нужных регионах, разместите следующий скрипт после кода виджета:
<script>
    mgo(function(mgo) {
        // Запрашиваем номер для региона Москва
        mgo.getNumberByRegion('MOW', '', function(result) {
            document.querySelectorAll('.mgo-number-1').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
        // Запрашиваем номер для региона Санкт-Петербург
        mgo.getNumberByRegion('SPE', '', function(result) {
            document.querySelectorAll('.mgo-number-2').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
    });
</script>
Здесь MOW и SPE означают ISO коды регионов РФ. Замените их на коды регионов, которые вам нужны. Полный список кодов регионов можно получить здесь (использовать без префикса RU).

Решение 2: если звонки на номера обрабатывают разные группы сотрудников и распределение звонков происходит по схемам распределения регионов, настроенных в коллтрекинге в разделе "Настроить прием звонков для регионов", то выполните пункты а) - в) из решения 1. Никаких дополнительных настроек делать не нужно. 

Решение 3: если звонки на номера обрабатывают разные группы сотрудников и распределение звонков происходит по разным специальным алгоритмам, то необходима доработка на стороне владельца сайта. Помимо выделения новых номеров, вам потребуется обеспечить правильную маршрутиризацию звонков с подменных номеров.

Используйте метод ВАТС API Уведомление о вызове. В тот момент, когда вызов поступает в вашу ВАТС, на стороне коллтрекинга система получает ваш URL с параметрами и отправляет запрос в вашу систему. Одним из параметров этого запроса является секция dkt number - это секция коллтрекинга. Поле number – это подменный номер коллтрекинга, на который поступил звонок. Необходимо обработать полученное уведомление о вызове, определить и запомнить, к какому филиалу относится данный подменный номер и затем, выполнив команду route API ВАТС (маршрутизация звонка), перевести звонок на нужный филиал.


Подмена номеров в динамически подгружаемых блоках сайта

Постановка задачи: используя JS API, вы можете подменять номера телефонов в динамически подгружаемых блоках сайта. К таким блокам мы относим любую изначально скрытую от пользователя информацию, которая появляется на странице сайта в результате каких-то действий пользователя, например, при клике на кнопку или ссылку.

Решение: используйте метод getNumber(), результат которого можно вставить в любое место на сайте.
а) добавьте на сайт код виджета:
<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
    mgo({calltracking: {id: 00000}});
</script>
Не забудьте заменить 00000 на номер вашего виджета.

б) вставьте следующий тег там, где требуется разместить номер телефона:
<span class="mgo-number"></span>

в) для получения номера телефона, выполните следующий код после того, как сгенерируются динамические блоки на сайте:
<script>
    mgo(function(mgo) {
        // Запрашиваем номер
        mgo.getNumber('', function(result) {
            // Вставляем номер телефона во все теги с классом mgo-number
            document.querySelectorAll('.mgo-number').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
    });
</script>


Сайт - доска объявлений

Постановка задачи: частным примером использования подмены номеров в динамически подгружаемых блоках сайта является доска объявлений. Каждое объявление на таком сайте, как правило, содержит скрытый номер телефона и, например, кнопку "Показать номер", при клике на которую пользователю отображается уникальный номер. В момент поступления звонка по объявлению, на стороне сайта должна быть выполнена переадресация звонка на автора объявления. Помимо этого, интересно собрать статистику по количеству звонков по каждому объявлению.

Решение: для каждого объявления при показе номера используйте метод getNumber() с параметрами hash и redirectNumber. В первом параметре передайте номер объявления, а во втором - номер для переадресации вызова:

а) добавьте на сайт код виджета:
<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
    mgo({calltracking: {id: 00000}});
</script>
Не забудьте заменить 00000 на номер вашего виджета.

б) вставьте следующий тег там, где требуется разместить номер телефона для объявления:
<span class="mgo-number"></span>

в) для получения номера телефона по нажатию на кнопку "Показать номер", выполните следующий код:
<script>
    mgo(function(mgo) {
        // Параметры для получения номера
        var options = {
            hash: '11111', // идентификатор объявления
            redirectNumber: '79261112233', // номер для переадресации звонка
        };
        // Запрашиваем номер
        mgo.getNumber(options, function(result) {
            // Вставляем номер телефона во все теги с классом mgo-number
            document.querySelectorAll('.mgo-number').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
    });
</script>
В коде выше замените '11111' на идентификатор вашего объявления или товара, '79261112233' - на номер автора объявления для переадресации на него.
Также вместо номера '79261112233' вы можете указать sip-линию для переадресации вызова, например 'sip:line123@sip.mangote.com'.

г) выгрузить статистику звонков по объявлениям вы можете в Журнале звонков в формате CSV.

Сайт - франчайзи или сетевые компании

Постановка задачи: у вас несколько филиалов, франчайзи или вы сетевая компания и вам нужно на одной странице отображать номера для разных филиалов с различными схемами обработки вызовов. Кроме этого, вам интересно собрать статистику по количеству звонков по филиалу.

Решение: для каждого филиала при показе номера используйте метод getNumber() с параметрами hash и redirectNumber. В первом параметре передайте строковой код филиала, а во втором - номер филиала для переадресации вызова.

а) добавьте на сайт код виджета:
<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
    mgo({calltracking: {id: 00000}});
</script>
Не забудьте заменить 00000 на номер вашего виджета.

б) для кадого филиала вставьте следующие теги там, где требуется разместить номер телефона (в нашем примере используется два филиала: на Лубянке и на Китай-городе):
<span class="office-lubyаnka-number"></span>
<span class="office-kitaygorod-number"></span>

в) для получения номера телефона для филиалов, выполните следующий код:
<script>
    mgo(function(mgo) {
        // Запрашиваем номер для первого филиала
        var options1 = {
            hash: 'lubyаnka',              // код филиала
            redirectNumber: '79261112233', // номер филиала
        };
        mgo.getNumber(options1, function(result) {
            // Вставляем номер телефона первого филиала
            document.querySelectorAll('.office-lubyаnka-number').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });

        // Запрашиваем номер для второго филиала
        var options2 = {
            hash: '
kitaygorod',            // код филиала
            redirectNumber: '79264445566', // номер филиала
        };
        mgo.getNumber(options2, function(result) {
            // Вставляем номер телефона второго филиала
            document.querySelectorAll('.office-
kitaygorod-number').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
    });
</script>

Вместо номера '79261112233' вы можете указать sip-линию для переадресации вызова, например 'sip:line123@sip.mangote.com'

г) выгрузить статистику звонков по филиалам вы можете в Журнале звонков в формате CSV.


Заказать звонок

Выберите интересующий вас вопрос:

или

Позвонить прямо с сайта

Позвонить

Хотите себе такой же виджет? Узнайте, как подключить!

Отправляя заявку, вы даете согласие с Политикой обработки персональных данных