Czym jest Microsoft Clarity i jak zintegrować go z Google Analytics 4

Ostatnio wyjaśniałem jak „zobaczyć” pełną ścieżkę użytkownika w GA4.

Biorę „zobaczyć” w cudzysłów, bo tak naprawdę widziałeś listę wszystkich zdarzeń i stron odwiedzonych przez użytkownika w Twojej witrynie. Nie widziałeś jednak samej nawigacji, czyli nagrania tego, co ta osoba robiła.

Ale to również da się uzyskać, tylko nie za pomocą GA4.

Jest kilka alternatyw i w tym artykule opowiem Ci o jednej z najlepszych: Microsoft Clarity.

Tutaj wyjaśniam wszystko na wideo:

A poniżej masz wersję tekstową.

Czym jest Microsoft Clarity?

To narzędzie Microsoft do analizy zachowania użytkowników .

Oznacza to, że pomaga zrozumieć interakcje użytkownika z Twoją witryną, więc można powiedzieć, że jest niemal bardziej narzędziem UX niż narzędziem analityki cyfrowej.

Jest bardzo dobre, łatwe do wdrożenia i używania, a do tego bezpłatne.

Krótko mówiąc, ma wszystko.

Nie zastępuje jednak GA4, lecz go uzupełnia, ponieważ oferuje funkcje, których GA4 nie ma.

Do czego służy MS Clarity

Tak, właśnie wyjaśniłem Ci, czym jest Clarity i jakie ma funkcje, ale do czego właściwie służy?

Pozwala zobaczyć i przejrzeć to, co użytkownicy robili w Twojej witrynie.

Możesz oglądać to zbiorczo, za pomocą map cieplnych albo pojedynczo, korzystając z nagrania sesji każdego użytkownika.

Funkcje

Jak mówiłem, narzędzie ma dwie główne funkcje, o których już wspomniałem.

Opowiem trochę więcej o każdej z nich.

Mapy cieplne

To wizualizacje konkretnej strony witryny, na których przede wszystkim widzimy:

• Elementy najczęściej klikane przez użytkowników.
• Części strony przyciągające najwięcej uwagi.
• Głębokość scrollowania (jak daleko w dół docierają użytkownicy).

Myślę, że oczywiste jest, jak bardzo przydaje się to w przypadku menu (które linki są klikane najczęściej), elementów nieklikalnych, które użytkownik uważa za klikalne, albo sprawdzania, co wzbudza zainteresowanie (obraz? Copy? Konkretny produkt?).

Kliknięcia linków można bez problemu mierzyć w GA4, ale do pozostałych dwóch rzeczy potrzebujesz narzędzia takiego jak to.

Aby zobaczyć mapę cieplną, wystarczy kliknąć ikonę płomienia przy dowolnym elemencie:

Możesz też przejść do odpowiedniej sekcji w górnym menu i filtrować stamtąd:

Nagrywanie sesji

Koncepcja jest podobna do raportu Eksplorator użytkowników w GA4, o którym mówiłem ostatnio, tylko teraz widzisz samą sesję, a nie listę zdarzeń:

Patrząc na to, jak użytkownik wchodzi w interakcję z Twoją stroną, możesz od razu sprawdzić, czy robi to, czego chcesz / oczekujesz, czy nie.

A jeśli nie, możesz zastanowić się dlaczego. I w razie potrzeby zmienić witrynę.

Uważaj na nagrania sesji, bo wciągają. Obejrzysz dwa i nagle okazuje się, że od pół godziny oglądasz film za filmem jak na TikTok.

Aby zobaczyć nagrania, masz te same dwie opcje co wcześniej:

• Kliknij ikonę kamery przy dowolnym elemencie na wykresach.
• Przejdź do odpowiedniej sekcji menu.

Co więcej, jest coś, na co pozwala bardzo niewiele narzędzi: podgląd w czasie rzeczywistym tego, co użytkownik robi teraz w Twojej witrynie:

Po lewej moja bieżąca sesja w witrynie. Po prawej to, co robię (z opóźnieniem około jednej sekundy)

Rewelacja.

Zwłaszcza gdy IT wykrywa coś dziwnego, a Ty idziesz i pokazujesz im to w czasie rzeczywistym XD.

Główne przypadki użycia

Dobrze, już wiesz, co potrafi, ale kiedy warto z niego korzystać i w jakim celu?

Moim zdaniem jest kilka naprawdę przydatnych przypadków użycia. Oto one.

Checkout

Perełka.

Jeśli masz ecommerce albo sprzedajesz usługę wymagającą dość długich formularzy (telekomunikacja, bankowość…), polecam zrobić dwie rzeczy:

1. Zacznij oglądać nagrania tej strony (uwzględniając użytkowników urządzeń mobilnych i desktopowych). Przeanalizuj główne problemy użytkowników. Zaproponuj ulepszenia.
2. Wylicz współczynniki konwersji checkoutu (użytkownicy kupujący / użytkownicy wchodzący) w narzędziu takim jak GA4. Dzięki temu sprawdzisz, czy proponowane ulepszenia rzeczywiście są ulepszeniami.

Opcjonalnie, i odrobinę bardziej złożenie, możesz wysyłać zdarzenia błędów za każdym razem, gdy błąd pojawi się w polu checkoutu. W ten sposób określisz, które pola są niejasne dla użytkowników.

Główne landing pages / Strony sprzedażowe

Te strony są ważne z kilku powodów:

• Landing pages, ponieważ są pierwszym kontaktem użytkownika z Twoją witryną. Jeśli nie działają i użytkownicy odbijają, każda inwestycja reklamowa jest praktycznie wyrzucaniem pieniędzy.
• Strony sprzedażowe, ponieważ to one muszą przekonać użytkownika, żeby wyciągnął kartę. Albo przynajmniej się zarejestrował.

Mając to na uwadze, w obu przypadkach znów sugeruję dwie rzeczy, tym razem obie w tym narzędziu:

1. Obserwuj nagrania tych stron. Tak samo jak w checkout.
2. Sprawdź mapy cieplne: czy użytkownicy klikają tam, gdzie oczekujesz? Patrzą tam, gdzie chcesz? Jeśli nie, dlaczego? Co możesz zmienić?

Obserwuj, analizuj, wprowadzaj zmiany i mierz —na przykład bounce i współczynniki konwersji—.

Nowe funkcje lub ważne zmiany

Gdy wdrażasz ważną zmianę w witrynie albo uruchamiasz coś nowego, nie masz pojęcia, jak to zadziała.

Zwłaszcza jeśli nie zrobiłeś testów z użytkownikami, co zwykle jest normą.

Dlatego po kilku dniach najlepsze, co możesz zrobić —oprócz porównania wyników z celami— to sprawdzić mapy cieplne i nagrania użytkowników tej nowej sekcji. Szczególnie jeśli nie działa zgodnie z oczekiwaniami.

Dzięki temu sprawdzisz na przykład:

• Czy ruch w ogóle dociera.
• Czy ruch dociera, ale użytkownicy nie robią tego, czego oczekujesz.
• Czy użytkownik czyta i scrolluje.
• Możliwe błędy.

Innymi słowy, zawęzisz przyczyny, dla których coś nie działa tak, jak oczekiwałeś.

Z Microsoft Clarity bardzo łatwo przeprowadzić tego typu analizę.

Przy okazji, jeśli podoba Ci się to, co czytasz, ale nadal nie zdecydowałeś się wdrożyć go w swojej witrynie, możesz go wypróbować bez instalowania tutaj.

Strony z błędami

Być może masz już wdrożony pomiar błędów w GA4. Najczęściej są to błędy JavaScript albo zdarzenia błędów w formularzach.

W takim razie musisz sprawdzić w GA4, na których stronach występują te błędy i czy dotyczą konkretnego typu przeglądarki / urządzenia.

Po tym następnym krokiem jest próba samodzielnego odtworzenia problemu.

Jeśli się nie uda, trzeba będzie obejrzeć nagrania użytkowników z tego typu urządzeniem lub przeglądarką, żeby zobaczyć, co robią i co powoduje błąd witryny.

Gdy już znajdziesz błąd, zostaje łatwa część: naprawić go. XD

Menu

Możesz tworzyć zdarzenia do mierzenia kliknięć każdego elementu menu w GA4, ale dużo szybciej jest użyć mapy cieplnej.

W ten sposób szybko zobaczysz, które sekcje najbardziej interesują użytkowników.

Świetne dla każdej witryny i idealne do analizy linków do różnych kategorii w ecommerce.

Filtry w ecommerce

A skoro mowa o ecommerce, śledzenie użycia filtrów w GA4 nie jest szczególnie popularne. Dlatego mapa cieplna, choć często nie pokaże, jakie opcje wybrał użytkownik, wskaże, które filtry są używane najczęściej.

Świetne, gdy masz dużo filtrów i chcesz podzielić je na dwa poziomy: zwykłe —na pierwszym poziomie— i zaawansowane —ukryte za kliknięciem linku—.

Zalety Microsoft Clarity

Już wiesz, co możesz zacząć mierzyć tym narzędziem, co może Ci dać i dlaczego polecam zacząć jak najszybciej.

A jeśli nadal Cię nie przekonałem, oto zalety, które uważam za najważniejsze:

• Jest bardzo łatwe w instalacji i użyciu. Jest potężne. I bezpłatne.
• Nie wpływa na wydajność Twojej witryny.
• Oferuje nielimitowane nagrania użytkowników i mapy cieplne.
• Nie ma limitów ruchu, więc nadaje się do każdego rodzaju projektu.
• Możesz dodać je do nieograniczonej liczby projektów.
• Nie ma próbkowania danych. Oznacza to, że pokazuje wszystkie nagrania użytkowników, a mapy cieplne bazują na niepróbkowanych danych.
• Spełnia wymogi GDPR i CCPA.
• Nie musisz tworzyć mapy dla każdej strony, którą chcesz śledzić. Robi to automatycznie.
• Możesz analizować dwie wersje tej samej strony, porównując ich mapy cieplne obok siebie.
• Możesz stosować filtry do nagrań sesji (kraje, strony…). Dzięki temu zawężasz dokładnie to, co chcesz zobaczyć.
• Możesz też zintegrować Microsoft Clarity z GA4. Po integracji możesz oglądać dane GA4 w Clarity. Zaraz wyjaśnię jak.
• Na koniec, choć korzystam z tego rzadziej, niż powinienem, możesz zadawać AI Microsoft pytania o dane Clarity. Spróbuje odpowiedzieć i wyciągnąć poprawne wnioski. Dzięki temu nie musisz oglądać wszystkich sesji, co uważam jednocześnie za plus (oszczędza czas) i minus (stracisz szczegóły):

Jak wdrożyć Microsoft Clarity w swojej witrynie

Aby zacząć korzystać z narzędzia, musisz zrobić tylko dwie rzeczy.

Krok 1. Utworzyć konto

Najpierw utwórz konto tutaj:

https://clarity.microsoft.com

Możesz utworzyć je bezpośrednio za pomocą konta Google lub Microsoft.

Krok 2. Dodać kod do witryny

Masz trzy alternatywy, wszystkie dość proste.

#1. Bezpośrednia integracja z niektórymi (wieloma) CMS:

Wiesz, typowy plugin instalowany na przykład w WordPress, w którym wystarczy podać ID konta i gotowe.

Proste, ale jest jeden problem: nie masz łatwej kontroli nad cookies i możesz ustawić cookie użytkownikowi, zanim zaakceptuje banner.

Tak, da się to zrobić, wyłączając cookies w ustawieniach narzędzia i dodając JavaScript, ale nie dla każdego jest to proste.

#2. Za pomocą GTM

Dlatego wolę tę drugą opcję, żeby kontrolować moment ustawiania cookies, na przykład przez Consent Mode.

I oczywiście Google Tag Manager ma szablon do tego:

Właściwie jest jeszcze kilka szablonów, ale ten pokazany wyżej jest oficjalnym szablonem Microsoft.

Jeśli nie lubisz korzystać z szablonów, możesz też utworzyć tag typu HTML i wkleić wcześniejszy kod.

#3. Dodać kod ręcznie

Albo edytując bezpośrednio pliki witryny, albo za pomocą funkcji motywu CMS lub pluginu pozwalającego dodać kod.

Osobiście najmniej lubię tę opcję. Ale to też opcja.

Następne kroki

Gdy zainstalujesz narzędzie w witrynie na jeden z trzech sposobów, Clarity zacznie zbierać dane z całej witryny, chyba że celowo ustawisz inaczej (na przykład wybierzesz tylko niektóre strony w GTM).

I możesz zacząć obserwować sesje użytkowników oraz mapy cieplne.

Prościej się nie da.

Alternatywy dla Clarity

Dobrze, skoro już znasz narzędzie, wiesz, co daje i jak je wdrożyć, być może z jakiegoś powodu nadal Ci się nie podoba.

Jeśli tak, oto trzy narzędzia, których najczęściej używałem w różnych projektach.

Hotjar

Bardzo dobre, z całkiem sensownym darmowym planem. Ale oczywiście nie prawie nielimitowanym jak Clarity. Dlatego stało się moim drugim wyborem.

Oferuje za to dodatkowe funkcje, na przykład możliwość proszenia użytkowników o feedback przez mały formularz osadzony w witrynie.

Yandex Metrica

Rosyjska wersja Google oferowała platformę analityki cyfrowej niemal tak potężną jak jej amerykański rywal. Oprócz funkcji podobnych do Google Analytics oferowała w darmowej wersji nagrania i mapy cieplne.

Nie było niczym dziwnym spotkać witryny korzystające z tego narzędzia równolegle z rozwiązaniem Google.

Jednak użyta technologia zaczęła im szkodzić. W coraz większej liczbie projektów nie dało się go wdrożyć lub było to trudne, więc stopniowo traciło znaczenie.

CrazyEgg

Pierwsze narzędzie, którego używałem, więc mam do niego szczególny sentyment.

W swoim czasie było bardzo top, bo plan był dość tani. Skupia się na mapach cieplnych i nie ma (w styczniu 2024) opcji nagrań.

Oprócz tych trzech istnieje mnóstwo innych alternatyw. Drogich i tanich, z większą i mniejszą liczbą funkcji. Jeśli więc nie podoba Ci się to, co oferuje Microsoft Clarity (naprawdę?), rozejrzyj się trochę w sieci.

Bonus: jak używać Microsoft Clarity z Google Analytics 4

Nie jest to szczególnie reklamowane, dlatego możesz o tym nie wiedzieć, ale Clarity i GA4 można ze sobą połączyć.

Jak połączyć Microsoft Clarity z GA4

Aby to zrobić —zakładając, że GA4 jest już wdrożony w Twojej witrynie— musisz zalogować się do konta Clarity i przejść do Ustawienia > Ustawienia i kliknąć przycisk Rozpocznij:

System poprosi Cię o zalogowanie się na konto Google, z którego masz dostęp do GA4:

O przyznanie wymaganych uprawnień:

I na koniec o wybranie usługi GA4, z którą chcesz go połączyć:

Po wykonaniu tego oba konta będą połączone:

I będziesz mógł oglądać dane GA4 wewnątrz Clarity:

Brakuje jeszcze ostatniego kroku: utworzymy niestandardowy wymiar w GA4 w ten sposób (jeśli Clarity nie utworzył go automatycznie, co czasem się zdarza):

Ważne, aby był typu zdarzenie a parametr miał wartość “claritydimension”. Nazwę wymiaru możesz wybrać dowolnie.

Zalety połączenia GA4 i Clarity

Dobrze, gdy już je połączysz, będziesz chciał wiedzieć, jakie daje to korzyści.

Poza wspomnianą wcześniej korzyścią —oglądaniem danych GA4 w Clarity i łatwiejszym filtrowaniem segmentów użytkowników do analizy; wystarczy kliknąć dowolny element wykresu, aby poniżej pojawiła się opcja wyświetlenia odpowiedniej mapy cieplnej lub nagrań— uważam, że większą zaletą jest odwrotna sytuacja: oglądanie danych Clarity w GA4.

Właśnie dlatego utworzyliśmy niestandardowy wymiar w GA4.

Możesz używać tego wymiaru w raportach standardowych lub Eksploracjach:

Pokazuje on URL Clarity, który zawiera odpowiedni segment użytkowników Analytics.

Oznacza to, że możesz zobaczyć pełny journey interesującego Cię użytkownika w witrynie:

• Tego, który złożył ogromne zamówienie.
• Albo tego drugiego, który mówił, że coś nie działa.

Nieźle, co?

Ważne, aby zobaczyć URL-e, musisz posortować tabelę według tego wymiaru:

Inną drobną niedogodnością jest to, że URL nie jest linkiem, więc musisz go skopiować i wkleić samodzielnie do karty przeglądarki. Google nie miałby problemu, żeby to poprawić, chociaż nie wiem, czy specjalnie im na tym zależy…

Podsumowanie

To wszystko, co chciałem powiedzieć o Microsoft Clarity.

W tych ponad 2500 słowach skupiłem się na najważniejszych rzeczach, które chciałem Ci przekazać: czym jest Clarity, jakie ma zalety, kluczowe przypadki użycia i sposoby wdrożenia go w projekcie.

Nie uwzględniłem kilku bardziej zaawansowanych opcji, bo szczerze mówiąc, nie uważam tego za konieczne. To, co Ci wyjaśniłem, spokojnie wystarczy do zabawy z nim przez długi czas.

Bo rozumiem, że już go wdrożyłeś, prawda?

Jeśli nie, najwyższy czas.

Jest użyteczne, darmowe i potężne. Czego chcieć więcej?