При помощи JavaScript SDK вы можете обращаться к объектам счетчика Roistat, установленного на ваших сайтах, и управлять всеми его функциями, включая получение информации о визите, управление Коллтрекингом, Ловцом лидов, Email-трекингом и т.д.
Обратите внимание:
Внимательно изучите данную страницу перед тем, как использовать JavaScript SDK. Его неправильное использование может нарушить работу Roistat на вашем сайте. Если у вас останутся вопросы, напишите нам, и мы поможем.
- Описание работы JavaScript SDK
- Основные методы
- Дополнительные методы
- Колбэки готовности JavaScript SDK
Описание работы JavaScript SDK¶
Счетчик Roistat добавляет на страницу набор объектов и методов, которые позволяют управлять поведением Roistat и добавлять дополнительную логику в работу модулей.
Для правильной работы JavaScript SDK требуется дождаться его загрузки. Для этого существуют колбэки, которые вызываются по готовности JS API: window.onRoistatModuleLoaded и window.onRoistatAllModulesLoaded.
После загрузки основного модуля на страницу добавляется объект roistat
, который содержит набор методов и переменных, отвечающих за работу счетчика и остальных модулей.
Основные методы¶
При загрузке счетчик добавляет на страницу объект window.roistat
. В нём находятся методы и объекты по управлению всей функциональностью Roistat. По мере загрузки всех модулей, в window.roistat
будут становиться доступными соответствующие объекты.
В таблице ниже приведены методы и атрибуты объекта window.roistat
.
authClientByEmail(email)¶
Присваивает email клиента к текущему визиту, чтобы можно было объединить мультиканальные цепочки.
window.onRoistatModuleLoaded = function () {
window.roistat.authClientByEmail("test@example.com");
};
authClientById(cliendId)¶
Присваивает id клиента к конкретному визиту, чтобы можно было объединить мультиканальные цепочки по нескольким устройствам.
window.onRoistatModuleLoaded = function () {
window.roistat.authClientById("1234567");
};
callTracking¶
Объект с методами и атрибутами Коллтрекинга.
Метод / атрибут | Возвращаемый тип | Описание |
---|---|---|
enabled | int | Флаг, отражающий включен ли коллтрекинг на странице |
phone | string | Подменный номер коллтрекинга |
enabled¶
Флаг, отражающий, включен ли Коллтрекинг на странице.
window.onRoistatAllModulesLoaded = function () {
console.log("Calltracking enabled = " + window.roistat.callTracking.enabled);
};
phone¶
Подменный номер Коллтрекинга.
window.onRoistatAllModulesLoaded = function () {
window.roistat.registerOnCalltrackingPhoneReceivedCallback(function () {
console.log("Calltracking replacement phone recieved: " + window.roistat.callTracking.phone);
});
};
disableCallTracking()¶
Отключает работу Коллтрекинга на странице.
window.onRoistatModuleLoaded = function () {
window.roistat.disableCallTracking();
};
emailtracking¶
Объект с методами и атрибутами Email-трекинга.
Метод / атрибут | Возвращаемый тип | Описание |
---|---|---|
emails | object | массив с соответсвиями подменяемых и подменных email-ов |
enabled | boolean | флаг, определяющий, включен ли Email-трекинг |
loaded | boolean | флаг, определяющий, был ли загружены email-ы с серверва |
refresh() | void | обновить подменные email-ы на страницы |
emails¶
Объект с соответствиями подменяемых и подменных email-ов.
window.onRoistatAllModulesLoaded = function () {
console.log("Email-ы для подмены: " + JSON.stringify(window.roistat.emailtracking.emails));
};
Пример возвращаемого объекта:
{
"email_to_replace1@mail.com": "email_to_replace_with1@mail.com",
"email_to_replace2@mail.com": "email_to_replace_with2@mail.com"
}
enabled¶
Флаг, определяющий, включен ли Email-трекинг.
window.onRoistatAllModulesLoaded = function () {
console.log("Email-трекинг включен: " + window.roistat.emailtracking.enabled);
};
Чтобы выключить Email-трекинг на странице, нужно установить значение до загрузки модуля Email-трекинга:
window.onRoistatModuleLoaded = function() {
window.roistat.emailtracking.enabled = false;
}
loaded¶
Флаг, определяющий, загружены ли подменные email-ы с сервера.
window.onRoistatAllModulesLoaded = function () {
console.log("Email-ы для подмены загружены с сервера: " + window.roistat.emailtracking.loaded);
};
refresh()¶
Обновить подменные email-ы на странице.
window.onRoistatAllModulesLoaded = function () {
window.roistat.emailtracking.refresh();
};
event.send(eventName,[eventFields])¶
Отправляет событие в аналитику.
document.getElementById("button").onclick = function() {
window.roistat.event.send("some_event", {"value": "123"});
};
geo¶
Объект с географическими данными клиента. Позволяет подменять контент на сайте в зависимости от города, региона и страны посетителя.
Метод / атрибут | Возвращаемый тип | Описание |
---|---|---|
city | string | город посетителя |
region | string | регион посетителя |
country | string | страна посетителя |
city¶
Город клиента
window.onRoistatAllModulesLoaded = function () {
console.log("Город посетителя: " + window.roistat.geo.city);
};
region¶
Регион клиента
window.onRoistatAllModulesLoaded = function () {
console.log("Регион посетителя: " + window.roistat.geo.region);
};
country¶
Страна клиента
window.onRoistatAllModulesLoaded = function () {
console.log("Страна посетителя: " + window.roistat.geo.country);
};
getSource()¶
Возвращает рекламный канал визита. Если маркера нет, то возвращает null.
window.onRoistatAllModulesLoaded = function () {
window.roistat.registerOnVisitProcessedCallback(function() {
console.log("Маркер визита: " + window.roistat.getSource());
});
};
getVisit()¶
Возращает номер визита.
window.onRoistatAllModulesLoaded = function () {
window.roistat.registerOnVisitProcessedCallback(function() {
console.log("Установлен номер визита: " + window.roistat.getVisit());
});
};
leadHunter¶
Объект с методами и атрибутам для работы с Ловцом лидов.
Метод / атрибут | Возвращаемый тип | Описание |
---|---|---|
additionalNotifyEmail | string | Дополнительный email для оповещения о лиде |
form.autoShowTime | int | Количество секунд, через которое нужно автоматически показать форму Ловца лидов |
form.buttonText | string | Текст на кнопке Ловца лидов |
form.contactLabel | string | Текст в поле с номером телефона |
form.isNameRequired | boolean | Флаг, показывающий, является ли поле с именем обязательным для заполнения |
form.isNeedExplicitAgreement | boolean | Флаг, показывающий, является ли согласие на обработку персональных данных обязательным |
form.nameLabel | string | Текст в поле с именем |
form.subTitle | string | Подзаголовок формы Ловца лидов |
form.thankYouText | string | Текст после отправки формы |
form.title | string | Заголовок формы Ловца лидов |
isEnabled | boolean | Флаг, показывающий, включен ли Ловец лидов |
localization.translateToEnglish() | void | Функция для перевода формы Ловца лидов на английский язык |
localization.translateToRussian() | void | Функция для перевода формы Ловца лидов на русский язык |
onAfterAppear | function() | Колбэк, который вызывается перед появлением формы Ловца лидов |
onAfterSubmit | function(lead) | Колбэк, который вызывается перед отправкой формы Ловца лидов |
onBeforeAppear | function() | Колбэк, который вызывается после появления формы Ловца лидов |
onBeforeSubmit | function(lead) | Колбэк, который вызывается после отправки формы Ловца лидов |
При настройке текстов Ловца лидов с помощью JavaScript SDK можно использовать HTML-теги – например, для переноса строки:
window.roistat.leadHunter.form.subTitle = "JavaScript SDK Roistat | Руководство пользователя";
additionalNotifyEmail¶
Дополнительный email для оповщения о лиде. Необходимо установить до отправки формы Лоцва лидов.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeSubmit = function(lead) {
window.roistat.leadHunter.additionalNotifyEmail = "myemail@roistat.com";
}
};
form.autoShowTime¶
Количество секунд, через которое нужно автоматически показать форму Ловца лидов.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.form.autoShowTime = 10; //Показывать ловец лидов через 10 секунд
};
form.buttonText¶
Текст на кнопке Ловца лидов.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
window.roistat.leadHunter.form.buttonText = "Текст на кнопке";
}
};
form.contactLabel¶
Текст в поле с номером телефона.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
window.roistat.leadHunter.form.contactLabel = "Введите номер телефона";
}
};
form.isNameRequired¶
Флаг, определяющий, является ли поле с именем обязательным для заполнения.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
window.roistat.leadHunter.form.isNameRequired = true;
}
};
form.isNeedExplicitAgreement¶
Флаг, определяющий, является ли согласие на обработку персональных данных обязательным.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
window.roistat.leadHunter.form.isNeedExplicitAgreement = true;
}
};
form.nameLabel¶
Текст в поле с именем.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
window.roistat.leadHunter.form.nameLabel = "Введите ваше имя";
}
};
form.subTitle¶
Подзаголовок формы Ловца лидов.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
window.roistat.leadHunter.form.subTitle = "Подзаголовок";
}
};
form.thankYouText¶
Текст после отправки формы.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
window.roistat.leadHunter.form.thankYouText = "Спасибо, скоро мы с вами свяжемся";
}
};
form.title¶
Заголовок формы Ловца лидов.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
window.roistat.leadHunter.form.title = "Заголовок";
}
};
isEnabled¶
Флаг, определяющий, включен ли Ловец лидов.
window.onRoistatModuleLoaded = function () {
window.roistat.leadHunter.isEnabled = false; //отключить ловец лидов на странице
};
localization.translateToEnglish()¶
Функция для перевода формы Ловца лидов на английский язык.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.localization.translateToEnglish();
};
localization.translateToRussian()¶
Функция для перевода формы Ловца лидов на русский язык.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.localization.translateToRussian();
};
onAfterAppear¶
Колбэк, который вызывается перед появлением формы Ловца лидов.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onAfterAppear = function() {
console.log("Форма ловца лидов показана пользователю");
}
};
onAfterSubmit¶
Колбэк, который вызывается перед отправкой формы Ловца лидов. В качестве атрибута функции используется объект lead, в котором находятся методы и атрибуты лида.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onAfterSubmit = function(lead) {
console.log("Форма ловца лидов отправлена");
}
};
onBeforeAppear¶
Колбэк, который вызывается после появления формы Ловца лидов. Принимает параметр eventType, в котором указывается событие, по которому показалась форма Ловца Лидов. Возможные значения eventType: click, auto, exit
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeAppear = function(eventType) {
console.log("Сейчас будет показана форма ловца лидов по событию "+eventType);
}
};
onBeforeSubmit¶
Колбэк, который вызывается после отправки формы Ловца лидов. В качестве атрибута функции используется объект lead, в котором находятся методы и атрибуты лида.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.onBeforeSubmit = function(lead) {
lead.isNeedCallback = 0; // Не совершать обратный звонок
lead.callbackPhone = 79999999999 //Номер менеджера, куда совершить звонок
console.log("Дополнительные поля лида: " + lead.fields );
console.log("Имя лида: " + lead.name );
console.log("Телефон лида: " + lead.phone );
}
};
multiwidget¶
Объект с настройками Мультивиджета.
Метод / атрибут | Возвращаемый тип | Описание |
---|---|---|
fb | object | Объект с настройками кнопки Мультивиджета Facebook |
isEnabled | boolean | Флаг, определяющий, включен ли Мультивиджет |
isVisible | boolean | Флаг, определяющий, видна ли кнопка Мультивиджета |
telegram | object | Объект с настройками кнопки Мультивиджета Telegram |
vk | object | Объект с настройками кнопки Мультивиджета VK |
fb¶
Объект с настройками кнопки Мультивиджета Facebook.
window.onRoistatAllModulesLoaded = function () {
console.log("Кнопка FB включена: " + window.roistat.multiwidget.fb.isEnabled);
console.log("Ссылка FB: " + window.roistat.multiwidget.fb.link);
};
Поменять ссылку кнопки FB:
window.onRoistatModuleLoaded = function () {
window.roistat.multiwidget.fb.link = "https://newlink.com";
};
isEnabled¶
Флаг, определяющий, включен ли Мультивиджет.
window.onRoistatModuleLoaded = function () {
window.roistat.multiwidget.isEnabled = false; //Выключить Мультивиджет на странице
};
isVisible¶
Флаг, определяющий, видна ли кнопка Мультивиджета.
window.onRoistatModuleLoaded = function () {
window.roistat.multiwidget.isVisible = false; //Скрыть кнопку Мультивиджета на странице
};
При использовании данного флага можно вызвать кнопку Мультивиджета на странице с помощью метода window.roistatMultiwidgetShow().
telegram¶
Объект с настройками кнопки Мультивиджета Telegram.
window.onRoistatAllModulesLoaded = function () {
console.log("Кнопка Telegram включена: " + window.roistat.multiwidget.telegram.isEnabled);
console.log("Ссылка Telegram: " + window.roistat.multiwidget.telegram.link);
};
Поменять ссылку кнопки Telegram:
window.onRoistatModuleLoaded = function () {
window.roistat.multiwidget.telegram.link = "https://newlink.com";
};
vk¶
Объект с настройками кнопки Мультивиджета VK.
window.onRoistatAllModulesLoaded = function () {
console.log("Кнопка VK включена: " + window.roistat.multiwidget.vk.isEnabled);
console.log("Ссылка VK: " + window.roistat.multiwidget.vk.link);
};
Поменять ссылку кнопки VK:
window.onRoistatModuleLoaded = function () {
window.roistat.multiwidget.vk.link = "https://newlink.com";
};
onlineChat¶
Объект с методами и атрибутами Онлайн-чата.
isAvailableForCurrentUserAgent¶
Флаг, определяющий, доступен ли онлайн-чат для текущего user-agent.
window.onRoistatAllModulesLoaded = function () {
console.log("Онлайн чат досутпен: " + window.roistat.onlineChat.isAvailableForCurrentUserAgent);
};
isEnabled¶
Флаг, определяющий, включен ли онлайн-чат.
window.onRoistatModuleLoaded = function () {
window.roistat.onlineChat.isEnabled = false; //Выключить онлайн-чат на странице
};
localization.translateToEnglish()¶
Перевести онлайн-чат на английский язык.
window.onRoistatAllModulesLoaded = function () {
window.roistat.onlineChat.localization.translateToEnglish();
};
localization.translateToRussian()¶
Перевести онлайн-чат на русский язык.
window.onRoistatAllModulesLoaded = function () {
window.roistat.onlineChat.localization.translateToRussian();
};
localization.translate()¶
Перевести онлайн-чат на язык, добавленный в настройках чата. Необходимо передавать название языка в виде строки.
window.onRoistatAllModulesLoaded = function () {
window.roistat.onlineChat.localization.translate("Испанский");
};
page.params.roistat_param1..5¶
Атрибуты, в которых хранятся значения параметров roistat_param текущего визита.
window.onRoistatModuleLoaded = function () {
console.log("roistat_param1 = " + window.roistat.roistat_param1);
console.log("roistat_param2 = " + window.roistat.roistat_param2);
console.log("roistat_param3 = " + window.roistat.roistat_param3);
console.log("roistat_param4 = " + window.roistat.roistat_param4);
console.log("roistat_param5 = " + window.roistat.roistat_param5);
};
setRoistatParams(param1, param2, param3, param4, param5)¶
Установить дополнительные параметры roistat_param1-5, чтобы затем строить отчеты по ним.
window.onRoistatAllModulesLoaded = function () {
window.roistat.registerOnVisitProcessedCallback(function () {
window.roistat.setRoistatParams(param1, param2, param3, param4, param5);
});
};
Можно пропустить любой из параметров, используя null:
window.onRoistatAllModulesLoaded = function () {
window.roistat.registerOnVisitProcessedCallback(function () {
window.roistat.setRoistatParams(param1, param2, null, param4, param5);
});
};
Обратите внимание:
Измененные данные появятся в проекте при следующем обновлении данных аналитики.
Например, нужно присвоить визиту три дополнительных параметра:
- День недели: roistat_param1 = monday
- Пол клиента: roistat_param2 = female
- Возраст клиента: roistat_param3 = 27
Тогда запрос будет выглядеть следующим образом:
window.onRoistatAllModulesLoaded = function () {
window.roistat.registerOnVisitProcessedCallback(function () {
window.roistat.setRoistatParams(monday, female, 27);
});
};
setVisit(visitId)¶
Вручную задать номер визита.
window.onRoistatModuleLoaded = function () {
window.roistat.setVisit(123456);
};
Дополнительные методы¶
Roistat добавляет набор методов и атрибутов в объект window, которые позволяют управлять функциями Roistat на странице.
window.roistat.setCallTrackingManualMode()¶
Переключает Коллтрекинг в ручной режим. В этом режиме номера на странице не будут подменяться автоматически.
window.onRoistatModuleLoaded = function () {
window.roistat.setCallTrackingManualMode();
};
window.roistatCallTrackingRefresh()¶
Запрашивает номера для подмены Коллтрекинга.
window.onRoistatModuleLoaded = function () {
window.roistat.setCallTrackingManualMode(); //Включаем ручной режим коллтрекинга
document.getElementById("button").onclick = function() {
window.roistatCallTrackingRefresh(); //Получаем и обновляем номера
};
};
window.roistatLeadHunterShow()¶
Показывает форму Ловца лидов на странице.
window.onRoistatAllModulesLoaded = function () {
document.getElementById("button").onclick = function() {
window.roistatLeadHunterShow();
};
};
window.roistatMetrikaCounterId¶
ID счетчика Яндекс.Метрики, который прописан в интеграции Roistat.
window.onRoistatModuleLoaded = function () {
console.log("ID cчетчика Метрики из интеграции Roistat: " + window.roistatMetrikaCounterId);
};
window.roistatMultiwidgetShow¶
Вызывает кнопку Мультивиджета.
window.onRoistatAllModulesLoaded = function () {
document.getElementById("button").onclick = function() {
window.roistatMultiwidgetShow();
};
};
window.roistatOnlineChatShow()¶
Показывает окно онлайн-чата.
window.onRoistatAllModulesLoaded = function () {
document.getElementById("button").onclick = function() {
window.roistatOnlineChatShow();
};
};
window.roistatPromoCodeRefresh()¶
Обновляет значение промокода Roistat в элементе .roistat-promo.
window.onRoistatAllModulesLoaded = function () {
document.getElementById("button").onclick = function() {
window.roistatPromoCodeRefresh();
};
};
window.registerOnCalltrackingPhoneReceivedCallback¶
Колбэк, который вызывается после того, как от сервера получены телефоны для подмены на странице.
window.onRoistatAllModulesLoaded = function () {
window.roistat.registerOnCalltrackingPhoneReceivedCallback(function() {
console.log("Получен номер для подмены: " + window.roistat.callTracking.phone);
});
};
Колбэки готовности JavaScript SDK¶
Колбэки используются для выполнения функций после загрузки основного или всех модулей счетчика.
Колбэк | Описание |
---|---|
onRoistatModuleLoaded | Колбэк для работы с визитами и включения/выключения дополнительных возможностей |
onRoistatAllModulesLoaded | Колбэк для доступа к функциональности дополнительных возможностей – Коллтрекинга, Email-трекинга, А/Б тестов, Событий |
onRoistatModuleLoaded¶
Вызывается после загрузки основного модуля, до загрузки дополнительных модулей инструментов – Коллтрекинга, Email-трекинга, А/Б тестов, Событий.
Используйте этот колбэк, чтобы повлиять на поведение дополнительных инструментов – например, отключить Коллтрекинг или Email-трекинг на странице.
Внутри этого колбэка специфичные дейcтвия для инструментов недоступны (т.к. они ещё не загрузились). Для управления возможностями дополнительных инструментов используйте колбэк window.onRoistatAllModulesLoaded
.
window.onRoistatModuleLoaded = function () {
window.roistat.emailtracking.enabled = false; // Отключить Email-трекинг
window.roistat.setCallTrackingManualMode(); // Включить ручной режим для подмены номеров Коллтрекинга
};
onRoistatAllModulesLoaded¶
Вызывается после того, как модули инструментов зарегистрировали свои настройки и методы, с которыми можно взаимодействовать.
В этом колбэке доступны все возможности всех инструментов счётчика. После загрузки модулей инструменты начинают выполнять свою работу: подмену телефонов и email-ов, отправку и получение данных аналитики, загрузку чатов и т.п.
Колбэки, которые вызываются после onRoistatAllModulesLoaded
:
- onAfterAppear – вызывается перед появлением формы Ловца лидов;
- onAfterSubmit – вызывается перед отправкой формы Ловца лидов;
- onBeforeAppear – вызывается после появления формы Ловца лидов;
- onBeforeSubmit – вызывается после отправки формы Ловца лидов;
- window.registerOnCalltrackingPhoneReceivedCallback – вызывается после того, как от сервера получены телефоны для подмены на странице;
- window.roistat.registerOnVisitProcessedCallback – вызывается при работе с визитами (методы getSource(), getVisit(), setRoistatParams()).
Вызов колбэка onRoistatAllModulesLoaded необязательно означает полную загрузку данных на сайте. Например, сразу после загрузки модуля Коллтрекинга может быть неизвестен номер телефона, так как от сервера еще не получены номера для подмены на странице. Как только номера получены, вызывается колбэк registerOnCalltrackingPhoneReceivedCallback, и номер передается на сайт.
Отключить или включить инструмент на этом этапе уже поздно – для включения/выключения инструментов используйте колбэк window.onRoistatModuleLoaded
.
window.onRoistatAllModulesLoaded = function () {
window.roistat.leadHunter.form.autoShowTime = 50; //Показывать Ловец лидов через 50 секунд
window.roistatOnlineChatShow(); //Открыть окно чата
};