HubSpot Chat ve GTM Tracking İşlemi

Formlar, bildiğiniz üzere HubSpot Sayfalar (Pages) içerisinde ve potansiyel satış sürecinde önemli bir yere sahip. Chat (Conversions) de bu sürecin önemli unsurları arasında yer almakta.

HubSpot Conversions

HubSpot Conversions, otomasyonlarla zenginleştirilebilir şekilde HubSpot üzerinde (webpage, landing page, blog) veya ayrı bir şekilde barındırılan web sitelerinde ve hatta Facebook sayfalarında ziyaretçiler ile sohbet imkanı sağlamakta. Chatflows, Snippets, Templates seçenekleri ile organize edilebilen özellik sayesinde ziyaretçilerinizle iletişim başlatıcı karşılama mesajları, canlı destek (zamana göre organize edilebilir şekilde) ve/veya chatbot ile önceden oluşturulmuş şablonları paylaşmak mümkün.

Öncelikle, bu işlemler için Website veya Facebook Messenger seçeneklerinden birini seçmeniz gerekmekte.

Facebook Messenger seçeneği üzerinden ilerlediğinizde HubSpot ile Facebook sayfanızı ilişkilendirmeniz gerekmektedir. Ben yazının geri kalan bölümünde, GTM ile sohbet işleminin takip edilebilmesi amacıyla Website seçeneğini kullanacağım. Bu seçeneğin ardından, Live Chat ve Bots seçenekleri altından uygun olan adım ile devam edebilirsiniz. Her durumda da kullanılacak Conversations API ile ilgili aynı adımları izleyebiliriz.

İlgili bir seçenek seçildikten sonra Conversations widget'e ait izleme kodu oluşturulur.

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/1234256.js"></script>
<!-- End of HubSpot Embed Code -->

Bu kod sayesinde ilgili widget'i HubSpot sayfaları veya diğer web sayfalarında kullanabiliriz.

HubSpot içerisinde kullanabilmemiz için yine bu kodu HubSpot ve GTM - Form Etkinliklerini İzleme İşlemi, HubSpot GA, GTM, Adroll Tracking İşlemleri ve HubSpot İzleme Kodu (Tracking Code) İşlemleri başlıklı yazılarda yinelediğim şekilde yerleştirmemiz gerekmektedir.

Conversions API

Chat seçeneklerinden bizim için uygun olanı seçtik, ilgili kodumuzu web sitemize yerleştirdik, artık sohbet işlemlerini / değişimlerini takip edebiliriz. HubSpot bize sohbet başlatma, mesaj gönderme (her mesaj gönderildiğinde) ve sohbet sonlandırma başta olmak üzere pek çok işlemi sunmakta¹.

// Sohbet başlatma
window.HubSpotConversations.on('conversationStarted', payload => {
  console.log('conversationStarted');
  dataLayer.push({'event': 'hs_chat_started'});
});

// Sohbet bitirme
window.HubSpotConversations.on('conversationClosed', payload => {
  console.log('conversationClosed');
  dataLayer.push({'event': 'hs_chat_closed'});
});

Bu işlemden önce HubSpotConversations ile API'nin erişilebilir olup olmadığını kontrol etmenizde fayda var.

if (window.HubSpotConversations) {
  console.log('API hazır!');
} else {
  window.hsConversationsOnReady = [
    () => {
      console.log('API şimdi erişilebilir!');
    },
  ];
}

Ek olarak, API aracılığı ile conversationId de erişilebilir². Bu sayede kullanıcı temelinde de işlemler gerçekleştirebilirsiniz.

İlgili işlemi HubSpotConversations nesnesi dışından yönetmek istersek message içeriğini temel alabiliriz.

window.addEventListener( 'message', function(event) {
  if ( event.origin !== 'https://app.hubspot.com' )
    return false;

  let eventData = JSON.parse(event.data);
  let eventAction = false;
  let count = 0;

  // console.log( eventData.type );
  // console.log( eventData.data.eventType );

  switch( eventData.type ) {
    case 'closed-welcome-message':
      eventAction = 'Closed - Welcome Message';
    break;
    case 'open-change':
      eventAction = ( eventData.data ) ? 'Opened - Window' : 'Closed - Window';
    break;
    case 'external-api-event':
      if ( eventData.data.eventType = 'conversationStarted' && count === 0)
      eventAction = 'conversationStarted';
    break;
    default:
      eventAction = false;
    break;
  }

  if ( eventAction ) {
    dataLayer.push({
      'event': 'Send Event',
      'event_category': 'Live Chat',
      'event_action': eventAction,
      'event_label': eventData.uuid,
      'event_value': 10
    });
    count++;
  }
});

Son olarak, widget temelindeki değişimleri message ile izleyebilirsiniz.

Yukarıdaki işlemlerle birlikte HubSpot tarafındaki izleme (tracking) işlemlerini tamamlıyorum. Sonraki yazılarda HubSpot ile diğer servisler arasındaki otomasyon (automation) süreçlerinden bahsedeceğim.