Hotjar Kullanım Rehberi

Güncelleme Yayın

Hotjar ile ilgili yayınladığım, giriş niteliğindeki temel bilgilendirme ve biraz daha detaylandırdığım özelliklere odaklanan yazıların ardından son yazı ile akışı sonlandırmak istiyorum. Bir sonraki aşamada planlım örnek-olaylar ile ilgili çözümleme süreçleri olacak. Şimdi, hızlı bir şekilde yayınlanan bu içerikleri hatırlayalım;

Elbette bu yazılarda genel konulara odaklanmıştım. Süreç içerisinde yayınlanan teknik içerikli yazılar ise şöyle;

Bu yazıda genel olarak yukarıdaki yazıları özetleyecek, ardından Entegrasyonar ve Identify API başlıklarıyla devam edeceğim. Yukarıda bahsi gçen yazılar da dahil olmak üzere Hotjar ile ilgili yayınlanan tüm yazıları görüntülemek isterseniz Hotjar etiketini takip edebilirsiniz.

Hotjar ve Kullanıcı Etkinlikleri

Hotjar Nedir? Nasıl Kullanılır? başlıklı yazıda da belirtildiği üzere Hotjar website ısı haritası ve kullanıcı davranış analitiği aracıdır.

Hotjar ve benzeri araçlar sayesinde websitemizi veya web uygulamamızı görüntülen ziyaretçilerin oturum süresince sayfa temelinde gerçekleştirdikleri etkinlikleri (mouse, scroll, klavye etkinlikleri) takip edebilir, formlarımızın etkileşim yoğunluklarını çıkarabilir ve belirli işlem adımlarını analiz edebilmek adına funnel'ler, anketler ve geri bildirim alanları oluşturabiliriz.

Destek

Hotjar ile ilgili desteğe mi ihtiyacın var? Tema ve diğer geliştirme işlemleri ile ilgili destek talebinde bulunabilirsin.

Entegrasyonlar

Tüm bu özellikler doğrultusunda sayfa tasarımları ve içerikleri optimize etmemiz mümkün hale gelmektedir. Ancak, Hotjar analiz sürecinin tamamını kapsamaz, bu sürecin içerisindeki önemli araçlardan biridir. Bu sebeple, A/B/n Testing servisleri ve bildirimler için çeşitli entegrasyonlar sunar. Google Optimize1, Optimizely2 ve HubSpot3 sunulan entegrasyonlardan bazıları4.

Hotjar, ürün yol haritasında (product roadmap) da açık bir şekilde belirttikleri üzere özellikler çerçevesinde API kitaplığını büyütmek amacıyla pek çok geliştirme yapmakta5. Her üç ayda bir Hotjar ürün ekibi bir sonraki adımda ne yapılacağını gözden geçirir, plana ekler ve öncelikleri belirler. Bu akış içeriisnde, şu anda mevcut Hotjar API çatısı altında Identify API yer almakta6.

Identify API

Identify API, Kullanıcı özellikleri veya diğer bir ifade ile öznitelikleri (user attributes), web sitesini veya uygulamasını görüntüleyen kullanıcıların ticari olarak değer olarak nitelendirilebilecek davranışlarının takip edilmesi ve bu verilerin analiz sürecine dahil edilmesini sağlar. Identify API aracılığı ile ziyaretçileriniz arasından müşterilerinizi ayıklayabilir (filtreleme) ve bu sayede sunduğunuz hizmete dair daha net bilgilere ulaşabilirsiniz.

Bu işlemin gerçekleştirilebilmesi için standart kurulum koduna eklemeler yapmamız gerekir.

<!-- Hotjar Tracking Code for https://ceaksan.com -->
<script>
// standart kurulum kodu
(function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:<your_user_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=');

// Identify API tanımları
var userId = <your_user_id> || null;
window.hj('identify', userId, {
    // özelleştirilmiş veri alanları burada tanımlanır.
    'Signed up': '2019—06-20Z', // Üyelik tarihi (ISO-8601 formatında)
    'Last purchase category': 'Electronics', // Son satın alınan ürünün bulunduğu kategori
    'Total purchases': 15, // Toplam satın alımlar
    'Last purchase date': '2019-06-20Z', // Son satın alım tarihi (ISO-8601 formatında)
    'Last refund date': null, // Son yapılan geri iade işlemi tarihi (ISO-8601 formatında)
});
</script>

Yukarıdaki kod örneğinde, standart kurulum kodunun ardından yapılan Identify API tanımlarını görebilirsiniz. Bu tanımlar örnek niteliğinde farklı veri türlerini de belirtecek şekilde eklenmişlerdir. Şayet kurulumu Google Tag Manager üzerinden yaptıysanız, yukarıdaki ve benzeri tanımları Custom JavaScript olarak eklemeniz gerekecektir. Elbette bu özelliği aktifleştirmeden önce kullanıcılarınızı bilgilendirmenizi öneririm.

hj('identify', <userId>, {
    'user_attribute': 'value'
});

Kod düzenlenmesi ve ardından Hotjar panelden özelliğin aktif hale getirilmesi (Enable User Attributes) ile birlikte artık kullanıcı tanımları seçilebilir, filtrelenebilir ve hedeflenebilri hale gelecektir7. Örneğin, websiteniz üzerinden belirli bir miktarın veya adedin üzerinde alışveriş yapmış kullanıcılar arasından son 30 gün içerisinde ankete katılanları filtreleyebilir ve verdikleri cevapları analiz sürecinde değerlendirebilirsiniz8.

Hotjar Identify API Kullanımı

Peki, User ID nasıl işliyor?

Yukarıdaki <userId> alanı kullanıcımıza ait ve benzersiz bir değeri temsil ediyor. Eğer kullanıcı tanımlayıcı bir etkinlik gerçekleştirmişse (örneğin, üye girişi) bu veri çoğunlukla veritabanı üzerinden çağırılacaktır. Ancak, kullanıcının oturum başlatmadığı durumlar da olabilir ya da kullanıcı farklı cihazlar üzerinden işlemler gerçekleştiriyor olabilir. Örnek bir durumu ele alalım.

*#1
Bir kullanıcımız web sitemizi bilgisayarı aracılığı ile ziyaret etmekte. Kullanıcı girişi yapılmamış olsun, dolayısıyla kullanıcıyı veritabanımızdaki kullanıcılardan biri ile eşleştirmesi gerçekleştiremiyoruz. Bu ziyarete Session A diyelim. Hotjar Session A'yı başlatan kullanıcıya kendisi benzersiz bir değer atar. Atadığı değerin 123 olduğunu varsayalım9.
*#2
Web sitemize mobil cihazı ile erişen bir kullanıcı var, herhangi bir oturum gerçekleştirmiyor. Bu nedenle kullanıcı kayıtlarımız ile ilişkilendiremiyoruz. Bu ziyarete de Session B diyelim. Hotjar bu kullanıcıya 456 değerini versin.
*#3
Web sitemizi ziyaret eden bir kullanıcı (Session C olsun ve Hotjar tarafından 789 değeri atansın) bir süre sonra sitemize kullanıcı girişi yapıyor. Giriş bilgileri üzerinden bu kullanıcının John olduğu ve AB1 kullanıcı ID'sine sahip olduğunu Hotjar'a ilettiğimizde Hotjar cihaz üzeerinden 456 değerine sahip kullanıcının Session B oturumunu bu kullanıcı ile ilişkilendirir. Dolayısıyla, John'un mobil cihazı vasıtasıyla önceden gerçekleştirdiği işlemlere de artık ulaşabiliriz. John, bilgisayarı üzerinden de kullanıcı girişi yaptığında Session A etkinlikleri de hesabı ile ilişkilendirilecektir.
Hotjar Identify API Kullanımı
Veri Tipleri

user_attribute (key) ve value için uyulması gereken bazı kurallar bulunmaktadır. Öncelikle, ilk parametre, yani user_attribute net bir ifade olmalıdır. value ise aşağıdaki tabloda belirtilen durumlara göre değer alabiir.

Tip Değer Sınırlamalar/Notlar
Number Tam veya ondalık sayılar Minimum -9223372036854775808, maksimum 9223372036854775808 değerini alabilir.
String Metin Maksimum 200 karakter alabilir. Büyük/küçük harfe duyarlı değildir. UTF-8 karakter setini destekler. E-posta tanımı değer olarak verilmemelidir.
Date ISO-8601 formatı
Boolean true veya false
Email Sadece email key'i ile e-posta adresi iletilebilir. Farklı bir string parametre ile iletilen e-posta adresi reddedilir.

E-posta adresi ile ilgili bir diğer husus da şudur. User ID olarak e-posta adresinin kullanıldığı durumlar olabilir.

hj('identify', <userId>, {
    'user_attribute': 'value'
});

Bu gibi durumlarda <userId> alanında bu e-posta adresinin belirtilmesi gerekir. Ancak bu kullanım son çare olarak değerlendirilmelidir. Çünkü kullanıcı e-posta adresini değiştirebilir. Bu durumda farklı adresler farklı etkinlikler ile ilişkilendirilecektir.

Anonim Kullanıcılar

Kullanıcı etkinliklerini sadece kayıtlı kullanıcılar ile ilişkilendirmek istemeyeceğimiz durumlar söz konusu olabilir. Örneğin, yaptığımız bir a/b testini tüm kullanıcılar üzerinden değerlendirmek isteyebiliriz. Bu durumda, eşleştirilmemiş kullanıcılar için <userId> için null değerini verebiliriz10.

hj('identify', null, {
    ab_test: 'variant-A',
    referrer: 'facebook_paid'
});