Hotjar Virtual Page Tracking İşlemleri

Elbette URL ile sayfaları ayrıştıramadığımız (örneğin bir popup gösterimi, JavaScript fonksiyonu gibi olaylar) durumlar da söz konusu olabilir. İşte bu gibi durumlar için JavaScript ile ilgili işlemi işaretleyebileceğimiz ve sayfa olarak işleme alabileceğimiz bir yöntem mevcut; Virtual Page Tracking (VPV).

Virtual Page Tracking

Hotjar, yeni bir Funnel oluşturulduğunda tanımlanan sayfalar temelinde kullanıcıların aksiyonlarını kayıt altına alabilmekte¹. Örneğin, ziyaretçilerimizin anasayfadan kayıt sayfasına ya da teklif formuna doğru bir akış içerisinde ilerlemesini istiyoruz. Ancak, ziyaretçiler bu akış içerisinde bir noktada ilerleyişi sonlandırıyorlar ve biz bunun nedenini merak ediyoruz diyelim. Bu aşamada, Funnel oluşturma sürecinde ilk olarak akış içerisindeki her sayfanın benzersiz URL’ini temel alırız. Özetle kayıt işlemini temel alarak şöyle bir akış oluşturalım:

1. Anasayfa: /
2. Kayıt sayfası: /kayit-ol
3. Onay sayfası: /tesekkurler

Ancak, nadiren de olsa bu durumun dışında işlemler gerekebilir. Örneğin, kayıt formunuz bir popup ile görüntüleniyor (overlay) olabilir ya da teşekkür sayfası yerine bir bildirim dönüyor veya JavaScript fonksiyonu tetikleniyor olabilir. Bu gibi durumlarda elbette benzersiz bir URL işaretlemek pek mümkün olmayacaktır. İşte böyle süreçlerde kullanmak üzere Virtual Page Views (VPV) tanımlamalarını kullanabiliriz. Bu özelliği URL parametrelerinin (query string: utm, fbclid, id, s vb.) kullanıldığı süreçlerde de tercih edebiliriz. Virtual Page Views, temelde sayfalar benzersiz olarak ayrışmıyor ve URL’leri değişmiyor olsa dahi sayfa görüntüleme olarak (PageView) işaretlenmelerini sağlayan ve bir JavaScript kodu aracılığıyla kullanılabilen bir özelliktir. İlgili JavaScript satırı eklendikten sonra yapılan tanımlama Funnel oluşturma aşamasında “Contain” ile adım olarak akışa dahil edilebilir.

hj('vpv', '/slug/permalink');

Bu satırın doğru bir şekilde işleyebilmesi için Hotjar Tracking Code'un ilgili sayfada kurulu ve geçerli bir şekilde çalışıyor olması gerekir. Virtual Page View işleminin sayfa yüklenir yüklenmez tetiklenmesini istiyorsak ilgili satır virtual pageview call öncesinde tetiklenmiş olmalıdır². Yani özetle şu şekilde bir sıralama olmalıdır:

<!-- Hotjar Tracking Code -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:[hotjar-hesap-id],hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

    hj('vpv', '/slug/permalink');
</script>

Virtual Page adımının Funnel’e nasıl dahil edilebileceğine bir örnek üzerinden bakalım.

Akışımızı şöyle belirleyelim:

1. Ziyaretçilerimiz organik trafik ve/veya sosyal medya hesaplarındaki paylaşımlar üzerinden içeriklerimize ulaşıyorlar,
2. Her sayfada belirgin bir şekilde görünür olan “Kayıt Ol” butonumuz var ve ziyaretçilerin bu butona tıklamasını istiyoruz,
3. “Kayıt Ol” butonu tıklandığında bir popup açılıyor (lightbox, modal vb.) ve ziyaretçilerin kayıt için gerekli olan bilgileri doldurmasını istiyoruz,
4. Bilgiler doğru bir şekilde doldurulduktan ve kayıt işlemi başarıyla gerçekleştikten sonra bir bildirim dönüyor,
5. Bildirimin yanı sıra e-posta doğrulaması için de ziyaretçinin belirttiği e-posta adresine bir doğrulama bağlantısı gönderiliyor,
6. Ziyaretçi e-posta adresine gönderilen bağlantıyı tıklayarak süreci sonlandırıyor ve kayıtlı hale geliyor.

Akışı olabildiğince uzatmaya çalıştım, elbette bu kadar uzun bir yolculuk oluşturmak zorunda değilsiniz. Şimdi bu akışı değerlendirelim. 1. adımda ziyaretçiler farklı kaynaklar üzerinden bir içeriğimize ulaştılar. Bu adımı kolaylıkla Page URL olarak oluşturabiliriz.

2. ve 3. adımda ise bir tıklama olayı söz konusu ve tıklamanın ardından bir popup görüntüleniyor. Dolayısıyla URL’imizde bir değişiklik olmuyor. İşte bu noktada Virtual Page tanımlayabiliriz.

hj('vpv', '/sign-up/');

4. adımda formun başarıyla gönderilmesi ve ardından dönen bildirimi yine Virtual Page olarak tanımlayabiliriz.

hj('vpv', '/form-success/');

5. ve 6. adım e-posta doğrulama sürecini barındırıyor. Kullanıcı ilgili sayfayı kapatmış olabilir, ancak önemli değil. Biz yine Funnel akışını devam ettirebiliriz ve bu adım için URL tanımlaması yeterli olacaktır.

Yukarıda bahsi geçen Virtual Page (VPV) tanımlama işlemlerini elbette Google Tag Manager (GTM) aracılığıyla pratik bir şekilde gerçekleştirebiliriz. Bunun için ilgili JavaScript satırını Özel HTML etiketi alanına eklememiz ([virtual-page]) ve Etiket Sekanslama altından Hotjar kodunun tetiklenmesini ön şart olarak seçmemiz yeterli olacaktır.

Bir sonraki aşama elbette kurulumlarımızın kontrolü. Google Tag Manager > Preview ile tetiklenen etiketler ve etiket sıralaması, Chrome > Developer Tools > Network ile de hotjar filtresi üzerinden olaylar ve modüller takip edilerek kodların doğru bir şekilde işlediğinden emin olabiliriz.