Birden çok araç kullanarak ortaya çıkardığınız bir analizi tek bir ortam aracılığıyla yapmak, üstelik kullanıcı deneyiminde "Abi adamlar ne güzel düşünmüş" dedirtecek 1-2 parlak fikirle karşılaşmak. İşte Hotjar'ı böyle özetleyebiliriz.
Gün geçmiyor ki hayatımıza yeni bir “tool” girmesin… Eğer ki birden çok araç kullanarak ortaya çıkardığınız bir analizi, tek bir ortam aracılığıyla yapabiliyor ve bir de kullanıcı deneyiminde “Abi adamlar ne güzel düşünmüş” dedirtecek 1-2 parlak fikirle karşılaşıyorsanız, diğer emektar “tool”unuzu mouse’unuzun tersiyle bir tarafa sürükleyip bırakmanız da an meselesi olabiliyor. İşte bugün o hikayelerinden birine esas oğlan olan Hotjar ile sizi tanıştıracağız.
Bu yazının, ürün henüz Beta aşamasındayken tester’ları arasına kayıt olmam vesilesi ile beni Founding Member‘larından birisi olarak afişe etmeleriyle hiçbir ilgisi yok. Gururum hiç okşanmadı. Yalan söylemeyi de hiç beceremem. (Yalan söylediği anında anlaşıldı!) İşin aslı şu: takım arkadaşım Batuhan’ın Hotjar özellik setinin sınırlarını zorladığı test drive’ı esnasında aldığı notları gördüğümde “Ben bundan çok güzel blog post çıkartırım.” fikriyle yanıp tutuşup, klavyeye sarıldım ve sizler için Batuhan’ın hazırlığı üzerinden yürüyerek Hotjar’ı tanıtıcı bir derleme hazırladım.
Hotjar Insight Nedir?
Hotjar ekibi kendilerini “Hepsi bir arada Web Analiz & Geri Bildirim Aracı” olarak tanıtıyor. Beta çıkışında kullanıma sunduğu Heatmap’lerle scroll ve click takibi yapabilme, kullanıcı davranışlarının video kayıtlarını izleyebilme, kullanıcı anketleri ve testlerini anlık olarak gerçekleştirebilme, dönüşüm tünelleri yaratıp analiz edebilme ve form terk analizi olarak tanımlanabilecek etkileşim analizleri özellikleri ile cephanesi kuvvetli bir SaaS olarak hızla kullanıcı sayısını artıyor.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Kullanıcılar hakkında bilgi edinebilmek için siteye birçok analitik araçta olduğu gibi tracking code’un eklenmesi gerekiyor. Tracking code’u iki farklı bölümde bulabiliyoruz:
Site Dashboard – Başarılı bir şekilde kod eklendikten sonra bu bölümde kod parçası kayboluyor.
Site Management – Önce ekranın sağ üst köşesindeki ayarlar butonuna tıklıyor sonra da Sites & Organization bağlantısını takip ettiğimizde göreceğimiz kodu alıp kullanabiliyoruz.
Dipnot: Kod parçası site hızını olumsuz etkilemez.
Tracking code veri elde etmek istediğiniz tüm sayfalarda <head> kod parçası altına yapıştırılmalıdır. Web site temasına yüklendiği takdirde bütün sayfalara otomatik olarak eklenecektir. Kodu yükledikten birkaç dakika sonra Hotjar websitenizi tanıyacak ve verileri görmeye başlayacaksınız.
1.2 Google TAG manager ile kurulum
GTM ile Hotjar kurulumu için izleme kodunu yukarıda belirttiğimiz gibi kopyalamanız gerekiyor. Sonrasında GTM’e gidip yeni bir etiket yaratıyoruz:
New sekmesinden Tag’e tıklıyoruz
Etiketin adını Hotjar olarak girip seçeneklerde Custom HTML Tag’i seçiyoruz.
Açılan HTML alanına kopyaladığımız izleme kodunu yapıştırıyoruz.
Sonrasında sağ üst köşedeki Firing Rules bölümündeki Add butonuna tıklayıp All Pages seçeneğini aktif ediyoruz. Böylece kod bütün sayfalara kopyalanmış oluyor.
Son olarak Publish’e tıklayıp kurulum işlemini sonlandırıyoruz.
1.3 Hotjar WordPress kurulumu
Yine öncelikle izleme kodunu WordPress sitemize yerleştirmemiz gerekiyor. Koda erişmek için benzer adımları izliyoruz. Kodu kopyaladıktan sonra siteye eklemek için iki seçeneğimiz var:
Uygulamayı yükledikten sonra çalıştırıp, ayrılmış alana izleme kodunu yapıştırdığımızda işlem tamamlanmış olacaktır. Uygulama Blue Medicine Labs tarafından yayınlandıysa kurulmalıdır.
Manuel olarak kurmak isterseniz WordPress kullanıcı panelinden Appearance -> Editor menüsüne gidip header.php sayfasını açmalısınız. Ardından izleme kodunu sayfanın en sonuna yapıştırıp işlemi tamamlayabilirsiniz.
2. Hotjar’a Birden Fazla Sitenin Eklenmesi
Hotjar üzerinden sayısız web sitesini -sizin olduğu takdirde- analiz edebilirsiniz. Bu noktada unutmamanız gereken nokta, farklı domainler için aynı izleme kodunu kullanamayacak oluşunuzdur.
Site eklemek için sağ üst köşedeki Site Management bölümünden Sites & Organization linkine tıklayıp açılan pencerede Add Site butonuna tıklamanız gerekmektedir.
3. Ajax Driven/Tek Sayfa Uygulamalarında Hotjar
Öncelikle belirtmem gerekir ki Hotjar ekibinin bu konuda çalışmaları devam ediyor. Yani bu özellik ile ilgili anlatımımız yaşanacak tüm istisnai durumlara karşılık vermeyebilir.
Visitor Playback özelliği bu tanımdaki web siteler için çalışır durumda. Hotjar oturum esnasında aşağıdakileri kayıt ediyor:
Oturumun açılışı – Şifreleri kayıt etmeden
Dinamik sayfaları
AJAX isteklerini
Heatmaps AJAX ve tek sayfa uygulamaları için ise şu an kullanılabilir durumda değil. Kullanıcı yine de heatmap görmek isterse site anasayfasının ekran heatmap görüntüsü gösterilebiliyor. Önemli not; eğer menülere tıklandığında açılan sayfalar dinamik olarak AJAX ile yükleniyorsa mouse hareketi ve tıklanma yeri ekran görüntüsü üzerinde yanlış yerde gösterilecektir.
Dönüşüm hunileri ise kullanıma açıktır. Tekil sayfaları izlemek için Virtual Page seçeneğini kullanabilirsiniz.
Veri toplama ve izleme seçeneklerini ilerleyen bölümlerde inceleyeceğiz.
4. Responsive Tasarımlara Hotjar Desteği
Responsive siteler için dahili destek seti olup tarayıcının boyutuna göre otomatik olarak değişmektedir. Ayrıca Hotjar’ın oluşturduğu heatmap’ler 3 farklı tipte sunuluyor. Böylece eğer siteniz mobil cihazlar için farklı tasarımlar kullanıyorsa daha verimli analizler elde edebiliyorsunuz. Sunulan seçenekler:
Not: Eğer responsive CSS’ler ve ayrı mobil tasarım kullanmıyorsanız dahi mobil heatmap seçeneği aktif olacaktır. Bunu mobil tarayıcıdan ekran görüntüsü alarak gösterir.
5. Internal IP Kısıtlaması
Çalışanlarınızın ve ofis içerisindeki diğer kişilerin siteniz içerisindeki aktivitelerini görmek istemiyorsanız, Account Settings bölümünden IP Exclusion linkini tıklamalısınız. IP Adreslerini iki farklı formatta ekleyebilirsiniz:
Simple: Bildiğimiz formatta IP adresi 192.168.0.1
Regular Expression: Ayrılan bölüm regex değerler girmemize izin veriyor. Böylece birden fazla IP adresini ve aralığı belirtebiliyoruz.
Eklediğiniz IP adresleri hesabınıza bağlı tüm web sitelerinin heatmap ve visitor playback kayıtlarını etkileyecektir. Fakat funnel’ları ve geri bildirim aracına etkisi olmayacaktır.
6. Heatmap
6.1 Heatmap’te Ziyaretçi Verilerinin İzlenmemesi
Bunun çeşitli sebepleri olabilir.
İzleme kodunun siteye doğru yüklenmemesi: Verilerin görüntülenmesini engelleyen sebeplerin başında gelmektedir. Farkında olmadan kodun silinmesi veya kodun çalışmasını engelleyecek herhangi bir yazılımın kurulu olması bunu tetikler.
“/” İşaretinin İzlenmesinde Yaşanan Problem: Heatmap çıkartmak istediğiniz sayfanın URL’sini kopyaladığınızda, ziyaretçilerinizin içeriğe erişmek için kullandığı URL ile aynı olduğundan emin olmalısınız. Örneğin heatmap için girdiğiniz URL www.example.com/home fakat kullanıcılarınızın eriştiği sayfa aslında www.example.com/home/ aradaki ekstra “/” heatmap oluştururken sorun yaratabilir. (Bu durumda tam tersi için de geçerlidir)
Aynı sayfa için farklı heatmap oluşturulması: Hotjar aynı sayfa için eş zamanlı heatmap raporu oluşturmanıza izin vermiyor. Örneğin aşağıdaki URL’ler için iki farklı rapor hazırlamak istediniz diyelim. Hotjar sadece ilk oluşturulan Heatmap için rapor sunacaktır.
Hotjar ile farklı zaman dilimlerinde aynı URL için sınırsız rapor oluşturabilirsiniz.
6.2 Ekran Görüntüsü Alırken Yaşanan Sorunlar
Heatmap analizi yaparken Hotjar, seçtiğiniz URL için ekran görüntüsü çıkartır. Bu ekran görüntüsünde kullanıcıların hareketlerini gösterir. Ekran görüntüsü alırken aşağıdaki gibi bir hata alırsanız;
Yanlış URL almış olabilirsiniz: Önce kendi tarayıcınızda test etmenizde fayda var.
Sayfa Public erişime kapalı olabilir: Test aşamasında olan sitelerde genellikle bu tip sorunlarla karşılaşılır. “Pages which are not publicly accessible generally have a white-list of certain IPs and/or userAgents that are allowed to access this page.” Hotjar’ın IPs bilgilerini yükleyerek gerekli işlemleri yapabilirsiniz.
Sonsuz Scroll’dan muzdarip olabilirsiniz: Her ne kadar Hotjar’ın Screenshot browser aracı ekran görüntüsü almak istediğiniz sayfaya göre boyutlarını otomatik ayarlasa da, sonsuz scroll‘a sahip sayfalarda zaman aşımı yaşayabilir.
Sayfa yüklemesinde yaşanan sıkıntılar: Hotjar ekran görüntüsünü almadan önce sayfanın tüm varlıklarının yüklenmesini bekler. Eğer süre 30 saniyeyi geçerse ekran görüntüsünü alırken problem yaşamanız muhtemel.
%100 Yükseklik: Eğer sayfadaki herhangi bir element %100 yüksekliğe göre ayarlandıysa, Hotjar’ın screenshot aracı sayfa ölçülerini belirlerken sorun yaşar ve zaman aşımına uğrar. Bunun önüne geçmek için sayfa bileşenlerini “max-height” şeklinde tanımlamanız doğru olacaktır. Bu özellik ile ekran görüntüsü aldığınız zaman ortaya çıkacak olası görüntü kaymalarının ve bozukluğununda önüne geçecektir.
Farklı tarayıcılar aynı bileşeni farklı yerlerde gösterirken, Hotjar bunu önlemek için bileşenlerin yerine göre tıklamaları hesaplamaya çalışır. Bu özelliğin dezavantajı, sayfa ilk yüklendiğinde ortada olmayan elementlerin tıklamasını da ekran görüntüsünde göstermesi ve karışıklığa neden olması. Örneğin:
Sayfa yüklendikten sonra ortaya çıkan butonlar.
Sayfa yüklendikten sonra ortaya çıkan pop-up’lar.
7. Visitor Playback
7.1 Hotjar Ziyaretçi Verilerini Nasıl Topluyor?
Kullanıcılarınızın siteniz ile nasıl etkileşime geçtiklerini merak ediyorsanız, Hotjar oturumları kayıt ederek size yardımcı oluyor. Aktif olarak oturumları kayıt ettiğiniz zaman, Hotjar kodu sunucularına otomatik olarak aşağıdaki bilgileri gönderiyor:
mouse movements
mouse clicks
scroll movements
keys pressed
Bu hareketler Hotjar’ın bulut tabanlı veri tabanında zaman bazlı kayıt edilerek, hesap yöneticisi tarafından tekrar erişilebilir tutuluyor. Ayrıca kullanıcıları (first-party cookie kullanarak) farklı sayfalardaki hareketlerini de kayıt edebiliyoruz. Hotjar dinamik ve statik sayfaları kayıt edebiliyor. Önceden tanımlı olarak şifreler ve kredi kartı numarasına benzer formatlardaki kutuların içeriklerini kayıt altında tutmuyor.
Daha yazacak birçok faydalı özelliğe sahip olan Hotjar şu anda ücretsiz kullanım hakkıyla deneme sürüşü yapmanıza da imkan veriyor. Bizim yazdıklarımıza ek olarak “Diğer kullananlar ne dediler acaba?” merakındaysanız şuraya da bir göz atmanızı öneririm. “Sonradan neler eklemeyi planlıyorlar?” diyorsanız da adamlar “Bugüne kadar neler tamamladık?” ile “Sırada Neler Var?” sorularına şiir gibi bir Roadmap ile yanıt vermişler. Göz atarsanız sizler de bana hak vereceksiniz.
Batuhan Hotjar’ı yazmaya devam ettikçe, ben de sizlerle paylaşmaya devam edeceğim 🙂
bu tip araçlar size bedava verilmiyor. siz onlara tüm verilerinizi bedava veriyorsunuz. ayrıca kullanıcı deneyimi bir tool değildir. önce kullanıcı deneyiminin felsefesini öğrenin. batuhan yaptığı birkaç çeviriden sonra kendini bu işin uz
bu tip araçlar size bedava verilmiyor. siz onlara tüm verilerinizi bedava veriyorsunuz. ayrıca kullanıcı deneyimi bir tool değildir. önce kullanıcı deneyiminin felsefesini öğrenin. batuhan yaptığı birkaç çeviriden sonra kendini bu işin uzmanı sanıyorsa, yanılıyor..
Yakup Bayrak
Merhaba Sisco. Öncelikle yorumun için teşekkür ederim. Hotjar tamamen ücretsiz bir araç değil doğru ancak daima ücretsiz olarak kullanabileceğin Basic isimli bir paketi de mevcut. (https://www.hotjar.com/compare-our-plans) Yazının içeriğinden nasıl böyle bir sonuca vardın tam anlam veremedim ancak kullanıcı deneyimi hakkında kardeş girişimimiz SHERPA bizleri bir hayli besliyor, dolayısıyla kullanıcı deneyiminin bir araçtan ibaret olmadığını bilecek kadar çok okuduk. Batuhan, Türkçe içerik açlığını en çok hissettiğimiz konu başlıklarından birisi olan Growth Hacking ile ilgili birçok çeviri yapıyor, doğrudur. Hatta sadece o yapmıyor, ben ve Can da çeviriyoruz. Öncelikli amacımız dünyadaki örneklerin dil bariyeri olmaksızın değerlendirilebilmesini mümkün kılmak; diğer bir deyişle önce okuyabilmek. Sonra anlayabilmek sonra da tartışabilmek için bir ortam yaratabilmek.
Morinek Ajans
Yazınız çok başarılı fakat biraz da çıkan analiz sonucu nasıl yorumlanır neler yapılabilir sitede kalma süresi nasıl arttırılabilir gibi tavsiyeler çok faydalı olacaktır.
Bunlar da ilgini çekebilir
Senin İçin Öneriyoruz
DAM BİLGİ TEKNOLOJİLERİ A.Ş. | SHERPA BLOG SİTE KULLANIM KOŞULLARI
Demek şifreni unuttun.
Olsun, hangimiz unutmuyoruz ki... Yeni bir şifre oluşturmak için e-posta adresini girmen yeterli.
bu tip araçlar size bedava verilmiyor. siz onlara tüm verilerinizi bedava veriyorsunuz. ayrıca kullanıcı deneyimi bir tool değildir. önce kullanıcı deneyiminin felsefesini öğrenin. batuhan yaptığı birkaç çeviriden sonra kendini bu işin uzmanı sanıyorsa, yanılıyor..
Merhaba Sisco. Öncelikle yorumun için teşekkür ederim. Hotjar tamamen ücretsiz bir araç değil doğru ancak daima ücretsiz olarak kullanabileceğin Basic isimli bir paketi de mevcut. (https://www.hotjar.com/compare-our-plans) Yazının içeriğinden nasıl böyle bir sonuca vardın tam anlam veremedim ancak kullanıcı deneyimi hakkında kardeş girişimimiz SHERPA bizleri bir hayli besliyor, dolayısıyla kullanıcı deneyiminin bir araçtan ibaret olmadığını bilecek kadar çok okuduk. Batuhan, Türkçe içerik açlığını en çok hissettiğimiz konu başlıklarından birisi olan Growth Hacking ile ilgili birçok çeviri yapıyor, doğrudur. Hatta sadece o yapmıyor, ben ve Can da çeviriyoruz. Öncelikli amacımız dünyadaki örneklerin dil bariyeri olmaksızın değerlendirilebilmesini mümkün kılmak; diğer bir deyişle önce okuyabilmek. Sonra anlayabilmek sonra da tartışabilmek için bir ortam yaratabilmek.
Yazınız çok başarılı fakat biraz da çıkan analiz sonucu nasıl yorumlanır neler yapılabilir sitede kalma süresi nasıl arttırılabilir gibi tavsiyeler çok faydalı olacaktır.