A/B testing και heatmap στο eshop: Microsoft Clarity και GA4

Με λίγα λόγια: το Microsoft Clarity δείχνει με heatmap και καταγραφές συνεδριών πού κάνουν κλικ και μέχρι πού κάνουν scroll οι πελάτες του eshop σου, και το A/B testing αποδεικνύει αν μια αλλαγή ανεβάζει τις παραγγελίες. Ξεκίνα από το βήμα της χοάνης όπου χάνεις τους περισσότερους. Για άνοδο του ποσοστού μετατροπής από 2% σε 2,4% χρειάζεσαι περίπου 21.100 επισκέψεις ανά εκδοχή.

Το άρθρο είναι από την ομάδα του CloudCart, της πλατφόρμας eshop από τη Βουλγαρία που δουλεύει και στην Ελλάδα. Τα όρια του Clarity είναι από το Microsoft Learn και οι λειτουργίες του CloudCart από την τεκμηρίωση της πλατφόρμας.

Τι είναι το Microsoft Clarity και τι δείχνει το heatmap

Το Microsoft Clarity είναι εργαλείο ανάλυσης της συμπεριφοράς των επισκεπτών: καταγράφει τις συνεδρίες, φτιάχνει heatmaps και σημειώνει μόνο του τις στιγμές όπου ο πελάτης δυσκολεύτηκε. Λειτουργεί χωρίς συνδρομή και χωρίς όριο επισκεψιμότητας, και καταγράφει όλες τις επισκέψεις, όχι δείγμα τους (Microsoft Clarity FAQ).

Heatmap (θερμικός χάρτης) είναι μια εικόνα της σελίδας όπου τα σημεία με πολλά κλικ ή μεγάλη παραμονή χρωματίζονται με ζεστά χρώματα. Για ένα eshop οι πιο χρήσιμοι είναι ο χάρτης των κλικ και ο χάρτης του scroll, που δείχνει μέχρι ποιο ύψος της σελίδας φτάνει ο κόσμος. Η καταγραφή συνεδρίας (session recording) είναι η αναπαραγωγή μιας επίσκεψης: οι κινήσεις, τα κλικ και το scroll ενός πελάτη από την είσοδο μέχρι την έξοδο.

Το Clarity σημειώνει αυτόματα τρία σήματα που σε ένα eshop σχεδόν πάντα δείχνουν πρόβλημα:

• Εκνευρισμένο κλικ (rage click). Ο πελάτης πατά πολλές φορές γρήγορα στο ίδιο σημείο. Συνήθως το κουμπί αργεί ή δεν αντιδρά.
• Νεκρό κλικ (dead click). Ο πελάτης πατά σε κάτι που μοιάζει πατήσιμο και η σελίδα δεν απαντά. Π.χ. φωτογραφία που δεν μεγαλώνει ή η λέξη «μεταφορικά» που δεν είναι σύνδεσμος.
• Υπερβολικό scroll. Ο πελάτης κατεβαίνει τη σελίδα πολύ πιο γρήγορα από κανονικό διάβασμα, γιατί ψάχνει κάτι και δεν το βρίσκει.

Τα Analytics του καταστήματος λένε σε ποιο βήμα χάνεις τον πελάτη, το Clarity δείχνει γιατί. Τους αριθμούς της χοάνης και τι θεωρείται καλό ποσοστό θα τα βρεις στον οδηγό για το ποσοστό μετατροπής του eshop.

Τα όρια του Clarity που καλό είναι να ξέρεις

Τι	Όριο
Καταγραφές συνεδριών	έως 100.000 συνεδρίες ανά project την ημέρα
Διατήρηση καταγραφών	30 ημέρες· οι αγαπημένες και ένα τυχαίο δείγμα έως 9 μήνες
Heatmap	έως 100.000 προβολές σελίδας ανά χάρτη· διαθέσιμο έως 9 μήνες
Αριθμός sites και μελών ομάδας	χωρίς όριο
Πεδία εισαγωγής (email, τηλέφωνο, διεύθυνση)	πάντα κρυμμένα (masked), δεν ανεβαίνουν στο Clarity

Επειδή οι καταγραφές κρατιούνται 30 ημέρες, σημείωσε ως αγαπημένες τις συνεδρίες που θα χρειαστείς για σύγκριση μετά το τεστ.

Πώς βάζεις το Microsoft Clarity στο CloudCart μέσω Google Tag Manager

Ο πιο ασφαλής τρόπος να βάλεις το Clarity στο CloudCart είναι η εφαρμογή Google Tag Manager: ο κώδικας διαχειρίζεται από ένα σημείο και η συγκατάθεση του πελάτη φτάνει μέχρι αυτόν. Η εφαρμογή περιλαμβάνεται σε κάθε πακέτο, όπως φαίνεται στη σελίδα με τις τιμές. Σε παρένθεση είναι το σημείο:

1. Project στο Clarity (clarity.microsoft.com). Συνδέσου και πρόσθεσε νέο project με το domain του καταστήματος. Το ID του project είναι στη διεύθυνση του browser: clarity.microsoft.com/projects/view/ID/.
2. Container στο GTM (tagmanager.google.com). Αν δεν έχεις ήδη, φτιάξε container τύπου «Web» για το domain. Αντίγραψε το ID της μορφής GTM-XXXXXXX.
3. Η εφαρμογή στο CloudCart (πίνακας διαχείρισης). Εφαρμογές → Google Tag Manager → επικόλλησε το GTM-ID και αποθήκευσε. Το CloudCart βάζει τον κώδικα του container σε κάθε σελίδα της βιτρίνας. Ολόκληρη η ρύθμιση, μαζί με το GA4 και το Data Layer, είναι στον οδηγό Google Tag Manager και GA4 για eshop.
4. Το tag του Clarity (GTM). Υπάρχουν δύο τρόποι. Ο γρήγορος: στο Clarity άνοιξε Settings → Setup → Google Tag Manager → Finish setup, συνδέσου με τον λογαριασμό σου στο Google, διάλεξε λογαριασμό και container και πάτησε Create and publish. Ο χειροκίνητος: στο GTM πάτησε New Tag, από το Community Template Library διάλεξε το πρότυπο Microsoft Clarity - Official, γράψε το ID του project και όρισε trigger All pages.
5. Δημοσίευση (GTM). Πάτησε Submit → Publish και δώσε στην έκδοση καθαρό όνομα, για παράδειγμα «Clarity».
6. Έλεγχος (βιτρίνα). Άνοιξε το κατάστημα σε νέο παράθυρο και δες δύο τρεις σελίδες. Οι καταγραφές εμφανίζονται σχεδόν αμέσως.

Τα βήματα ακολουθούν τον οδηγό Microsoft Learn: How to install Clarity on Google Tag Manager. Ο κώδικας μπαίνει και στο Σχεδιασμός → Custom CSS/JS, όμως εκεί δεν υπάρχει έλεγχος και ένα λάθος script σταματά αμέσως τη βιτρίνα, οπότε προτίμησε το GTM.

Χρειάζεται συγκατάθεση για το Microsoft Clarity; GDPR, cookies και masking

Ναι, για επισκέπτες από την Ελλάδα και την υπόλοιπη ΕΕ το Clarity ζητά σήμα συγκατάθεσης. Από τις 31/10/2025 το Clarity εφαρμόζει την απαίτηση για επισκέψεις από τον Ευρωπαϊκό Οικονομικό Χώρο, το Ηνωμένο Βασίλειο και την Ελβετία: για αυτούς το Consent Mode είναι ενεργό από προεπιλογή και το Clarity περιμένει έγκυρο σήμα πριν γράψει cookies (Microsoft Learn: Consent Mode στο Clarity).

Τι σημαίνει αυτό στην πράξη: χωρίς συγκατάθεση το Clarity δεν γράφει τα cookies _clck και _clsk, και το _clsk είναι αυτό που ενώνει τις σελίδες μιας επίσκεψης σε μία καταγραφή. Αν ο πελάτης ανοίξει ένα προϊόν και μετά το καλάθι, το Clarity βλέπει δύο ξεχωριστές συνεδρίες. Οι προβολές και τα βασικά κλικ μετρώνται, όμως η πλήρης διαδρομή μέχρι την παραγγελία λείπει.

Τι πρέπει να έχει το cookie banner και η πολιτική του καταστήματος σύμφωνα με τον ν. 3471/2006 και την ΑΠΔΠΧ, το εξηγεί ο οδηγός για τα cookies και το GDPR στο eshop.

Πώς περνάς τη συγκατάθεση στο Clarity μέσα από το CloudCart

Το Clarity διαβάζει τα σήματα του Google Consent Mode (ad_storage και analytics_storage) χωρίς επιπλέον ρύθμιση (Microsoft Learn: Google Consent Mode στο Clarity). Η εφαρμογή GDPR του CloudCart στέλνει ακριβώς αυτά τα σήματα, οπότε η συγκατάθεση φτάνει στο Clarity χωρίς κώδικα:

1. Η εφαρμογή GDPR (πίνακας διαχείρισης). Εφαρμογές → GDPR, εγκατάστησέ την και στην ενότητα Cookies, στο μενού Cookie Consent Mode, διάλεξε Cookie bar (μπάρα) ή Cookie wall (τοίχο).
2. Η ομάδα Google Consent Mode (πίνακας διαχείρισης). Στην ίδια ενότητα ενεργοποίησε την ομάδα Google Consent Mode. Από προεπιλογή είναι ανενεργή και ενεργοποιείται με συνδρομή στην εφαρμογή GDPR. Τότε η βιτρίνα στέλνει τα σήματα συγκατάθεσης πριν φορτώσει το Google Tag Manager.
3. Τα cookies του Clarity στην πολιτική (πίνακας διαχείρισης). Το CloudCart δεν σαρώνει μόνο του τα cookies. Στην ομάδα Performance Cookies (τα cookies στατιστικής) πρόσθεσε cookie με όνομα «Microsoft Clarity», σύντομη περιγραφή («καταγραφές συνεδριών και heatmaps») και τα τεχνικά ονόματα _clck, _clsk. Έτσι ο πελάτης βλέπει για τι δίνει συγκατάθεση.
4. Τα cookies από προεπιλογή (Clarity). Στο project του Clarity άνοιξε Settings → Setup και απενεργοποίησε τα cookies από προεπιλογή. Έτσι το Clarity περιμένει συγκατάθεση από κάθε επισκέπτη, όχι μόνο από την ΕΕ.
5. Έλεγχος (βιτρίνα). Καθάρισε τα cookies, άνοιξε το κατάστημα και πάτησε άρνηση. Στα εργαλεία του browser δεν πρέπει να υπάρχουν cookies _clck και _clsk. Μετά το «Αποδοχή» εμφανίζονται.

Το masking: τι δεν καταγράφει το Clarity

Το Clarity κρύβει το ευαίσθητο περιεχόμενο ήδη μέσα στον browser, και τα κρυμμένα δεδομένα δεν φτάνουν στους διακομιστές του. Η προεπιλεγμένη λειτουργία είναι Balanced: κρύβει τους αριθμούς και τις διευθύνσεις email μέσα στο κείμενο. Τα πεδία εισαγωγής και τα αναπτυσσόμενα μενού είναι κρυμμένα σε όλες τις λειτουργίες (Microsoft Learn: Masking content).

Για ένα eshop η Balanced είναι καλή αρχή. Αν η σελίδα ευχαριστίας ή ο λογαριασμός του πελάτη δείχνουν όνομα και διεύθυνση ως απλό κείμενο, πρόσθεσέ τα στο Settings → Masking → Mask by element με τον CSS selector του μπλοκ.

Πώς διαβάζεις τα heatmaps και τις καταγραφές για να βρεις το πρόβλημα

Το heatmap δείχνει πού είναι το πρόβλημα σε μια σελίδα και η καταγραφή δείχνει γιατί. Δούλεψε με αυτή τη σειρά:

1. Βρες το βήμα με τη μεγαλύτερη απώλεια. Στο CloudCart άνοιξε τα Analytics και στο Conversion Funnel σύγκρινε Desktop και Mobile: Καλάθι → Έναρξη checkout → Παραγγελίες. Το βήμα που χάνει τους περισσότερους είναι το πρώτο που ελέγχεις. Οι αναφορές περιγράφονται στη σελίδα Analytics του CloudCart.
2. Άνοιξε το heatmap ακριβώς αυτής της σελίδας. Για το προϊόν δες τον χάρτη scroll στο κινητό: τι ποσοστό φτάνει μέχρι το κουμπί αγοράς. Για το καλάθι δες τα κλικ στα μεταφορικά, στην επιλογή courier και στο εκπτωτικό κουπόνι.
3. Φίλτραρε τις καταγραφές. Διάλεξε συνεδρίες που πέρασαν από το καλάθι χωρίς παραγγελία, από κινητό, με εκνευρισμένα ή νεκρά κλικ. Δες 20 με 30 στη σειρά.
4. Σημείωσε ό,τι επαναλαμβάνεται. Για παράδειγμα: πεδίο που βγάζει σφάλμα, κουμπί κάτω από το ορατό μέρος της οθόνης, μεταφορικά που εμφανίζονται μόνο στο τελευταίο βήμα.
5. Γράψε υπόθεση. Με τη μορφή «Αν [αλλαγή], τότε [δείκτης] θα ανέβει, επειδή [παρατήρηση από τις καταγραφές]».

Αν οι καταγραφές δείχνουν αργή φόρτωση (άδεια οθόνη, φωτογραφίες που εμφανίζονται αργά), διόρθωσε πρώτα την ταχύτητα: τα βήματα είναι στον οδηγό για την ταχύτητα και τα Core Web Vitals του eshop.

Τι να δοκιμάσεις πρώτα στο eshop

Δοκίμασε πρώτα την αλλαγή στο βήμα με τη μεγαλύτερη απώλεια, που αφορά τους περισσότερους επισκέπτες και γίνεται πιο γρήγορα. Ο πίνακας συνδέει το τυπικό σήμα του Clarity με μια υπόθεση και με το σημείο του CloudCart όπου κάνεις την αλλαγή:

Τι βλέπεις στο Clarity	Υπόθεση	Τι αλλάζεις στο CloudCart	Τι μετράς
Εκνευρισμένα κλικ στα μεταφορικά μέσα στο καλάθι	Ο πελάτης δεν ξέρει πόσα θα πληρώσει και πόσο του λείπει για δωρεάν μεταφορικά	Όριο για δωρεάν μεταφορικά και Bump Cart, που δείχνει πόσο λείπει μέχρι το όριο	Καλάθι → έναρξη checkout· μέση αξία παραγγελίας
Στο κινητό λιγότεροι από 50% φτάνουν στο κουμπί αγοράς	Το σημαντικό είναι κάτω από το ορατό μέρος της οθόνης	Η διάταξη της σελίδας προϊόντος στο πρότυπο· πιο σύντομη περιγραφή στην κορυφή	Προσθήκες στο καλάθι ανά 100 επισκέψεις προϊόντος
Νεκρά κλικ στη φωτογραφία του προϊόντος	Ο κόσμος θέλει να δει τη λεπτομέρεια	Περισσότερες και μεγαλύτερες φωτογραφίες στον κατάλογο	Προσθήκες στο καλάθι
Εγκατάλειψη στο βήμα της πληρωμής	Λείπει ο τρόπος πληρωμής που προτιμά ο πελάτης	Κάρτα, Apple Pay και Google Pay με το CloudCart Pay, κουμπί express στη σελίδα προϊόντος· αντικαταβολή δίπλα στην κάρτα	Έναρξη checkout → παραγγελία
Εγκατάλειψη στην επιλογή αποστολής	Ο πελάτης θέλει να παραλάβει κοντά του, όχι στην πόρτα	Παραλαβή από κατάστημα ACS, ACS Smartpoint και θυρίδα BOX NOW μέσα στο checkout	Έναρξη checkout → παραγγελία
Υπερβολικό scroll σε κατηγορία και αναζήτηση χωρίς κλικ	Ο πελάτης δεν βρίσκει το προϊόν	Τα φίλτρα της κατηγορίας· η αναφορά του Aura Search για αναζητήσεις χωρίς αποτέλεσμα	Αναζητήσεις με κλικ· παραγγελίες μετά από αναζήτηση
Εγκαταλελειμμένο καλάθι αφού γράψει το email	Ο πελάτης σταματά για τώρα, όχι για πάντα	Η ώρα αποστολής του email για εγκαταλελειμμένο καλάθι και το κουπόνι μέσα σε αυτό	Καλάθια που ανακτήθηκαν

Με την ACS ο πελάτης βλέπει την τιμή της αποστολής για πόρτα ή κατάστημα μέσα στο checkout. Πώς διαλέγεις το όριο με βάση τη μέση παραγγελία και τις τιμές των courier, το εξηγεί ο οδηγός για το όριο για δωρεάν μεταφορικά. Τα βήματα της παραγγελίας είναι στη σελίδα Καλάθι και checkout και τα email στη σελίδα εγκαταλελειμμένα καλάθια.

Πόσες επισκέψεις χρειάζεται ένα A/B test

Το A/B test (A/B testing) είναι σύγκριση δύο εκδοχών μιας σελίδας, που εμφανίζονται ταυτόχρονα σε δύο τυχαίες ομάδες επισκεπτών. Οι επισκέψεις που χρειάζεσαι εξαρτώνται από το σημερινό ποσοστό μετατροπής και από το πόσο μεγάλη διαφορά θέλεις να εντοπίσεις: όσο μικρότερη η αλλαγή, τόσο περισσότερη επισκεψιμότητα.

Σημερινό ποσοστό μετατροπής	Διαφορά +20%	Διαφορά +30%	Διαφορά +50%
1% (παραγγελίες από επισκέψεις)	42.700	19.800	7.750
2%	21.100	9.800	3.830
3%	13.900	6.460	2.520
10% (προσθήκη στο καλάθι)	3.840	1.770	690
30% (καλάθι → παραγγελία)	960	440	160

Οι αριθμοί είναι επισκέψεις για κάθε μία από τις δύο εκδοχές, υπολογισμένες με τον τυπικό τύπο σύγκρισης δύο ποσοστών, με επίπεδο εμπιστοσύνης 95% και ισχύ 80%. Διαφορά +20% σε ποσοστό 2% σημαίνει άνοδο στο 2,4%.

Πώς χρησιμοποιείς τον πίνακα

• Υπολόγισε τη διάρκεια. Επισκέψεις ανά εκδοχή × 2, διά τις ημερήσιες επισκέψεις της σελίδας. Ένα eshop με 1.000 επισκέψεις την ημέρα και ποσοστό 2% χρειάζεται περίπου 42 ημέρες για να δει +20%.
• Μέτρα το κοντινότερο βήμα. Αν δοκιμάζεις τη σελίδα προϊόντος, μέτρα την προσθήκη στο καλάθι (γύρω στο 10%) και όχι την παραγγελία από όλες τις επισκέψεις. Η επισκεψιμότητα που χρειάζεσαι πέφτει περίπου 5 φορές.
• Δοκίμαζε τολμηρές αλλαγές. Ένα μικρό eshop δεν μπορεί να αποδείξει +5%. Μπορεί να αποδείξει +30% έως +50%, και τέτοια διαφορά τη δίνουν αλλαγές στα μεταφορικά, στην πληρωμή και στην πρώτη οθόνη του κινητού. Το χρώμα του κουμπιού σπάνια τη δίνει.

Αν η επισκεψιμότητα δεν φτάνει για κανονικό A/B test, σύγκρινε διαδοχικά: 4 εβδομάδες πριν και 4 εβδομάδες μετά την αλλαγή, στα Analytics, χωριστά για κινητό και υπολογιστή, με το «Compare: Previous period» όπου το περιλαμβάνει το πακέτο σου. Η μέθοδος περιγράφεται αναλυτικά στον οδηγό για το ποσοστό μετατροπής. Αν η κίνηση έρχεται από διαφημίσεις ή από το Skroutz, σύγκρινε τις ίδιες πηγές πριν και μετά, ώστε μια νέα καμπάνια να μη μοιάζει με επιτυχία της αλλαγής. Πώς σημαδεύεις τις πηγές, το δείχνει ο οδηγός για τις παραμέτρους UTM και την απόδοση.

Πώς κάνεις A/B test με το GA4 μετά το τέλος του Google Optimize

Το GA4 μετρά το αποτέλεσμα του A/B test, όμως δεν χωρίζει τους επισκέπτες σε ομάδες. Το Google Optimize, το εργαλείο της Google για A/B tests, σταμάτησε στις 30/09/2023 και όλα τα ενεργά πειράματα έληξαν τότε. Η Google παραπέμπει σε εξωτερικά εργαλεία που συνδέονται με το Google Analytics, όπως τα AB Tasty, Optimizely και VWO (Google Optimize Help: Sunset).

Εργασία	Πού γίνεται
Χωρισμός των επισκεπτών σε εκδοχή A και B και εμφάνιση της εκδοχής	Το εργαλείο A/B testing· το script του μπαίνει μέσω GTM στο CloudCart
Παραγγελίες, προσθήκες στο καλάθι, έναρξη checkout	GA4, που λαμβάνει τα συμβάντα ecommerce από την εφαρμογή Google Analytics του CloudCart
Γιατί η εκδοχή κερδίζει ή χάνει	Clarity: οι καταγραφές και τα heatmaps των δύο εκδοχών

Για να βλέπεις χωριστά τις καταγραφές κάθε εκδοχής, πρόσθεσε custom tag στο πρότυπο του Clarity στο GTM (πεδία Custom tag Key και Value), για παράδειγμα κλειδί «variant» με τιμή «A» ή «B» που έρχεται από το εργαλείο του τεστ μέσω μεταβλητής στο GTM, και φίλτραρε τις καταγραφές με αυτό.

Το script του εργαλείου A/B testing πρέπει να είναι στην ίδια ομάδα συγκατάθεσης με το Clarity και το GA4. Αλλιώς ο πελάτης που αρνήθηκε τη στατιστική θα μπει κι αυτός σε εκδοχή και θα αλλοιώσει τη σύγκριση.

Λάθη στα A/B tests και στα heatmaps

• Διακοπή στην πρώτη καλή εβδομάδα. Τα πρώτα αποτελέσματα πηδάνε πάνω κάτω. Αποφάσισε μόνο όταν φτάσεις την επισκεψιμότητα του πίνακα και τουλάχιστον 2 ολόκληρες εβδομάδες, ώστε το τεστ να περάσει από όλες τις μέρες.
• Πολλές αλλαγές σε μία εκδοχή. Αν κερδίσει η εκδοχή με τρεις αλλαγές, δεν ξέρεις ποια βοήθησε.
• Τεστ μέσα σε προσφορά. Η Black Friday, οι γιορτές, οι εκπτώσεις και μια νέα διαφημιστική καμπάνια αλλάζουν τη συμπεριφορά περισσότερο από κάθε διόρθωση. Κάνε τις αλλαγές στο checkout τουλάχιστον 2 εβδομάδες πριν από μια μεγάλη προσφορά και μην ξεκινάς νέο τεστ την εβδομάδα της προσφοράς.
• Heatmap μόνο στον υπολογιστή. Στο κινητό το ορατό μέρος της οθόνης τελειώνει αλλού, και το κουμπί που φαίνεται στον υπολογιστή μπορεί να είναι από κάτω. Δες το μερίδιο των κινητών στην αναφορά επισκέψεων ανά συσκευή στα Analytics και κοίτα χωριστά τους χάρτες για Mobile.
• Απόφαση από μία καταγραφή. Ένας εκνευρισμένος πελάτης είναι περιστατικό. Πρόβλημα είναι ό,τι βλέπεις σε τουλάχιστον 5 από τις 20 καταγραφές.

Συχνές ερωτήσεις

Έχεις ερώτηση για το Clarity, το Google Tag Manager ή τη συγκατάθεση στο κατάστημά σου; Γράψε μας στο support@cloudcart.com.