Microsoft Clarity Rehberi: Isı Haritası ve Oturum Kaydı

Analytics size ziyaretçilerin teklif sayfasında ayrıldığını söyler, ama neden ayrıldıklarını söylemez. Microsoft Clarity bu boşluğu dolduran ücretsiz bir davranış analizi aracıdır: sitenize eklediğiniz küçük bir kodla ısı haritaları ve oturum kayıtları oluşturur, kullanıcıların nereye tıkladığını, sayfanın ne kadarını kaydırdığını ve nerede takılıp öfkeyle tekrar tekrar tıkladığını (rage click) gösterir. Bu rehberde Clarity'yi kurmaktan ısı haritasını ve kayıtları yorumlamaya, gizlilik ve maskeleme ayarlarından çerez onayına kadar adım adım ilerliyoruz.

Clarity ne yapar, ne yapmaz?

Clarity, ziyaretçinin sayfadaki etkileşimlerini (fare hareketi, dokunma, tıklama, kaydırma) ve sayfanın yapısını kaydedip bunları yeniden oynatılabilir bir oturuma ve toplu ısı haritalarına dönüştürür. Ücretsizdir; Microsoft'un dokümantasyonuna göre trafik sınırı veya ücretli sürüme geçme zorunluluğu yoktur. Proje başına günlük kayıt sayısı ve ısı haritası başına sayfa görüntüleme sayısı için yüksek teknik sınırlar vardır, ama küçük ve orta ölçekli siteler bunlara genellikle yaklaşmaz.

Clarity'nin yapmadığı şeyleri de bilmek gerekir. Pazarlama kanallarına göre detaylı edinme raporu, gelir analizi ve reklam platformlarına dönüşüm aktarımı onun işi değildir; bunlar için Google Analytics 4 gerekir. İki araç rakip değil, tamamlayıcıdır: GA4 "ne oldu ve nereden geldi", Clarity "sayfada nasıl oldu" sorusunu cevaplar. GA4 kurulumunu GA4 kurulum rehberimizde anlattık.

Adım adım Clarity kurulumu

Proje oluşturun. clarity.microsoft.com adresinde bir Microsoft, Google veya Facebook hesabıyla oturum açın ve "Yeni proje" ile sitenizin adını ve adresini girin. Hesabı şirkete ait bir e-posta ile açın; ajansa veya ekip arkadaşlarına daha sonra proje ayarlarından erişim verebilirsiniz.
Kurulum yöntemini seçin. Ayarlar altındaki "Kurulum" bölümünde dört yol görürsünüz:
- Manuel kod: İzleme kodunu kopyalayıp sitenizin tüm sayfalarının <head> bölümüne ekleyin.
- Hazır platform entegrasyonu: WordPress, Shopify, Wix, Squarespace gibi platformlar için eklenti veya ayar ekranı bulunur.
- NPM paketi: React, Vue gibi JavaScript projelerinde @microsoft/clarity paketi ile başlatma.
- Google Tag Manager entegrasyonu: Clarity, GTM hesabınızı algılayıp seçtiğiniz kapsayıcıya etiketi kendisi ekleyip yayınlayabilir.
Birden fazla ölçüm aracı yönetiyorsanız GTM yolu düzeni korur; etiket, tetikleyici ve izin kontrollerini Google Tag Manager yazımızda anlattık.
Kodu çerez onayına bağlayın. Clarity varsayılan olarak çerez kullanır. Türkiye'deki siteler için analitik çerezlerin ziyaretçinin onayından sonra çalıştırılması esas alınmalıdır. GTM kullanıyorsanız Clarity etiketini analitik izni verilmiş ziyaretçilerde çalışacak şekilde ayarlayın. Ayrıntılar aşağıdaki gizlilik bölümünde.
Kurulumu doğrulayın. Kodu ekledikten kısa süre sonra Clarity panelinde canlı ziyaretçi sayısı görünmeye başlar. Teknik kontrol için sitenizi açın, tarayıcının geliştirici araçlarında "Ağ" sekmesine geçin ve sayfayla etkileşime girerken clarity.ms/collect adresine giden istekleri arayın. İstek yoksa kod yüklenmiyor ya da onay bekleniyor demektir.
Maskeleme modunu seçin. Ayarlar altındaki "Maskeleme" bölümünden sitenin içeriğine uygun modu belirleyin (aşağıda ayrıntılı). Bu ayarı ilk kayıtlar birikmeden yapın; değişiklikler geriye dönük uygulanmaz.
İç trafiği ve gereksiz sayfaları ayıklayın. Ekip ziyaretlerini ayırmak için filtreleri ve segmentleri kullanın. Yönetim paneli, ödeme sağlayıcı sayfası gibi kaydedilmesi gerekmeyen alanlarda kodu hiç yüklememek en temiz çözümdür.
Google Analytics ile bağlayın. Ayarlardaki entegrasyon bölümünden GA4 mülkünüzü bağlayabilirsiniz. Bu entegrasyonla GA4'te "Clarity Playback URL" adlı oturum kapsamlı bir özel boyut oluşur; GA4'te ilginç bir segment bulduğunuzda ilgili oturum kayıtlarına bu bağlantıdan geçebilirsiniz. Şu an yalnızca tek bir web mülkü bağlanabiliyor.
Önemli olaylar için özel etiket ekleyin. Clarity'nin JavaScript API'si ile oturumlara özel etiket ve olay ekleyebilirsiniz: "form_gonderildi", "sepet_bos", "plan=kurumsal" gibi. Böylece daha sonra yalnızca formu gönderen ya da göndermeyen ziyaretçilerin kayıtlarını filtreleyebilirsiniz.

Gösterge paneli: ilk bakışta nereye bakmalı?

Kurulumdan birkaç gün sonra panelde ilk anlamlı tablo oluşur. Clarity, kullanıcı deneyimindeki sorunlara işaret eden bazı davranışları otomatik etiketler. Dokümantasyondaki tanımlarıyla:

Sinyal	Clarity'nin tanımı	Genellikle neye işaret eder?
Rage click (öfkeli tıklama)	Kullanıcının aynı küçük alana kısa sürede art arda tıklaması	Tıklanabilir sanılan ama tıklanamayan öğe, yavaş tepki veren düğme
Dead click (ölü tıklama)	Bir öğeye tıklandığında makul sürede görsel değişiklik veya gezinme olmaması	Bağlantısı olmayan görsel, bozuk düğme, gecikmeli istek
Excessive scrolling (aşırı kaydırma)	Oturumda beklenen ortalamanın üzerinde dikey kaydırma	Aranan bilgiye ulaşılamaması, dağınık sayfa yapısı
Quick back (hızlı geri dönüş)	Kullanıcının bir sayfaya gidip kısa süre içinde önceki sayfaya dönmesi	Beklentiyi karşılamayan bağlantı veya yanlış yönlendirme
JavaScript hataları	Tarayıcıda çalışan kodda oluşan hatalar; tıklama sonrası olanlar ayrıca işaretlenir	Çalışmayan form, kaybolan sepet, bozuk filtre

Bu sinyallerden birinin oranı belirli bir sayfada yükseliyorsa, o sayfanın kayıtlarını izlemeye oradan başlayın. Panelde ayrıca kaydırma derinliği, etkin süre ve cihaz kırılımları görünür.

Isı haritalarını okumak

Clarity'de her sayfa adresi için üç tür ısı haritası bulunur:

Tıklama haritası: Ziyaretçilerin sayfada nereye tıkladığını yoğunluk renkleriyle gösterir. Ana eylem çağrısı düğmesi az tıklanıp yanındaki dekoratif bir görsel çok tıklanıyorsa, görsel ya bağlantı olmalı ya da düğme daha belirgin hâle gelmeli.
Kaydırma haritası: Sayfanın her noktasına ziyaretçilerin ne kadarının ulaştığını gösterir. Teklif formu, ziyaretçilerin büyük kısmının hiç ulaşmadığı bir derinlikteyse form yukarı taşınmalı veya sayfa kısaltılmalıdır.
Alan haritası: Seçtiğiniz bir bölgenin (örneğin tüm fiyat tablosu) toplam tıklama payını gösterir; tek tek öğeler yerine bölümleri karşılaştırmak için kullanışlıdır.

Isı haritasını yorumlarken üç kurala dikkat edin. Birincisi, masaüstü ve mobil haritaları ayrı inceleyin; aynı sayfa iki cihazda tamamen farklı davranış üretir. İkincisi, haritanın kaç sayfa görüntülemesine dayandığına bakın; birkaç düzine ziyaretle oluşan harita güvenilir değildir. Üçüncüsü, sayfayı yeniden tasarladıysanız eski ve yeni sürümü karıştırmamak için tarih aralığını değişiklik tarihine göre ayarlayın.

Oturum kayıtlarını verimli izlemek

Oturum kayıtları Clarity'nin en güçlü ama en çok zaman alan özelliğidir. Rastgele kayıt izlemek saatler sürer ve çoğu zaman bir şey öğretmez. Kayıtlara her zaman bir soruyla girin ve filtre kullanın:

"Teklif sayfasını ziyaret edip formu göndermeyen mobil kullanıcılar"
"Rage click içeren ve /sepet sayfasını görüntüleyen oturumlar"
"Google Ads kampanyasından gelip 10 saniyeden kısa kalan ziyaretçiler" (UTM parametresiyle)
"JavaScript hatası alan oturumlar"

Her filtre için 10–15 kaydı izleyin ve tekrarlayan davranışı not edin. Tek bir kullanıcının garip davranışı bir bulgu değildir; birçok kullanıcıda aynı noktada aynı tıkanma bir bulgudur. Oynatıcıda hızlandırma ve "etkin olmayan süreyi atla" seçeneklerini kullanın. Clarity'nin yapay zekâ destekli özet özellikleri (Copilot) çok sayıda kaydın ortak noktalarını özetleyerek nereye bakacağınızı daraltabilir; ama son kararı birkaç kaydı kendiniz izleyerek verin.

Kayıtların saklama süresini de bilin: Microsoft'un açıklamasına göre oturum kayıtları kayıt tarihinden itibaren 30 gün tutulur; favori olarak işaretlediğiniz kayıtlar ve rastgele bir örneklem daha uzun süre saklanır, ısı haritalarına ise daha uzun bir süre boyunca erişilebilir. Önemli bir bulguyu gösteren kaydı favorilere ekleyin ya da paylaşım bağlantısını not edin.

Bulgudan aksiyona: tipik senaryolar

Projelerde Clarity kayıtlarında sık karşılaştığımız durumlar ve çözüm yönleri:

Ürün görseline tekrar tekrar dokunma: Kullanıcı görseli büyütmek istiyor. Görsele yakınlaştırma veya galeri özelliği ekleyin.
Altı çizili ama bağlantısız metne tıklama: Görsel stil, metnin bağlantı olduğunu düşündürüyor. Stili değiştirin ya da bağlantı ekleyin.
Formda bir alanda uzun duraklama ve terk: Alan gereksiz ya da ne istendiği belirsiz. Alanı kaldırın veya açıklama ekleyin. Form iyileştirme yöntemlerini dönüşüm oranı optimizasyonu rehberimizde topladık.
Mobilde menünün açılıp hemen kapanması: Menü öğeleri parmak için çok küçük ya da birbirine çok yakın.
Ödeme adımında JavaScript hatası: Belirli tarayıcı veya cihazlarda ödeme formu çalışmıyor. Geliştiriciye hata kaydı ve oturum bağlantısıyla iletin. Sepet ve ödeme akışındaki diğer kayıp nedenlerini sepet terk oranını düşürme yazımızda ele aldık.
Sayfa açılırken içeriğin kayması ve yanlış öğeye tıklama: Geç yüklenen görsel veya banner, düzenin kaymasına yol açıyor. Bu bir hız ve kararlılık sorunudur; Core Web Vitals rehberimiz çözüm yollarını anlatıyor.

Her bulguyu bir hipoteze dönüştürün, düzeltmeyi yapın ve değişiklik sonrasında aynı filtreyle kayıtları ve ısı haritasını tekrar kontrol edin.

Gizlilik, maskeleme ve çerez onayı

Oturum kaydı aracı kullanmak, ziyaretçilerin ekranda gördüğü ve yazdığı bilgilerin üçüncü bir tarafa gidebileceği anlamına gelir. Bu yüzden gizlilik ayarları kurulumun isteğe bağlı değil, zorunlu bir parçasıdır. Aşağıdaki bilgiler genel bilgilendirmedir, hukuki danışmanlık değildir.

Maskeleme modları

Sıkı (Strict): Sayfadaki tüm metin içeriği maskelenir. Sağlık, finans, hukuk gibi hassas veri içeren siteler ve kullanıcı paneli olan uygulamalar için uygundur.
Dengeli (Balanced, varsayılan): Yalnızca hassas olarak sınıflandırılan içerik maskelenir; rakamlar ve e-posta adresleri bu kapsamdadır.
Gevşek (Relaxed): Giriş alanları ve açılır listeler dışında içerik maskelenmez.

Hangi modu seçerseniz seçin form alanlarına yazılan içerik her zaman maskelenir. Bunun ötesinde, belirli öğeleri ayarlar ekranından CSS seçicisiyle ya da HTML'de data-clarity-mask="True" özniteliğiyle maskeleyebilir, data-clarity-unmask="true" ile maskesini kaldırabilirsiniz. Örneğin müşteri panelinde adres ve sipariş bilgisini gösteren bölüme maskeleme özniteliği eklemek, dengeli modu kullanırken bile bu verinin kayda girmemesini sağlar. Maskeleme değişiklikleri yalnızca yeni kayıtlara uygulanır ve etkinleşmesi bir saate kadar sürebilir. Hassas bilgiyi stil dosyalarının içinde barındırmayın; Clarity CSS içeriğini maskelemez.

Çerez onayı ve izin sinyali

Clarity, Avrupa Ekonomik Alanı, Birleşik Krallık ve İsviçre'den gelen ziyaretler için 31 Ekim 2025'ten bu yana geçerli bir izin sinyali bekliyor; bu bölgelerde onay olmadan çerez yazmıyor ve kayıt gibi bazı özellikler sınırlı çalışıyor. İzin sinyali Clarity'nin kendi izin API'si, bir çerez yönetim platformu entegrasyonu ya da Google izin modu üzerinden iletilebilir. Türkiye'deki ziyaretçiler için ise KVKK'nın çerez uygulamalarına ilişkin rehberi çerçevesinde, zorunlu olmayan analitik çerezlerin onaydan sonra çalıştırılması esas alınmalıdır. Onay arayüzü ve aydınlatma metni için KVKK uyumlu web sitesi kontrol listemize bakabilirsiniz; Clarity'yi çerez politikanızda ve aydınlatma metninizde adıyla belirtmeyi unutmayın.

Hangi sitelerde kullanılmamalı?

Microsoft, Clarity'nin 18 yaş altındaki kullanıcıları hedefleyen site ve uygulamalarda kullanılmaması gerektiğini belirtiyor. Çocuklara yönelik eğitim platformları veya öğrenci portalları için bu kısıtı dikkate alın. Ödeme formları, kimlik doğrulama ekranları ve sağlık bilgisi giren formlar gibi alanlarda kodu hiç yüklememek, maskelemeye güvenmekten daha güvenli bir yaklaşımdır.

Sık Sorulan Sorular

Microsoft Clarity gerçekten ücretsiz mi?

Evet. Microsoft, Clarity'yi ücretsiz bir hizmet olarak sunuyor ve trafik sınırı nedeniyle ücretli sürüme geçme zorunluluğu getirmiyor. Proje başına günlük kayıt sayısı gibi teknik sınırlar var, ancak küçük ve orta ölçekli siteler bunlara genellikle ulaşmaz.

Clarity siteyi yavaşlatır mı?

Kod eşzamansız yüklenir ve hafiftir, ama her üçüncü taraf kodu gibi tarayıcıya ek iş yükler. Yalnızca ihtiyaç duyulan sayfalarda yükleyin, GTM kullanıyorsanız kritik olmayan etiketleri geç tetikleyin ve PageSpeed Insights'ta üçüncü taraf kod etkisini düzenli kontrol edin.

Clarity, Google Analytics'in yerini tutar mı?

Hayır. Clarity sayfa içi davranışı gösterir; kanal bazlı edinme, gelir ve reklam dönüşüm verisi için GA4 gerekir. İkisini birlikte kullanıp entegrasyonla birbirine bağlamak en verimli yoldur.

Kayıtlarda müşterilerimin şifrelerini veya kart bilgilerini görebilir miyim?

Görmemelisiniz. Form alanlarına yazılan içerik tüm maskeleme modlarında maskelenir. Yine de ödeme ve kimlik doğrulama sayfalarında kodu yüklememek ve hassas bilgi gösteren bölümlere ek maskeleme uygulamak en doğru yaklaşımdır.

Mobil uygulamada da kullanılabilir mi?

Clarity'nin mobil uygulamalar için de SDK seçenekleri bulunuyor; kurulum ve desteklenen çatılar için Microsoft'un mobil dokümantasyonuna bakın. Web sitesi ile mobil uygulamayı ayrı projeler olarak izlemek raporları sadeleştirir.

Kayıtlar ne kadar süre saklanıyor?

Microsoft'un açıklamasına göre oturum kayıtları 30 gün saklanır; favoriye eklenen kayıtlar ve rastgele bir örneklem daha uzun süre tutulur. Isı haritalarına ise daha uzun bir dönem boyunca erişebilirsiniz.

Nereden başlamalı?

Clarity'yi kurmak bir saatinizi alır; asıl değer, onu düzenli ve soru odaklı kullanmaktan gelir. Kodu çerez onayına bağlayın, maskeleme modunu sitenizin içeriğine göre seçin, GA4 ile entegre edin ve her hafta en önemli sayfanızda rage click, dead click ve kaydırma derinliğine bakın. Bulduğunuz her tıkanmayı küçük bir düzeltmeye dönüştürdüğünüzde, reklam bütçesini artırmadan daha fazla ziyaretçiyi müşteriye çevirmeye başlarsınız.

Clarity ve GA4 kurulumu, izin yönetimi ve bulguların sitede uygulanması için dijital reklam ve analitik hizmetimizi inceleyebilir; sitenizin kayıtlarını birlikte yorumlamak için bizimle iletişime geçebilirsiniz.