Συλλογή ενσωματωμένων δεδομένων στο Front-end και reporting

Συλλογή δεδομένων διεπαφής και αναφορά δεδομένων

2024-07-12

Τι είναι το σημείο ταφής;

Η επιστημονική ονομασία είναι Event Tracking, η οποία εστιάζει κυρίως στην καταγραφή, επεξεργασία και αποστολή σχετικών τεχνολογιών και διαδικασιών υλοποίησης για τη συμπεριφορά των χρηστών ή τις επιχειρηματικές διαδικασίες.
Το Burying a Point είναι ένας επαγγελματικός όρος στο πεδίο δεδομένων και είναι επίσης ένα κοινό όνομα στο πεδίο του Διαδικτύου.

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

Τα σημεία ενσωμάτωσης περιλαμβάνουν δύο σημαντικές έννοιες: συμβάν (γεγονός) και χαρακτηριστικό (param)

Συμβάν: Τι συμβαίνει στην εφαρμογή, όπως ενέργειες χρήστη, συμβάντα συστήματος ή σφάλματα συστήματος. Για παράδειγμα, εάν τραβάτε ένα προϊόν, περιέχει τα ακόλουθα συμβάντα: enter_page (εισαγωγή στη σελίδα), leave_page (αποχώρηση από τη σελίδα).
Παράμετρος: Ένα χαρακτηριστικό που ορίζεται για την περιγραφή ενός τμήματος χρήστη, όπως η προτίμηση γλώσσας ή η γεωγραφική τοποθεσία. Πάρτε για παράδειγμα το συμβάν "Εισαγωγή άσκησης μετά την τάξη" Περιέχει τα ακόλουθα χαρακτηριστικά συμβάντος: enter_from (από ποια σελίδα), class_id (αναγνωριστικό μαθήματος) κ.λπ.
Τιμή χαρακτηριστικού (τιμή): Η διάσταση του χαρακτηριστικού, δηλαδή η συγκεκριμένη διάσταση όταν ενεργοποιείται η συμπεριφορά. Για παράδειγμα: enter_from: home (αρχική σελίδα), σύστημα (σύστημα) κ.λπ.

Κύριο σχέδιο

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

Τα δεδομένα είναι θορυβώδη και συλλέγονται ανεξάρτητα από το αν είναι χρήσιμα ή όχι.
Δεν είναι δυνατή η προσαρμογή των θαμμένων σημείων, δεν είναι δυνατή η συλλογή συγκεκριμένων συμβάντων και επιχειρηματικών χαρακτηριστικών
Λιγότερες πληροφορίες είναι διαθέσιμες στο DA
πλεονέκτημα:
Απλή πρόσβαση, σχεδόν καμία εισβολή, δεν απαιτείται πρόσθετο κόστος ανάπτυξης
Η συλλογή της συμπεριφοράς λειτουργίας του χρήστη είναι πολύ πλήρης και σχεδόν δεν γίνονται παραλείψεις

Σημεία ενταφιασμού κώδικα, οι προγραμματιστές front-end προσαρμόζουν την παρακολούθηση και τη συλλογή στον κώδικα
έλλειψη:

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

Buried point SDK, το SDK εκθέτει τη διεπαφή για την αναφορά θαμμένων σημείων και οι προγραμματιστές δεν γνωρίζουν τη διαδικασία παρακολούθησης και συλλογής, όπως το τσάι της εταιρείας
Μειονεκτήματα: ΝΑ
πλεονέκτημα:

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

Κοινά κρυφά χαρακτηριστικά

Συνήθως οι μετρήσεις στο μπροστινό μέρος των θαμμένων σημείων σύμφωνα με τις διαστάσεις της σελίδας είναι οι εξής:

Γνωρίσματα	περιγράφω
uid	Το αναγνωριστικό χρήστη, εάν ο χρήστης δεν είναι συνδεδεμένος, επιστρέφει ένα συγκεκριμένο αναγνωριστικό ταυτότητας
url	Το URL της τρέχουσας σελίδας ενεργοποίησης συμβάντος
eventTime	Η χρονική σήμανση που ενεργοποίησε το κρυφό σημείο
Τοπική ώρα	Η τοπική ώρα του χρήστη που ενεργοποίησε το κρυφό σημείο εκφράζεται στην τυπική μορφή ΕΕΕΕ=ΜΜ-ΗΗ ΩΩ:λλ:δδ, η οποία είναι βολική για άμεσο ερώτημα συμβολοσειράς αργότερα.
Τύπος συσκευής	Ο τύπος της συσκευής που χρησιμοποιείται αυτήν τη στιγμή από τον χρήστη, όπως apple, Samsung, chrome
ID συσκευής	Το αναγνωριστικό συσκευής που χρησιμοποιείται από τον τρέχοντα χρήστη
osType	Ο τύπος συστήματος εισάγει windows, macos, ios, android
osVersion	έκδοση συστήματος
έκδοση της εφαρμογής	Έκδοση εφαρμογής
appId	Αναγνωριστικό τρέχουσας εφαρμογής
επιπλέον	Προσαρμοσμένα δεδομένα, συνήθως σειριακές συμβολοσειρές και η δομή δεδομένων πρέπει να παραμένουν σταθερές

Συνήθη θαμμένα γεγονότα

Εκδήλωση	Χρόνος αναφοράς	περιγράφω
Παραμονή σελίδας	Όταν γίνεται εναλλαγή της τρέχουσας σελίδας ή κατά την εκφόρτωση της σελίδας	Καταγράψτε το χρόνο περιήγησης της προηγούμενης σελίδας
pv	Κατά την είσοδο στη σελίδα	Αριθμός επισκέψεων στη σελίδα, η υπεριώδης ακτινοβολία πρέπει να φιλτράρεται μόνο με βάση το αναγνωριστικό συσκευής
γεγονότα αλληλεπίδρασης	Όταν ενεργοποιείται ένα συμβάν αλληλεπίδρασης χρήστη	Όπως κλικ, παρατεταμένο πάτημα κ.λπ.
λογικό γεγονός	Όταν πληρούνται οι λογικές προϋποθέσεις	Όπως σύνδεση, μεταπήδηση σελίδας κ.λπ.

Λύση συλλογής δεδομένων απόδοσης

Επί του παρόντος, τα περισσότερα από τα δεδομένα δείκτη απόδοσης προέρχονται από το window.performance API.

Εισαγάγετε την περιγραφή της εικόνας εδώ

όνομα παραμέτρου	περιγράφω
connectEnd	HTTP (TCP) Επιστρέφει τη χρονική σήμανση όταν δημιουργήθηκε η σύνδεση μεταξύ του προγράμματος περιήγησης και του διακομιστή. Εάν δημιουργηθεί μια μόνιμη σύνδεση, η τιμή επιστροφής είναι ίση με την τιμή του χαρακτηριστικού fetchStart. Η δημιουργία σύνδεσης αναφέρεται στην ολοκλήρωση όλων των χειραψιών και των διαδικασιών ελέγχου ταυτότητας.
ConnectStart	Χρονική σήμανση HTTP (TCP) στο τέλος του ερωτήματος ονόματος τομέα. Εάν χρησιμοποιείται μόνιμη σύνδεση ή οι πληροφορίες αποθηκεύονται σε προσωρινή μνήμη ή τοπικό πόρο, αυτή η τιμή θα είναι σύμφωνη με το fetchStart.
domComplete	Ολοκληρώνεται η ανάλυση του τρέχοντος εγγράφου, δηλαδή η χρονική σήμανση όταν το Document.readyState γίνεται 'ολοκληρωμένο' και ενεργοποιείται η αντίστοιχη αλλαγή ετοιμότητας.
domContentLoadedEventEnd	Η χρονική σήμανση όταν έχουν εκτελεστεί όλα τα σενάρια που πρέπει να εκτελεστούν άμεσα (ανεξαρτήτως σειράς εκτέλεσης).
domContentLoadedEventStart	Όταν ο αναλυτής στέλνει το συμβάν DOMContentLoaded, η χρονική σήμανση όταν όλα τα σενάρια που πρέπει να εκτελεστούν έχουν αναλυθεί.
domInteractive	Η χρονική σήμανση όταν η δομή DOM της τρέχουσας ιστοσελίδας τερματίζει την ανάλυση και ξεκινά τη φόρτωση των ενσωματωμένων πόρων (δηλαδή, όταν η ιδιότητα Document.readyState αλλάζει σε "interactive" και ενεργοποιείται το αντίστοιχο συμβάν readystatechange).
domLoading	Η χρονική σήμανση όταν η δομή DOM της τρέχουσας ιστοσελίδας αρχίζει να αναλύεται (δηλαδή, όταν η ιδιότητα Document.readyState αλλάζει σε "φόρτωση" και ενεργοποιείται το αντίστοιχο συμβάν readystatechange).
domainLookupEnd	Ο χρόνος που ολοκληρώθηκε το ερώτημα ονόματος τομέα DNS.Ίση με την τιμή fetchStart εάν χρησιμοποιείται τοπική προσωρινή αποθήκευση (δηλαδή χωρίς ερωτήματα DNS) ή μόνιμες συνδέσεις
domainLookupStart	Χρονική σήμανση DNS UNIX όταν ξεκίνησε το ερώτημα ονόματος τομέα. Εάν χρησιμοποιείται μόνιμη σύνδεση ή οι πληροφορίες αποθηκεύονται σε προσωρινή μνήμη ή τοπικό πόρο, αυτή η τιμή θα είναι σύμφωνη με το fetchStart.
fetchStart	Το πρόγραμμα περιήγησης είναι έτοιμο να ανακτήσει τη χρονική σήμανση του εγγράφου χρησιμοποιώντας ένα αίτημα HTTP. Αυτό το χρονικό σημείο θα είναι πριν από τον έλεγχο οποιασδήποτε κρυφής μνήμης εφαρμογής.
loadEventEnd	Όταν τελειώνει το συμβάν φόρτωσης, δηλαδή η χρονική σήμανση όταν ολοκληρώνεται το συμβάν φόρτωσης. Εάν αυτό το συμβάν δεν έχει σταλεί ακόμα ή δεν έχει ολοκληρωθεί ακόμη, η τιμή του θα είναι 0.
loadEventStart	Η χρονική σήμανση κατά την αποστολή του συμβάντος φόρτωσης. Εάν αυτό το συμβάν δεν έχει σταλεί ακόμα, η τιμή του θα είναι 0.
πλοήγηση Έναρξη	Η χρονική σήμανση κατά την κατάργηση της προηγούμενης σελίδας στο ίδιο πρόγραμμα περιήγησης έληξε. Εάν δεν υπάρχει προηγούμενη σελίδα, αυτή η τιμή θα είναι ίδια με το fetchStart.
ανακατεύθυνσηΤέλος	Η χρονική σήμανση όταν ολοκληρώθηκε η τελευταία ανακατεύθυνση HTTP (δηλαδή, όταν ελήφθη απευθείας το τελευταίο bit της απόκρισης HTTP). Εάν δεν υπάρχει ανακατεύθυνση ή η ανακατεύθυνση είναι από διαφορετική προέλευση, αυτή η τιμή θα επιστρέψει 0.
ανακατεύθυνσηΈναρξη	Η χρονική σήμανση κατά την έναρξη της πρώτης ανακατεύθυνσης HTTP. Εάν δεν υπάρχει ανακατεύθυνση ή η ανακατεύθυνση είναι από διαφορετική προέλευση, αυτή η τιμή θα επιστρέψει 0.
requestStart	Επιστρέφει τη χρονική σήμανση όταν το πρόγραμμα περιήγησης έκανε ένα αίτημα HTTP στον διακομιστή (ή άρχισε να διαβάζει την τοπική προσωρινή μνήμη).
απάντησηΤέλος	Επιστρέφει τη χρονική σήμανση όταν το πρόγραμμα περιήγησης έλαβε (ή διάβασε από την τοπική κρυφή μνήμη ή διάβασε από έναν τοπικό πόρο) το τελευταίο byte από το διακομιστή (ή όταν η σύνδεση HTTP έκλεισε, εάν είχε κλείσει πριν από αυτό).
απάντησηΈναρξη	Επιστρέφει τη χρονική σήμανση όταν το πρόγραμμα περιήγησης έλαβε το πρώτο byte από τον διακομιστή (ή την ανάγνωση από την τοπική προσωρινή μνήμη).Εάν το επίπεδο μεταφοράς αποτύχει μετά το αρχικό αίτημα και η σύνδεση ανοίξει ξανά, αυτό το χαρακτηριστικό θα μετρηθεί ως ο αντίστοιχος χρόνος εκκίνησης του νέου αιτήματος.
safeConnectionStart	Το HTTPS επιστρέφει τη χρονική σήμανση όταν το πρόγραμμα περιήγησης και ο διακομιστής ξεκίνησαν τη χειραψία για μια ασφαλή σύνδεση. Εάν η τρέχουσα ιστοσελίδα δεν απαιτεί ασφαλή σύνδεση, επιστρέψτε το 0.
unloadEventEnd	Αντιστοιχεί στο unloadEventStart, η χρονική σήμανση κατά την ολοκλήρωση της επεξεργασίας συμβάντος κατάργησης. Εάν δεν υπάρχει προηγούμενη σελίδα, αυτή η τιμή θα επιστρέψει 0.
unloadEventStart	Η χρονική σήμανση κατά την οποία εμφανίστηκε το προηγούμενο συμβάν ξεφόρτωσης σελίδας. Εάν δεν υπάρχει προηγούμενη σελίδα, αυτή η τιμή θα επιστρέψει 0.

Κοινοί δείκτες απόδοσης

Όνομα δείκτη	περιγράφω
ΠΠ	Ώρα πρώτης κλήρωσης σελίδας
FCP	Η ώρα που η σελίδα έχει σχεδιαστεί για πρώτη φορά περιεχόμενο
FMP	Ο πρώτος αποτελεσματικός χρόνος σχεδίασης της σελίδας FMP>=FCP
TTI	Πλήρως διαδραστικός χρόνος σελίδας
ΜΟΥΡΕΛΛΟ	Κατά τη φάση φόρτωσης της σελίδας, ο χρόνος καθυστέρησης για την πρώτη αλληλεπίδραση του χρήστη
MPFID	Κατά το στάδιο φόρτωσης της σελίδας, ο μέγιστος χρόνος καθυστέρησης που μπορεί να συναντήσει η αλληλεπίδραση με τον χρήστη
ΦΟΡΤΩΝΩ	Η ώρα που η σελίδα φορτώνεται πλήρως (η ώρα που συμβαίνει το συμβάν φόρτωσης)

ΠΠ

Ο δείκτης FP (First Paint) αντικατοπτρίζει συνήθως τον χρόνο λευκής οθόνης της σελίδας είναι πολύ καλή, η λευκή οθόνη Όσο μικρότερος είναι ο χρόνος, τόσο μικρότερη είναι η πιθανότητα ανατροπής του χρήστη.

Αυτός ο δείκτης μπορεί να λάβει τις πληροφορίες σημείου που παρέχονται από το PerformancePaintTming API μέσω της μεθόδου preformance.getEntriesByType('paint') Βρείτε το αντικείμενο με το όνομα first-paint και η περιγραφή είναι τα δεδομένα δείκτη FP:
Εισαγάγετε την περιγραφή της εικόνας εδώ

FCP

Το FCP (First Contentful Paint) είναι το χρονικό σημείο κατά το οποίο το περιεχόμενο αποδίδεται για πρώτη φορά στους στατιστικούς δείκτες απόδοσης, ο χρόνος από τη στιγμή που ο χρήστης αρχίζει να έχει πρόσβαση στην ιστοσελίδα έως το FCP μπορεί να θεωρηθεί ως χρόνος χωρίς περιεχόμενο , FCP >= FP

Οι δείκτες μπορούν να λάβουν τις πληροφορίες σημείου που παρέχονται από το PerformancePaintTiming API μέσω της μεθόδου performance.getEntriesByType('paint') Βρείτε το αντικείμενο με το όνομα first-contentful-paint, το οποίο περιγράφει τα δεδομένα δείκτη FCP, όπως φαίνεται στην παρακάτω εικόνα:

FMP

Το FMP (First Meaningful Paint) είναι ο χρόνος που σχεδιάζεται για πρώτη φορά ουσιαστικό περιεχόμενο.Επομένως, το FMP μετρά τον χρόνο που χρειάζεται για να δουν οι χρήστες το κύριο περιεχόμενο μιας ιστοσελίδας και είναι ένας σημαντικός δείκτης μέτρησης από την οπτική της εμπειρίας χρήστη.

Μια μέθοδος υπολογισμού FMP που αναγνωρίζεται πλέον από τον κλάδο του front-end είναι "ο χρόνος σχεδίασης μετά τη μέγιστη αλλαγή διάταξης της σελίδας κατά τη φόρτωση και την απόδοση." Μπορείτε να χρησιμοποιήσετε το MutationObserver για να παρακολουθήσετε κάθε συνολική αλλαγή DOM της σελίδας, να ενεργοποιήσετε την επιστροφή κλήσης του MutationObserver και να υπολογίσετε τη βαθμολογία αλλαγής του τρέχοντος δέντρου DOM κατά τη διάρκεια της επιστροφής κλήσης Η στιγμή που η βαθμολογία αλλάζει περισσότερο είναι το χρονικό σημείο FMP.

TTI

TTI (Time To Interactive), που είναι ο χρόνος που χρειάζεται από την αρχή της φόρτωσης της σελίδας έως ότου η σελίδα είναι σε πλήρως διαδραστική κατάσταση. Όταν η σελίδα βρίσκεται σε πλήρως διαδραστική κατάσταση, πληρούνται οι ακόλουθες τρεις προϋποθέσεις:

Η σελίδα εμφανίζει ήδη χρήσιμο περιεχόμενο.
Η συνάρτηση απόκρισης συμβάντος που σχετίζεται με τα ορατά στοιχεία στη σελίδα έχει καταχωρηθεί.
Η συνάρτηση απόκρισης συμβάντος μπορεί να ξεκινήσει να εκτελείται εντός 50 ms μετά την εμφάνιση του συμβάντος.

Ένδειξη φόρτωσης πόρων

Το window.performance.getEntriesByType('resource') θα εμφανίσει διάφορους δείκτες απόδοσης όλων των πόρων (js, css, img...) που έχουν φορτωθεί στην τρέχουσα σελίδα, οι οποίοι μπορούν να χρησιμοποιηθούν για τη συλλογή δεδομένων απόδοσης στατικών πόρων.

Οι κύριοι τύποι είναι: script, link, img, css, xmlhttprequest, beacon, fetch, άλλα.
PerformanceResourceTiming - Web API | MDN

Άλλες μέθοδοι υπολογισμού δεικτών

Όνομα δείκτη	περιγράφω	Υπολογισμός
Ερώτημα DNS	Η φάση DNS απαιτεί χρόνο	domainLookupEnd - domainLookupStart
Σύνδεση TCP	Χρόνος φάσης TCP	connectEnd - connectStart
Δημιουργία σύνδεσης SSL	Χρόνος σύνδεσης SSL	connectEnd - safeConnectionStart
Αίτημα δικτύου πρώτου byte	Χρόνος απόκρισης πρώτου byte (ttfb)	answerStart - requestStart

Λύση συλλογής δεδομένων σφάλματος

Υπάρχουν τρία είδη

Σφάλματα φόρτωσης πόρων, καταγραφή σφαλμάτων αποτυχίας φόρτωσης πόρων στη φάση λήψης μέσω του addEventListener ('error', callback, true).
js σφάλματα εκτέλεσης, καταγραφή σφαλμάτων js μέσω του window.onerror.
- Τα σενάρια μεταξύ τομέων θα δώσουν ένα μήνυμα "Σφάλμα σεναρίου" και δεν μπορούν να ληφθούν συγκεκριμένες πληροφορίες σφάλματος και πληροφορίες στοίβας. Αυτή τη στιγμή, πρέπει να προσθέσετε το χαρακτηριστικό crossorigin="anonymous" στην ετικέτα script και ο διακομιστής πόρων πρέπει να προσθέσει διαμορφώσεις που σχετίζονται με το CORS, όπως Access-Control-Allow-Origin: *
Promise error, καταγράψτε το σφάλμα υπόσχεσης μέσω του addEventListener ('unhandledrejection', callback), αλλά δεν υπάρχουν πληροφορίες όπως ο αριθμός των γραμμών και των στηλών όπου παρουσιάστηκε το σφάλμα, επομένως μπορείτε να πετάξετε μόνο μη αυτόματα τις σχετικές πληροφορίες σφάλματος.

// 在捕获阶段，捕获资源加载失败错误
Element.addEventListener('error', e => {
const target = e.target
    if (target != window) {
        monitor.errors.push({
            type: target.localName,
            url: target.src || target.href,
            msg: (target.src || target.href) + ' is load error',
            time: Date.now()
        })
    }
})

// 监听 js 错误
window.onerror = function(msg, url, row, col, error) {
    monitor.errors.push({
        type: 'javascript',
        row: row,
        col: col,
        msg: error && error.stack? error.stack : msg,
        url: url,
        time: Date.now()
    })
}
// 监听 promise 错误 缺点是获取不到行数数据
addEventListener('unhandledrejection', e => {
    monitor.errors.push({
        type: 'promise',
        msg: (e.reason && e.reason.msg) || e.reason || '',
        time: Date.now()
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Σχέδιο αναφοράς δεδομένων

Σε αυτό το σενάριο, υπάρχουν δύο ζητήματα που πρέπει να ληφθούν υπόψη:

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

Navigator.sendBeacon

πλεονέκτημα:
Στέλνει αξιόπιστα δεδομένα όταν η σελίδα εκφορτώνεται, χωρίς να εμποδίζει το κλείσιμο της σελίδας.
Υποστήριξη αποστολής δεδομένων στο παρασκήνιο.

έλλειψη:
Μπορούν να σταλούν μόνο αιτήματα POST και δεν μπορούν να ληφθούν αποτελέσματα απόκρισης.

Εισαγάγετε την περιγραφή της εικόνας εδώ
Εκτός από τον Internet Explorer, τα τρέχοντα σύγχρονα προγράμματα περιήγησης έχουν πολύ υψηλό ποσοστό υποστήριξης για beacons. Beacon - Τεκμηρίωση MDN

Η διεπαφή Beacon χρησιμοποιείται για τον προγραμματισμό ασύγχρονων αιτημάτων μη αποκλεισμού στον διακομιστή Web.

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

Με απλούς όρους, το Beacon μπορεί να στείλει δεδομένα ασύγχρονα στον διακομιστή και μπορεί να διασφαλίσει ότι το αίτημα αποστέλλεται πριν ολοκληρωθεί η εκφόρτωση της σελίδας (λύστε το πρόβλημα ότι η εκφόρτωση σελίδας ajax θα τερματίσει το αίτημα). Πως να το χρησιμοποιήσεις:

navigator.sendBeacon(url, data);
1

Η παράμετρος δεδομένων είναι προαιρετική και ο τύπος της μπορεί να είναι ArrayBufferView, Blob, DOMString ή FormData. Εάν το πρόγραμμα περιήγησης προσθέσει με επιτυχία το αίτημα beacon στην ουρά που θα σταλεί, αυτή η μέθοδος θα επιστρέψει true, διαφορετικά θα επιστρέψει false

Όταν χρησιμοποιείτε το Beacon, το backend πρέπει να χρησιμοποιεί τη μέθοδο ανάρτησης για τη λήψη παραμέτρων. Ταυτόχρονα, η κεφαλίδα αιτήματος πρέπει να ανταποκρίνεται στην κεφαλίδα αιτήματος που έχει καταχωρηθεί με ασφάλεια CORS, στην οποία ο τύπος περιεχομένου πρέπει να είναι εφαρμογή/x-www-form-urlencoded, multipart/form-data ή κείμενο/απλό.

type ContentType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';

const serilizeParams = (params: object) => {
    return window.btoa(JSON.stringify(params))
}

function sendBeacon(url: string, params: object) {
  const formData = new FormData()
  formData.append('params', serilizeParams(params))
  navigator.sendBeacon(url, formData)
}

1
2
3
4
5
6
7
8
9
10
11
12

Εικόνα

πλεονέκτημα:
Είναι απλό στη χρήση, έχει καλή συμβατότητα και μπορεί να αναφερθεί σε όλους τους τομείς.
Δεν θα μπλοκάρει τη φόρτωση και το κλείσιμο της σελίδας.

έλλειψη:
Μπορούν να σταλούν μόνο αιτήματα GET και δεν μπορούν να ληφθούν αποτελέσματα απόκρισης.
Οι ασύγχρονες λειτουργίες δεν υποστηρίζονται.

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

function sendImage(url: string, params: object) {
  const img = new Image()

  img.style.display = 'none'

  const removeImage = function() {
    img.parentNode.removeChild(img)
  }

  img.onload = removeImage
  img.onerror = removeImage

  img.src = `${url}?params=${serilizeParams(params)}`

  document.body.appendChild(img)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Δεδομένου ότι η εικόνα img είναι ένα αίτημα λήψης, διαφορετικοί διακομιστές έχουν περιορισμούς στο μήκος του uri μεταφορτώθηκε ταυτόχρονα.

Συμβατές λύσεις

Προτιμάται η μέθοδος sendBeacon και η μέθοδος Image χρησιμοποιείται ως εναλλακτική.


function sendLog(url: string, params: object) {
    if（navigator.sendBeacon) {
        sendBeacon(url, params)
    } else {
        sendImage(url, params)
    }
}
1
2
3
4
5
6
7
8

Στην πραγματικότητα, πολλοί άνθρωποι χρησιμοποιούν GIF για να θάψουν το σημείο;
Η αναφορά δεδομένων στον διακομιστή μπορεί να γίνει μέσω αιτήματος διεπαφής, αιτήματος συνηθισμένων αρχείων ή αιτήματος πόρων εικόνας. Εφόσον τα δεδομένα μπορούν να αναφέρονται, είτε ζητούν ένα αρχείο GIF, είτε ζητούν ένα αρχείο js είτε καλούν μια διεπαφή σελίδας, ο διακομιστής δεν ενδιαφέρεται πραγματικά για τη συγκεκριμένη μέθοδο αναφοράς. Γιατί λοιπόν όλα τα συστήματα χρησιμοποιούν ομοιόμορφα τη μέθοδο αίτησης εικόνων GIF για την αναφορά δεδομένων;
●Αποτρέψτε τη δημιουργία μεταξύ τομέων
Σε γενικές γραμμές, το όνομα τομέα με κουκκίδες δεν είναι το τρέχον όνομα τομέα, επομένως όλα τα αιτήματα διεπαφής θα αποτελούν αιτήματα μεταξύ τομέων. Τα αιτήματα μεταξύ τομέων μπορούν εύκολα να υποκλαπούν από προγράμματα περιήγησης λόγω ακατάλληλης διαμόρφωσης και αναφοράς σφαλμάτων, κάτι που είναι απαράδεκτο. Ωστόσο, το χαρακτηριστικό src της εικόνας δεν διασχίζει τον τομέα και μπορούν επίσης να ξεκινήσουν αιτήματα. (Εξαίρεση αναφοράς διεπαφής)
●Αποτρέψτε τον αποκλεισμό της φόρτωσης της σελίδας και την επίδραση της εμπειρίας χρήστη
Συνήθως, μετά τη δημιουργία ενός κόμβου πόρων, το πρόγραμμα περιήγησης δεν θα στείλει πραγματικά ένα αίτημα πόρου έως ότου το αντικείμενο εγχυθεί στο δέντρο DOM του προγράμματος περιήγησης. Η επανειλημμένη λειτουργία του DOM όχι μόνο θα προκαλέσει προβλήματα απόδοσης, αλλά η φόρτωση πόρων js/css θα εμποδίσει επίσης την απόδοση της σελίδας και θα επηρεάσει την εμπειρία του χρήστη.
Η εξαίρεση είναι τα αιτήματα εικόνας. Όχι μόνο δεν χρειάζεται να εισαχθεί στο DOM κατά την κατασκευή μιας εικόνας, αλλά μπορεί να εκκινήσει ένα αίτημα εφόσον το νέο αντικείμενο Image δημιουργείται σε js και δεν υπάρχει πρόβλημα αποκλεισμού σε περιβάλλον προγράμματος περιήγησης χωρίς js επίσης να διαχειρίζεται κανονικά μέσω της ετικέτας img, η οποία είναι ένας άλλος τύπος αιτήματος πόρων Τι δεν μπορεί να γίνει. (Εξαίρεση μεθόδου αρχείου)
●Σε σύγκριση με το PNG/JPG, το GIF έχει το μικρότερο μέγεθος
Το μικρότερο αρχείο BMP απαιτεί 74 byte, το PNG απαιτεί 67 byte και ένα νόμιμο GIF απαιτεί μόνο 43 byte.
Για την ίδια απόκριση, το GIF μπορεί να εξοικονομήσει 41% της επισκεψιμότητας από το BMP και 35% της επισκεψιμότητας από το PNG.
Και τα περισσότερα από αυτά χρησιμοποιούν διαφανές GIF 1*1 pixel για την αναφορά.
Το 1x1 pixel είναι η μικρότερη νόμιμη εικόνα. Επιπλέον, επειδή γίνεται μέσω εικόνων, είναι καλύτερο να κάνετε τις εικόνες διαφανείς, έτσι ώστε να μην επηρεάζεται το εφέ εμφάνισης της ίδιας της σελίδας Για να υποδείξετε ότι η εικόνα είναι διαφανής, χρειάζεται μόνο να χρησιμοποιήσετε ένα δυαδικό bit για να επισημάνετε την εικόνα ως διαφανές χρώμα και δεν χρειάζεται να αποθηκεύονται δεδομένα χρωματικού χώρου , γεγονός που μπορεί να εξοικονομήσει όγκο.

XMLHttpRequest或Fetch API

πλεονέκτημα:

Μπορούν να σταλούν ασύγχρονα αιτήματα και υποστηρίζονται πολλαπλές μέθοδοι HTTP όπως GET και POST.
Τα αποτελέσματα απόκρισης μπορούν να ληφθούν και να υποβληθούν σε περαιτέρω επεξεργασία.
έλλειψη:

Η λογική του αιτήματος και της απάντησης πρέπει να αντιμετωπίζεται χειροκίνητα.
Πρέπει να χειριστείτε ζητήματα αιτημάτων μεταξύ τομέων (όπως η ρύθμιση CORS).

Χρησιμοποιήστε το XMLHttpRequest ή το Fetch API για να στείλετε ασύγχρονα αιτήματα για αναφορά δεδομένων. Μπορείτε να επιλέξετε να χρησιμοποιήσετε τη μέθοδο GET ή POST και να στείλετε τα δεδομένα ως παραμέτρους σώματος αιτήματος ή διεύθυνσης URL.

WebSocket

πλεονέκτημα:

Καλή απόδοση σε πραγματικό χρόνο και υποστηρίζει αμφίδρομη επικοινωνία.
Κατάλληλο για παρακολούθηση σε πραγματικό χρόνο και αναφορά δεδομένων μεγάλης κλίμακας.
έλλειψη:

Ο διακομιστής πρέπει να υποστηρίζει το πρωτόκολλο WebSocket.
Πιο περίπλοκο και ακατάλληλο για απλές απαιτήσεις θαμμένου σημείου.

Πλατφόρμα αναφοράς

Τα κοινά εργαλεία αποθήκευσης δεδομένων στο front-end περιλαμβάνουν τα Google Analytics, Baidu Statistics, Umeng Statistics κ.λπ. Φυσικά, μπορείτε επίσης να χρησιμοποιήσετε την εσωτερική διεπαφή ή την πλατφόρμα της εταιρείας για αναφορές.

Πάρτε ως παράδειγμα το Google Analytics:
Το Google Analytics είναι ένα εργαλείο ανάλυσης ιστότοπου που αναπτύχθηκε από την Google για την παρακολούθηση και την αναφορά της επισκεψιμότητας του ιστότοπου. Βοηθά τους ιδιοκτήτες ιστοτόπων να κατανοήσουν τη συμπεριφορά των επισκεπτών τους, συμπεριλαμβανομένου του ποιοι είναι, από πού προέρχονται, τι κάνουν στον ιστότοπο και πολλά άλλα. Μέσω του Google Analytics, οι κάτοχοι ιστοτόπων μπορούν να κατανοήσουν καλύτερα το κοινό τους, να βελτιστοποιήσουν το περιεχόμενο του ιστότοπου και τις στρατηγικές μάρκετινγκ, βελτιώνοντας έτσι την απόδοση του ιστότοπου και την εμπειρία χρήστη. Το Google Analytics παρέχει πληθώρα λειτουργιών ανάλυσης δεδομένων, συμπεριλαμβανομένων δεδομένων σε πραγματικό χρόνο, ανάλυσης συμπεριφοράς χρηστών, παρακολούθησης μετατροπών, ανάλυσης πηγής επισκεψιμότητας και πολλά άλλα. Είναι ένα ισχυρό εργαλείο που χρησιμοποιείται ευρέως σε διάφορους ιστότοπους και διαδικτυακές καμπάνιες μάρκετινγκ.

Πώς να χρησιμοποιήσετε το Google Analytics

Εφόσον χρησιμοποιούμε το Google Analytics, πρέπει πρώτα να έχουμε έναν λογαριασμό Google, τον οποίο πρέπει να δημιουργήσετε μόνοι σας. Δεύτερον, πρέπει να γνωρίζετε την είσοδο στο Google Analytics Εδώ είναι οι δύο διευθύνσεις που χρησιμοποιούνται:

Διαχειριστής ετικετών Google：tagmanager.google.com/

Analytics：analytics.google.com/

Διαχειριστής ετικετών Google
Ο Διαχειριστής ετικετών Google (GTM) είναι ένα σύστημα διαχείρισης ετικετών που αναπτύχθηκε και παρέχεται από την Google. Επιτρέπει στους διαχειριστές ιστοτόπων να διαχειρίζονται και να αναπτύσσουν διάφορους κώδικες παρακολούθησης, κωδικούς αναλυτικών στοιχείων και ετικέτες μάρκετινγκ χωρίς να τροποποιούν τον κώδικα του ιστότοπου. Με το GTM, οι χρήστες μπορούν εύκολα να προσθέσουν, να ενημερώσουν και να διαγράψουν ετικέτες χωρίς να βασίζονται σε προγραμματιστές.

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

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

Κοινή χρήση τεχνολογίας