Как настроить события метрики в онлайн-чате

События в виджете

Код интеграции Яндекс Метрики

(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
   []).push(arguments)};
       m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)
   [0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym")
       ym(XXXXXX, "init", {
           id:XXXXXX,
           clickmap:true,
           trackLinks:true,
           accurateTrackBounce:true,
           ut:"noindex"
       });

Код интеграции Google Analytics

<script async 
src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID">     </script>
   <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() { dataLayer.push(arguments); }
       gtag('js', new Date());

       gtag('config', 'MEASUREMENT_ID');
   </script>

Также нужно добавить listener для записи событий в свой JS код

Пример открытия виджета

document.addEventListener('teletype.opened', function() {
     ym(XXXXXX,'reachGoal','teletype.opened');
     gtag('event', 'teletype_opened');
 });

Закрытие виджета

document.addEventListener('teletype.closed', function() {
      ym(XXXXXX,'reachGoal','teletype.closed');
      gtag('event', 'teletype_closed');
    });

Диалог Закрыт оператором

document.addEventListener('teletype.dialogClosed', function(data) {
      ym(XXXXXX,'reachGoal','teletype.dialogClosed');
      gtag('event', 'teletype_dialogClosed')
    });

Диалог оценен клиентом

    document.addEventListener('teletype.dialogRated', function(data) {
      ym(XXXXXX,'reachGoal','teletype.dialogRated');
      gtag('event', 'teletype_dialogRated');
    });

Диалог начат

document.addEventListener('teletype.dialogStarted', function(data) {
      ym(XXXXXX,'reachGoal','teletype.dialogStarted');
      gtag('event', 'teletype_dialogStarted');
    });

Сообщение отправлено

document.addEventListener('teletype.messageSent', function(data) {
      ym(XXXXXX,'reachGoal','teletype.messageSent');
      gtag('event', 'teletype_messageSent');
    });

Сообщение получено

document.addEventListener('teletype.messageReceived', function(data) {
      ym(XXXXXX,'reachGoal','teletype.messageReceived');
      gtag('event', 'teletype_messageReceived');
    });

Нажатие на канал в виджете

document.addEventListener('teletype.channelClicked’, function(data) {
      ym(XXXXXX,'reachGoal','teletype.channelClicked_${data?.detail?.buttonName || ''}’);
      gtag('event', 'teletype_channelClicked_${data?.detail?.buttonName || ''}’);
    });

Для Аналитик по событию(цели) teletype.channelClicked нужно добавить каналы которые подключены к виджету

К примеру к этому виджету подключена Почта и Whatsapp, значит нужно создать события(цели) для них как на примере снизу

Нажатие на картинку

document.addEventListener('teletype.showPreviewer, function(data) {
      ym(XXXXXX,'reachGoal','teletype.showPreviewer);
      gtag('event', showPreviewer);
    });

Превьюшка картинки закрыта    

document.addEventListener('teletype.previwerHidden, function(data) {
      ym(XXXXXX,'reachGoal','teletype.previwerHidden);
      gtag('event', teletype_previwerHidden);
    });

Примеры отображения данных в ЯМ и GA

Яндекс Метрика

1)Выбираем пункт меню “Отчеты” – “Стандартные отчеты” – “Конверсия”

2) Список приходящих событий

GOOGLE ANALYTICS

Нужно выбрать в пункте меню слева “Конверсии”