Передача параметров аналитики без использования виджета

Данная статья предназначена для специалистов, обладающих практическим опытом настройки виджетов и передачи параметров аналитики. Материал содержит технические детали и требует понимания принципов интеграции с аналитическими системами.

При отсутствии соответствующего опыта рекомендуем обратиться к квалифицированному подрядчику или интегратору. Это обеспечит стабильную работу виджета и корректную передачу данных аналитики.

Для того, чтобы параметры аналитики были верно отработаны, вам необходимо в Настройках коннектора приложения OLChat настроить Бот-помощник, а также Виджет на сайт.

Настройка кнопки WhatsApp

Кроме стандартного виджета от Битрикс24, вы можете установить на сайт свою кнопку WhatsApp, зашить в неё приветственное сообщение и параметр для передачи идентификатора любого сервиса аналитики.

Внешний вид кнопки может быть, например, таким:

В приветственном сообщении укажите параметр {visit_id}, например, в таком виде: Обязательно отправьте это сообщение и дождитесь ответа! Ваш номер: {visit_id}

Код кнопки WhatsApp из приведённого выше примера может выглядеть следующим образом:

<a class="whatsapp_overplan" href="https://api.whatsapp.com/send?phone=79000000000&text=Обязательно отправьте это сообщение и дождитесь ответа! Ваш номер:{visit_id}" rel="noopener noreferrer">
  <div class="whatsapp-button"><i class="fa fa-whatsapp"></i></div>
</a>

.whatsapp-button {
    position: fixed;
    right: 13px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: #25D366; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    height: 55px; /*высота кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 35px; /*размер иконки*/
    z-index: 9999;
}
.whatsapp-button a {
    color: #fff;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.whatsapp-button:after{
    animation-delay: .5s;
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

Настройка сайта

В описанном ниже примере приведён модифицированный код для подстановки в параметр {visit_id} значения идентификатора сервиса аналитики Calltouch.

Модифицируйте код на сайте следующим образом:

<script>

	const wabutton = setInterval(() => {
        const l = document.querySelector('.whatsapp_overplan');
        if (l !== null) {
            const sessionId = window.ct('calltracking_params', 'mod_id')[0].sessionId;
            if (sessionId) {
                clearInterval(wabutton);
                l.href = l.href.replace(/\{visit_id\}/, sessionId);
            }
        }
    }, 250);

/* КОД КНОПКИ WHATSAPP */

/* КОД АНАЛИТИКИ CALLTOUCH */

</script>

После перехода по кнопке скрипт отработает и подставит в параметр {visit_id} код сервиса аналитики: