HubSpot ve GTM - Form Etkinliklerini İzleme İşlemi

Hubspot ile ilgili izleme işlemlerinde daha önce, Hubspot izleme kodu ve ardından Google Analytics, Google Tag Manager ve Adroll entegrasyonlarına ve bu süreçte dikkat edilmesi gereken hususlara değinmiştim.
AA

İlgili detaylara HubSpot İzleme Kodu (Tracking Code) İşlemleri ve HubSpot GA, GTM, Adroll Tracking İşlemleri sayfaları üzerinden ulaşabilirsiniz. Yazılar ilerledikçe konuyu biraz daha spesifik bir boyuta indirgemeye devam edeceğim.

Bu yazı bağlamında odaklanacağımız konu artık Sayfalar (Pages) yerine sayfalar içerisinde kullandığımız formlar ile ilgili etkinlikler olacak. Özetle, yazının kalan bölümünde Hubspot üzerinden oluşturduğumuz formları Marketing > Lead Capture > Forms Google Tag Manager ve/veya Google Analytics ile (ya da diğer izleme araçları ile) nasıl takip edebileceğimize değineceğim1.

HubSpot Forms

Hubspot, oldukça kolay bir şekilde hem kendi içerisinde Sayfalar (Pages) ile kullanılmak üzere hem de Hubspot dışında (non-HubSpot forms) kullanılmak üzere form oluşturma ve yönetme imkanı sunmakta. Oluşturulan her form kolay bir şekilde HubSpot Sayfalar (Webpages, blog, landing page) içerisine yerleştirilebilmekte. Diğer yandan, bu formları HubSpot dışında da URL ve JS embed seçenekleri ile kullanma imkanı söz konusu2.

Formlar oluşturulduktan ve herhangi bir sayfa ile ilişkilendirildikten sonra HubSpot tarafından takip edilmekte ve Görüntüleme (View), Gönderim Oranı (Submission Rate), Gönderim Sayısı (Submissions), Yer Aldığı Sayfa Sayısı (Appers On), Son Güncelleme (Last Modified) gibi bilgilerle birlikte listelenmekte. Buna ek olarak, ilgili form başlığını tıkladığınızda o form özelinde Hubspot tarafından derlenen bilgilerin yer aldığı oldukça kapsamlı raporlara da ulaşabilmektesiniz3 4.

Şimdi bir LP örneği üzerinden ilk olarak HubSpot içerisinde form izleme işlemlerini detaylandıralım.

HubSpot Form Traking

HubSpot oluşturulan her form için benzersiz bir ID tanımı oluşturur. Bu sayede ilgili formla ilgili detayları görebilir ve formları optimize edebiliriz. Ek olarak, oluşturulan bu ID sayesinde, ilgili formları Pages tanımları (blog, landing page, website) içerisine kolayıkla yerleştirebiliriz. Marketing > Website > Landing Pages seçeneği üzerinden ilerleyelim ve oluşturduğumuz bir formu ilgili varış sayfası içerisinde kullanalım.

Create > Landing Page adımlarını izleyerek yeni bir LP oluşturabilir ya da var olan bir LP tanımını tıklayarak ilerleyebiliriz.

Yeni bir şablon seçsek de, var olan bir seçim üzerinden ilerlesek de bir sonraki aşamamız elbette Edit (Düzenle) sayfası olacaktır.

Modules (Modüller) bölümünde form seçeneğini görebilirsiniz. Form modülü tıklandığında, kullanılabilir durumdaki tüm formların Choose a form bölümünde listelendiğini görebilirsiniz. Form seçiminin ardından, formun barındırdığı alanlar (input) ekranımızda belirecektir. Bir sonraki aşamamız formun yerleştirilmesini istediğimiz alana modülün sürüklenip bırakılması (drag/drop). Artık varış sayfamız kullanıma hazır. Peki, form gönderimlerini GTM ile nasıl takip edebileceğiz?

HubSpot formları gönderim aşamasında 2 seçenek üzerinden ilerler;

  • Redirect to another page (başka bir sayfaya yönlendir)
  • Display an inline thank you message (sayfa içerisinde teşekkürler mesajı görüntüle)

HubSpot GA, GTM, Adroll Tracking İşlemleri başlıklı yazımda da belirttiğim üzere, Settings > Pages bölümündeki tüm değişiklikler biz aksini belirtmediğimiz (domain seçimine bağlı olarak) sürece tüm Pages (website, landing page, blog) seçeneklerine uygulanır. Dolayısıyla, biz ilgili bölümde GTM, GA ve/veya Adroll seçeneklerini seçtiysek, hatta Templates altından header ya da footer eklemeleri yaptıysak, o eklemeler oluşturduğumuz bu varış sayfalarına da uygulanacaktır.

Forma ait Settings > Advanced options > Additional code snippets altından da header ve footer alanlarına kod eklemesi yapabiliriz. Bu alana yapacağımız ekleme Settings > Pages eklemesinden sonra işleme alınır. Yani, ilgili ekleem head eklemesi </head>, footer eklemesi de </body> etiketinin hemen öncesine eklenir.

Eğer Redirect to another page seçeneğini seçersek yönlendirilecek URL üzerinden (örneğin bir teşekkürler sayfası) bir dönüşüm işlemini tetikleyebiliriz. Ancak, bu demek değil ki yine de form etkinliklerini takip edemeyiz.

Display an inline thank you message seçimi üzerinden ilerleyelim.

Hubspot'un izleme işlemlerinde _hsp nesnesini kullandığını belirtmiştim.

Bu nesnenin yanı sıra, form ve chat elemanları ile ilgili durumları da postMessage ile paylaşır.

Bu message değerleri sayesinde formun görüntülenmesi, gönderilmesi gibi pek çok süreci takip edebilmekteyiz. Bizim form başarılı bir şekilde gönderildiğinde yakalayacağımız message değerimiz onFormSubmitted. Şimdi, karar değerlendirmemiz gereken 2 seçenek var; ilgili formu Hubspot header alanı üzerinden mi GTM > Custom HTML ile mi takip edeceğiz? Kararımız her ne olursa olsun kullanmamız gereken kod parçacığı aynı olacaktır 5.

window.addEventListener("message", function(event) {
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
  // işlemler
  }
});

Evet, kodumuz ilk olarak HubSpot tarafında işlerin yolunda gidip gitmediğini hsFormCallback ile kontrol edip, eğer her şey yolunda ise ve form başarılı bir şekilde gönderilmişse onFormSubmitted etkinliğine göre işlemlerin gerçekleştirilmesini sağlamakta.

eventName olarak ayrıca onFormReady, onFormSubmit seçenekleri de değerlendirilebilir.

İlgili mantık işlemi içerisinde Google Analytics kodu kullanacaksak ve aksi bir kod kurulumu yapmamışsak HubSpot analytics.js kütüphanesini kullandığı için ga() fonksiyonu ile uyumlu parametreleri kullanmalıyız. Yazıda ağırlıklı olarak GTM üzerinde durduğum için eklememi de buna uygun bir şekilde yapacağım.

window.addEventListener("message", function(event) {
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    window.dataLayer.push({
      'event': 'hubspot-form-success',
      'hs-form-guid': event.data.id
    });
  }
});

Artık GTM üzerinden hubspot-form-success etkinliğini takip edebilir ve buna bağlı olarak işlemler gerçekleştirilmesini sağlayabilirim. Kod içerisindeki event.data.id ise ilgili formun benzersiz ID değerini almakta. Dolayısıyla, form özelinde de işlemler yürütebilmemiz mümkün.

Eğer A/B testi yapıyorsanız ilgili kod kurulumunu test edilen sayfalar içerisinde tanımlamanızı öneririm.

HubSpot Form Embed

HubSpot üzerinde oluşturduğumuz formları ayrıca kullanabileceğimizden bahsetmiştim. Bu kullanım URL (share.hsforms.com/...) veya JS embed yöntemleri ile gerçekleştirilebilmekte. Fakat, URL kullanımında ilgili izlenem işlemlerini gerçekleştirememekteyiz6.

Form embed işleminde ise HubSpot bize bir JS kodu iletir. Bu kod parçacısı ile birlikte formlarımızı HubSpot dışında istediğimiz herhangi bir alanda kullanabiliriz.

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "XXXXXXX",  // Hubspot ID
    formId: "aba39018-e5dc-4df4-9585-9401ba471470" // form-ID
});
</script>

Form embed işleminde script render edildiğinde form sayfanıza iframe olarak sunulacaktır. Dolayısıyla, form dışından eğer message değişimlerini izliyorsanız aynı HubSpot Pages yapılarında olduğu gibi eventName olarak ayrıca onFormReady, onFormSubmit ve onFormSubmitted değerlerinin gönderildiğini görebilirsiniz. Dolayısıyla, GTM içerisinden Custom HTML veya dışarıdan ilgili message değişimlerine bağlı olarak işlemler gerçekleştirebiliriz.

window.addEventListener("message", function(event) {
  //...
});

Son bir not olarak, HubSpot üzerinden oluşturduğumuz formları ayrıca event aşamalarında göre yönetebilmekteyiz. Örneğin, aşağıdaki kod örneği form yüklenirken iframe kodunun target ile belirttiğimiz katman içerisine eklenmesini sağlayacaktır. Bu ve benzeri özelleştirmeler ile formları sayfamız ile ilişkili bir şekilde ele alabilmekteyiz7.

hubspot_embed.addEventListener('load', function() {
hbspt.forms.create({
  portalId: "XXXXXXX",  // Hubspot ID
  target: '#hbspt-form', // IFrame'in ekleneceği katman adı / opsiyonel
  formId: "aba39018-e5dc-4df4-9585-9401ba471470" // form-ID
});

Bir nedenle message yakalamak ile ilgili sorun yaşıyor olabiliriz. Bu durumda, HubSpot tarafından sunulan bu özelleştirme işlemini dönüşüm (conversion) takibi amacıyla değerlendirebiliriz7.

hbspt.forms.create({
  portalId: "XXXXXXX",
  target: '#hbspt-form', // IFrame'in ekleneceği katman adı / opsiyonel
  formId: "aba39018-e5dc-4df4-9585-9401ba471470", // form-ID
  onFormSubmit: function($form){
    window.dataLayer.push({
      'event': 'hubspot-form-success',
      'hs-form-guid': event.data.id
    });
  }
});

İşlemlerimiz şimdilik bu kadar. Konu başlıklarıyla ilgili detaylar için kaynakça alanındaki bağlantılara göz atabilirsiniz.

  1. Forms | Frequently Asked Questions ↩
  2. Free Online Form Builder. HubSpot ↩
  3. Create forms. HubSpot Knowledge Base ↩
  4. The Best Form Builder for Small Businesses and Startups ↩
  5. Creating Forms in HubSpot. HubSpot Academy ↩
  6. Use non-HubSpot forms. HubSpot Knowledge Base ↩
  7. How to customize the form embed code. HubSpot Academy ↩ ↩
Yorum alanını göster
Beğendim
Beğenmedim