Πώς λειτουργεί το MousePlayer

Ένας απλός οδηγός για την αρχιτεκτονική παρακολούθησης, τον χειρισμό της ανάλυσης οθόνης σε διαφορετικές συσκευές και τα όρια του συστήματος.

1. Γιατί δεν χρησιμοποιούμε καταγραφή βίντεο

Μια συνηθισμένη παρανόηση είναι ότι τα εργαλεία οπτικής ανάλυσης καταγράφουν τυπικά αρχεία βίντεο (όπως MP4 ή WebM) της οθόνης ενός επισκέπτη. Αυτό θα κατανάλωνε τεράστιο εύρος ζώνης, θα επιβράδυνε δραστικά τον ιστότοπό σας και θα δημιουργούσε θολό, δυσανάγνωστο κείμενο.

Αντίθετα, το MousePlayer χρησιμοποιεί μια ελαφριά τεχνολογία γνωστή ως τηλεμετρία στιγμιοτύπων DOM. Δείτε πώς λειτουργεί στη βάση της:

Το στιγμιότυπο της δομής

Όταν ένας επισκέπτης ανοίγει τη σελίδα σας, το script μας λαμβάνει ένα «σχέδιο» σε μορφή κειμένου της δομής HTML και μορφοποίησής της. Καταγράφει πού βρίσκονται τα στοιχεία χωρίς να αντιγράφει τα αρχεία εικόνας ή βίντεο της σελίδας· το πρόγραμμα αναπαραγωγής φορτώνει τις εικόνες από την αρχική τους διεύθυνση κατά την αναπαραγωγή. Εξαίρεση αποτελούν τα στοιχεία canvas, το περιεχόμενο των οποίων μεταδίδεται ως εικόνα (δείτε παρακάτω).

Τηλεμετρία συντεταγμένων

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

Αναπαραγωγή σε λειτουργία θεάτρου

Όταν βλέπετε μια συνεδρία στον πίνακα ελέγχου σας, το πρόγραμμα αναπαραγωγής μας αναδημιουργεί τη σελίδα χρησιμοποιώντας την καταγεγραμμένη δομή και κινεί έναν εικονικό δείκτη πάνω της σε πραγματικό χρόνο, διατηρώντας το κείμενο απόλυτα ευκρινές.

Σχεδιασμένο για να παραμένει ελαφρύ: το script φορτώνεται ασύγχρονα και μεταδίδει μικρά αριθμητικά σημεία δεδομένων αντί για βίντεο, κρατώντας μικρό το δικό του αποτύπωμα. Το τι σημαίνει αυτό για τα Core Web Vitals σας εξαρτάται από τις σελίδες, τη φιλοξενία και το δίκτυο των επισκεπτών σας· μετρήστε το λοιπόν στον δικό σας ιστότοπο αντί να βασιστείτε σε έναν δικό μας αριθμό. Δεν παρέχεται εγγύηση συγκεκριμένης ταχύτητας φόρτωσης – δείτε το άρθρο 20 των Όρων χρήσης.

2. Χειρισμός αναλύσεων οθόνης & κινητών συσκευών

Οι σημερινοί χρήστες περιηγούνται από μικρά smartphone έως υπερευρείες οθόνες 4K επιτραπέζιων υπολογιστών. Οι ιστότοποι μετακινούν, αναδιπλώνουν και αναδιατάσσουν αυτόματα τη διάταξή τους για να ταιριάζει σε διαφορετικά πλάτη οθόνης — μια έννοια γνωστή ως προσαρμοστικός σχεδιασμός ιστοσελίδων.

Πώς αντιστοιχίζουμε ακριβώς την ορατή περιοχή του επισκέπτη

Για να μην φαίνεται παραμορφωμένη μια αναπαραγωγή, το MousePlayer καταγράφει τις ακριβείς διαστάσεις της ορατής περιοχής του επισκέπτη (π.χ. 390x844 για ένα smartphone ή 1920x1080 για μια οθόνη επιτραπέζιου υπολογιστή). Όταν ανοίγετε το πρόγραμμα αναπαραγωγής σε λειτουργία θεάτρου, η μηχανή μας δημιουργεί ένα απομονωμένο περιβάλλον υπό κλίμακα που αναπαράγει ακριβώς την αρχική αναλογία οθόνης του επισκέπτη.

Οθόνες επιτραπέζιων & φορητών υπολογιστών

Στους συνηθισμένους υπολογιστές καταγράφουμε συνεχή κίνηση ποντικιού και πλοήγηση σε πολλές καρτέλες μέσα στην ίδια συνεδρία προγράμματος περιήγησης. Τα μενού που ανοίγουν όταν ο δείκτης περνά από πάνω εμφανίζονται στην αναπαραγωγή εφόσον η σελίδα μεταβάλλει το έγγραφό της κατά το άνοιγμα· ένα εφέ αιώρησης αποκλειστικά με CSS δεν είναι ορατό στο έγγραφο και δεν αναπαράγεται.

Smartphone & tablet

Οι οθόνες αφής δεν έχουν δείκτη ποντικιού που αιωρείται. Το MousePlayer προσαρμόζεται αυτόματα καταγράφοντας αγγίγματα, κύλιση με σάρωση και αλλαγές προσανατολισμού (κατακόρυφος ή οριζόντιος).

Η πρόκληση αλλαγής μεγέθους στη διάρκεια της συνεδρίας

Αν ένας επισκέπτης περιστρέψει το tablet του ή αλλάξει το μέγεθος του παραθύρου στον υπολογιστή του στη διάρκεια της συνεδρίας, η διάταξη του ιστοτόπου αλλάζει δυναμικά. Το MousePlayer καταγράφει αυτά τα συμβάντα αλλαγής μεγέθους και προσαρμόζει απρόσκοπτα την επιφάνεια αναπαραγωγής εκείνη τη στιγμή, ώστε να διατηρείται το πλαίσιο της αλληλεπίδρασης.

3. Όρια συστήματος & τεχνικοί περιορισμοί

Για τον σεβασμό του απορρήτου, τη διατήρηση της ασφάλειας του προγράμματος περιήγησης και τη γρήγορη επεξεργασία δεδομένων, το MousePlayer λειτουργεί εντός καθορισμένων τεχνικών ορίων:

Όριο συστήματος Πώς το χειρίζεται το MousePlayer
iFrame Τα iframe με την ίδια προέλευση με τη σελίδα σας καταγράφονται μαζί με το περιεχόμενο και την αλληλεπίδραση μέσα τους. Το ενσωματωμένο περιεχόμενο άλλης προέλευσης (π.χ. προγράμματα αναπαραγωγής YouTube, φόρμες πληρωμής Stripe) δεν μπορεί να καταγραφεί εσωτερικά λόγω των πολιτικών ασφαλείας του προγράμματος περιήγησης (πολιτική ίδιας προέλευσης)· εμφανίζεται ως δεσμευμένη θέση στην αναπαραγωγή και δεν φορτώνεται εκεί.
Ευαίσθητα πεδία εισαγωγής (PII) Τα πεδία κωδικού πρόσβασης και πληρωμής αποκρύπτονται στη συσκευή του επισκέπτη σε κάθε επίπεδο απόκρυψης και η πλήρης απόκρυψη όλων των εισαγωγών σε φόρμες είναι η προεπιλογή για κάθε ιστότοπο. Βλέπετε ότι έγινε πληκτρολόγηση, όχι τι πληκτρολογήθηκε. Ισχύουν δύο περιορισμοί: τα δύο ασθενέστερα επίπεδα απόκρυψης ενεργοποιούνται μόνο με τη γραπτή έγκρισή μας και η απόκρυψη δεν φτάνει ποτέ σε όσα η ίδια η σελίδα σας εμφανίζει μέσα στο έγγραφο – μια σελίδα επιβεβαίωσης που δείχνει μια διεύθυνση αποτελεί μέρος του στιγμιότυπου. Και τα δύο περιγράφονται στη Σύμβαση επεξεργασίας δεδομένων.
Στοιχεία canvas & WebGL Το περιεχόμενο ενός canvas καταγράφεται ως εικόνα: μία φορά μαζί με το στιγμιότυπο σελίδας και ξανά κάθε φορά που αλλάζει, το πολύ περίπου μία φορά το δευτερόλεπτο και με όριο μεγέθους. Έτσι οι ομαλές κινήσεις εμφανίζονται ως ακολουθία καρέ. Δεν μεταδίδεται εικόνα σε περιοχές απόκρυψης ή για στοιχεία canvas που περιέχουν εικόνες άλλης προέλευσης· το περιεχόμενο WebGL μπορεί να παραμείνει κενό.
Web Components (Shadow DOM) Οι ανοικτές ρίζες shadow καταγράφονται μαζί με το περιεχόμενό τους. Οι κλειστές ρίζες shadow δεν είναι προσβάσιμες από script· το περιεχόμενό τους απουσιάζει από την αναπαραγωγή.
Μεταφορά & αποθήκευση στο πρόγραμμα περιήγησης Τα δεδομένα αποστέλλονται μέσω κρυπτογραφημένης σύνδεσης WebSocket (HTTPS/WSS). Αν δεν μπορεί να δημιουργηθεί, για παράδειγμα λόγω διακομιστή μεσολάβησης, το script χρησιμοποιεί εφεδρική κρυπτογραφημένη διαδρομή HTTP· τα πολύ μεγάλα στιγμιότυπα σελίδας μεταφορτώνονται χωριστά μέσω HTTPS. Το MousePlayer δεν τοποθετεί cookies· χρησιμοποιεί την τοπική αποθήκευση και την αποθήκευση συνεδρίας του προγράμματος περιήγησης στον ιστότοπό σας.
Περίοδοι αδράνειας AFK Αν ένας επισκέπτης αφήσει την καρτέλα του ανοιχτή και απομακρυνθεί για 20 λεπτά, η μηχανή μας εντοπίζει αυτόματα την αδράνεια και συμπιέζει το κενό κατά την αναπαραγωγή, ώστε να μη χάνετε χρόνο βλέποντας στατικές οθόνες.