How to Set Up Metric Events in an Online Chat

Events in the Widget

Yandex Metrica Integration Code

(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 Integration Code

<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>

You also need to add a listener to your JS code to record events

Example of Widget Opening

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

Widget Closing

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

Dialog Closed by Operator

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

Dialog Rated by Client

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

Dialog Started

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

Message Sent

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

Message Received

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

Click on Channel in the Widget

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

For Analytics, you need to add the channels connected to the widget as events (goals) for the teletype.channelClicked event

For example, if this widget is connected to Email and Whatsapp, you need to create events (goals) for them as shown in the example below

Click on Image

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

Image Preview Closed    

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

Examples of Data Display in YM and GA

Yandex Metrica

1) Select the menu item “Reports” — “Standard Reports” — “Conversion”

2) List of incoming events

GOOGLE ANALYTICS

You need to select “Conversions” from the menu on the left