Widget.js для сайта
Оглавление:
Код платформы
Код платформы UX Feedback устанавливается в html коде сайта, после открывающего тега <body> (или “Pageviews”, “DOM Ready” или “Windows Loaded” в Google Tag Manager) на всех страницах, где планируется показывать опрос.
Стандартный код платформы имеет вид:
<script>
(function(w, d, u, h, s) {
w._uxsSettings = {id: 'XXXXXXXXXXXXXXXXXXXXXXXX'};
h = d.getElementsByTagName('head')[0];
s = d.createElement('script');
s.async = 1;
s.src = u;
h.appendChild(s);
})(window, document, 'https://cdn.uxfeedback.ru/widget.js');
</script>
Где: XXXXXXXXXXXXXXXXXXXXXXXX - id вашего аккаунта.
Важно: отправление событий и параметров, обязательно должно происходить после загрузки кода платформы
Как понять, что код платформы загрузился и готов к работе.
В момент когда код платформы загрузился и готов к работе (готов принимать и обрабатывать события и пользовательские параметров) происходит отправка пользовательского браузерного события uxsReady. После получения этого события можно использовать методы класса UXS.
Чтобы вызвать какой-то метод после загрузки кода, достаточно добавить следующий код:
document.addEventListener('uxsReady', callback)Где:
callback- это функция или метод, которая должна быть выполнена непосредственно только после загрузки кода. К примеру, вот так будет выглядеть вызов события: document.addEventListener('uxsReady', () => UXS.sendEvent('eventName')).
Важно: Если установить подписку уже после загрузки кода, данное событие не вызовется и callback не исполнится.
События
События UX Feedback помогают настраивать показ форм для пользователей, которых мы не можем отследить с помощью внутренних “таргетингов”.
Важно: перед отправлением события, обязательно должен успеть загрузиться код платформы.
Вызвать событие
Чтобы вызвать форму UX Feedback с помощью события, достаточно выполнить JS код на сайте:
<script>
UXS.sendEvent("eventName", { attributeName: "attributeValue", ... });
</script>Где:
eventName - название события, которое указывается произвольно. Рекомендуем указывать события в соответствии с действием пользователя.
attributeName - название атрибута события, которое указывается произвольно. Рекомендуем указывать события в соответствии с действием пользователя.
Название события и атрибут прописывается в личном кабинете, в настройках “таргетинга” для соответствующей кампании опроса.
Обратите внимание:
Если опрос необходимо показывать через определенное количество срабатывания событий, или через N секунд после событий, рекомендуем использовать настройки в личном кабинете, а не закладывать логику в само событие.
Код события с задержкой
Для событий, которые должны сработать сразу при загрузке страницы (вместе с загрузкой кода платформы), рекомендуем добавить задержку в коде события в 3 секунды с помощью функции setTimeout, чтобы “Код платформы” успел загрузиться на сайте.
<script>
setTimeout(function () {
UXS.sendEvent('eventName'), { attributeName: "attributeValue", ... });
}, 1000 * 3);
</script>Где:
eventName - название события, которое указывается произвольно.
attributeName - название атрибута события, которое указывается произвольно.
Данный код проверяет успел ли загрузится код платформы. Если код был успешно загружен, то происходит вызов события. Если же код еще не был загружен, тогда осуществляется подписка на событие загрузки кода, и после загрузки кода, событие будет отправлено автоматически.
Параметры
Введение.
Добавление параметров позволяет увидеть дополнительные данные пользователей, которые оставили оценки и комментарии, например “User ID”, “Город/регион”, “Тип пользователя” и многое другое.
Способы отправления параметров.
Добавить параметры можно с помощью двух способов:
Важно: перед отправлением параметров, обязательно должен успеть загрузиться код платформы.
1. Отправлять параметры в JS коде платформы UX Feedback.
В таком случае параметры будут отправляться на каждой странице, где установлен код платформы UX Feedback. Этот способ удобен для отправления общих данных о пользователе, которые могут быть полезны на каждой странице сайта, например, “User_ID”, “Регион”, “Город”, “Статусы подписки” и другие.
2. Отправлять параметры отдельным JS кодом.
В таком случае параметры будут отправляться только на тех страницах, где будет срабатывать JS скрипт. Это способ удобен для отправления параметров, которые могут определяться только на определенных типах страниц, например “Категория товаров” на страницах с товарами, “Категории контента” на страницах блога, “Выбранные способ доставки или оплаты”, на страницах оформления заказа или ““Выбранный способ авторизации”.
Подробнее о двух методах:
1. Отправлять параметры в JS коде платформы UX Feedback.
Чтобы настроить отправление параметров через код платформы, необходимо его изменить.
Изначальный код платформы до добавления параметров имеет вид:
<script>
(function(w, d, u, h, s) {
w._uxsSettings = {id: 'XXXXXXXXXXXXXXXXXXXXXXX'};
h = d.getElementsByTagName('head')[0];
s = d.createElement('script');
s.async = 1;
s.src = u;
h.appendChild(s);
})(window, document, 'https://cdn.uxfeedback.ru/widget.js');
</script>Где:XXXXXXXXXXXXXXXXXXXXXXX - id вашего аккаунта в UX Feedback.
Чтобы отправить параметры в UX Feedback, необходимо добавить объект properties . Код платформы примет вид:
<script>
(function(w, d, u, h, s) {
w._uxsSettings = {
id: 'XXXXXXXXXXXXXXXXXXXXXXX',
properties: {
User_id: "Значение User_id",
City: "Значение City"
}
};
h = d.getElementsByTagName('head')[0];
s = d.createElement('script');
s.async = 1;
s.src = u;
h.appendChild(s);
})(window, document, 'https://cdn.uxfeedback.ru/widget.js');
</script>Где:
XXXXXXXXXXXXXXXXXXXXXXX - id вашего аккаунта в UX Feedback.User_id: "Значение User_id" - пример названия параметра и его значение.City: "Значение City" - пример названия следующего параметра и его значение.
В Google Tag Manager.
Для добавления параметров в Google Tag Manager достаточно указать название и значение переменных с помощью двойных фигурных скобочек, например:
В Яндекс Тег Менеджер.
Для добавления параметров в Яндекс Тег Менеджер достаточно указать название и значение переменных с помощью двойных фигурных скобочек, например:
2. Отправлять параметры отдельным JS кодом.
Отправление параметров.
Чтобы отправить параметры в UX Feedback отдельным JS кодом, достаточно выполнить следующий код после загрузки кода платформы.
<script>
UXS.addProperties({
User_id: "Значение User_id",
City: "Значение City"
})
</script>Где:
User_id: "Значение User_id" - пример названия параметра и его значение.City: "Значение City" - пример названия следующего параметра и его значение.
Отправление параметров с задержкой.
Если планируется отправить параметры в момент загрузки страницы, рекомендуем следующий код:
<script>
if (!window.UXS) {
document.addEventListener('uxsReady', function () {
UXS.addProperties({
User_id: "Значение User_id",
City: "Значение City"
});
})
} else {
UXS.addProperties({
User_id: "Значение User_id",
City: "Значение City"
});
}
</script>Где:
User_id: "Значение User_id" - пример названия параметра и его значение.City: "Значение City" - пример названия следующего параметра и его значение.
Данный код проверяет успел ли загрузится код платформы. Если код был успешно загружен, то происходит отправка параметров. Если же код еще не был загружен, тогда осуществляется подписка на событие загрузки кода, и после загрузки кода, параметры будут отправлены автоматически.
3. Отправлять параметр вместе с событием.
Если вам необходимо отправить параметр вместе с событием, вы можете использовать следующий совмещенный код:
<script>
UXS.sendEvent('eventName'),
UXS.addProperties({
Properties_1: "Значение Properties_1",
Properties_2: "Значение Properties_2"
})
</script>Где:
eventName - название события, которое указывается произвольно.
Properties_1 и Properties_2 - названия параметров.
Ограничений по количеству параметров нет