Hotjar

CF7 Form Elemanını Hotjar Whitelisting Olarak Tanımlamak

Yayın:
Wordpress web sitesindeki Contact Form 7 ile oluşturulan formların veya belirtilen form elemanlarının Hotjar Recordings sürecinde şifrelenmeden kayıt edilmesini nasıl sağlarız?
GÖRSEL
Basit, kullanışlı ve çok uzun zamandır da bu özellikleri sebebiyle WordPress popüler eklentileri arasında yer alan bir iletişim formu eklentisi olan Contact Form 7 ile ilgili daha öncesinde Contact Form 7 Dönüşüm Tanımlama yazısını yayınlamış ve form dönüşümlerini nasıl yapılandırabileceğimize değinmiştim. Yine bu konuya devam ederek, Hotjar ile dönüşüm yolunu değerlendirdiğimiz süreçte form elemanlarına girilen değerleri nasıl görünür hale getirebileceğimizden bahsedeceğim. Adım adım ilerleyelim.

Hotjar Whitelisting Input Fields

Hotjar Nedir?” yazımda da belirttiğim üzere Hotjar gizlilik sebebiyle Recordings altında listelenen ekran kayıtlarda aksi belirtilmediği sürece form içeriklerini ve sayıları * olarak gösterir (suppress). Gizlilik konusundaki güncelleme sonrasında ise isteyen kullanıcıların site ayarlarında ilgili onay kutucuğunu işaretlemek şartıyla form elemanlarını kayıt altına alması mümkün kılındı.Yapmamız gereken ilk işlem Hotjar > Settings > Sites & Organizations adımları sonrasında listelenen siteler arasından ilgili sitenin Site Settings bölümünü görüntülemek. İlgili ayarlar arasında “Record keystroke data on whitelisted input fields.” seçeneğini görebilirsiniz. Bu seçeneği işaretledikten sonra güncel ayarları kayıt ederek pencereyi kapatabilirsiniz. Bir sonraki adım ise data-hj-whitelist özelliği ile form elemanlarını işaretlemek.

data-hj-whitelist

data-hj-whitelist ise ekran kaydı sırasında şifrelenmeyecek form elemanının tanımlanmasını (whitelisting) sağlamakta. Şimdi gelelim çözüm üreteceğimiz asıl konuya ve Contact Form 7 (CF7) eklentisiyle oluşturduğumuz formlardaki bir alanın nasıl şifrelenmeden ekran kaydına dahil edebileceğine bakalım.

Contact Form 7 ve Whitelisting İşlemi

Bir iletişim formu oluşturduk ve Funnel ile ziyaretçilerin bu forma ulaşma süreçlerini takip ediyoruz. Ancak form içerisindeki bazı alanların ziyaretçiler tarafından nasıl çözümlendiğini de merak ediyoruz. Hotjar öntanımlı olarak form içeriklerini şifrelediği için fikir yürütemiyoruz. İşte bu aşamada yapmamız gereken aktif WordPress temamızın functions.php isimli dosyasını kod editörümüz ile açıp şu kod parçasını eklemek ve kaydetmek.https://help.hotjar.com/hc/en-us/articles/115015563287-Whitelisting-input-fields
add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
    $str_pos = strpos( $content, 'name="input-name"' );
    $content = substr_replace( $content, ' data-hj-whitelist ', $str_pos, 0 );
    return $content;
}
Kod parçacığı wpcf7_form_elements aracılığıyla form elemanları üzerinde işlemler yapabilmemizi sağlamakta. Kod parçacığı içerisinde gördüğünüz name="input-name" bir belirleyici görevi görmekte. Herhangi bir form içerisinde input-name name değerine sahip bir eleman var ise bu elemana data-hj-whitelist tanımı eklenmekte.Yukarıdaki örnek görselde yer alan textarea elemanımız your-message name değerine sahip. Dolayısıyla input-name alanını your-message olarak güncellememiz gerekmekte. Son durumda ilgili satır şu şekilde olacaktır:
add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
//...
    $str_pos = strpos( $content, 'name="form-name"' );
//...
Bu kod işleminin ardından artık CF7 aracılığıyla eklenen formlarda yer alan form-name name değerli her eleman data-hj-whitelist olarak işaretlenir. Elbette tanımlama alanını benzersiz tutabilir ve sadece tek bir form elemanının Hotjar tarafından şifrelenmemesini de sağlayabilirsiniz ya da şifrelenmemesini istediğiniz form elemanlarını name yerine class ile genişletebilirsiniz. Aslında tam tersi bir yol izleyerek tüm alanların şifrelenmemesini sağlayıp sadece belirlenen alanların şifrelenmesini de mümkün hale getirebilirsiniz. Elbette bu durumda site ayarlarını buna uygun şekilde düzenlememiz ve functions.php dosyasındaki kod parçacığında yer alan data-hj-whitelist ifadesini data-hj-suppress ile değiştirmemiz gerekir.
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.