Το απόσπασμα παρακολούθησης είναι ένα μικρό ασύγχρονο σενάριο — μερικά kilobytes που σερβίρονται από μια διαδρομή πρώτου μέρους με edge-cached — το οποίο αναγνωρίζει τον οργανισμό πίσω από κάθε συνεδρία. Εγκατεστημένο σωστά, δεν θα το προσέξετε. Εγκατεστημένο λανθασμένα, θα περάσετε μια εβδομάδα εντοπίζοντας γιατί λείπουν οι αναγνωρισμένες εταιρείες, πριν ανακαλύψετε ότι ο φορτωτής βρισκόταν σε ένα τμήμα που φορτωνόταν με καθυστέρηση. Αυτός ο οδηγός θα σας βοηθήσει να εξοικονομήσετε αυτή την εβδομάδα.
Τρεις αρχές πριν πιάσετε οτιδήποτε
- Ο φορτωτής ανήκει στο head του HTML σε όλο τον ιστότοπο. Όχι στο footer, όχι σε ένα συγκεκριμένο πρότυπο σελίδας, όχι σε ένα στοιχείο που εμφανίζεται μόνο σε σελίδες μάρκετινγκ. Στο head, σε κάθε σελίδα.
- Ο φορτωτής είναι ασύγχρονος από προεπιλογή. Μην προσθέτετε παράκαμψη defer/async που αλλάζει τον χρόνο εκτέλεσης· τα παρεχόμενα χαρακτηριστικά είναι τα χαρακτηριστικά που έχουμε δοκιμάσει.
- Εγκαταστήστε ακριβώς μία φορά. Δύο αντίγραφα του φορτωτή στην ίδια σελίδα δεν διπλασιάζουν τα δεδομένα σας — διπλασιάζουν τα αιτήματα και κάνουν τον εντοπισμό σφαλμάτων συγκεχυμένο.
WordPress
Η πιο καθαρή εγκατάσταση στο WordPress αποφεύγει την επεξεργασία θεμάτων. Χρησιμοποιήστε ένα πρόσθετο σεναρίων κεφαλίδας (οποιοδήποτε γνωστό θα κάνει), επικολλήστε τον φορτωτή στο πεδίο «σενάρια στο head», αποθηκεύστε και εκκαθαρίστε τυχόν προσωρινή μνήμη σελίδας. Εάν δεν θέλετε ένα πρόσθετο, προσθέστε ένα μικρό αρχείο mu-plugin που συνδέεται με το wp_head με προτεραιότητα 5, έτσι ώστε ο φορτωτής να προσγειωθεί πριν από τις ετικέτες analytics. Μην το επικολλήσετε στο σώμα μιας σελίδας ή ανάρτησης — το WordPress θα φιλτράρει την ετικέτα script.
Ένας συγκεκριμένος έλεγχος για το WordPress: εάν χρησιμοποιείτε πλήρη προσωρινή μνήμη σελίδας (LiteSpeed, WP Rocket, W3 Total Cache), εκκαθαρίστε την προσωρινή μνήμη μετά την εγκατάσταση. Το προσωρινά αποθηκευμένο HTML από πριν την εγκατάσταση δεν θα περιέχει τον φορτωτή.
Shopify
Το Shopify τοποθετεί το HTML του θέματος στο theme.liquid. Στο διαχειριστικό σας Shopify, μεταβείτε στο Online Store → Themes → Actions → Edit code → theme.liquid, και επικολλήστε τον φορτωτή ακριβώς πριν από την ετικέτα κλεισίματος </head>. Αποθηκεύστε. Αυτό είναι όλο — δεν χρειάζεται εφαρμογή, κανένα σενάριο ολοκλήρωσης αγοράς (η ολοκλήρωση αγοράς είναι εκτός του πεδίου αναγνώρισης σε επίπεδο εταιρείας ούτως ή άλλως).
Διπλασιάστε πρώτα ένα θέμα
Πριν επεξεργαστείτε το theme.liquid, χρησιμοποιήστε Actions → Duplicate. Εάν κάτι πάει στραβά, μπορείτε να επιστρέψετε με ένα κλικ. Αυτή είναι μια συνήθεια πέντε δευτερολέπτων που έχει σώσει κάθε ομάδα Shopify στην οποία το έχουμε συστήσει.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Επικολλήστε τον φορτωτή. Αποθηκεύστε. Δημοσιεύστε τον ιστότοπο. Ο κώδικας κεφαλίδας εφαρμόζεται παγκοσμίως σε όλες τις σελίδες, κάτι που είναι ακριβώς αυτό που θέλετε. Μην επικολλήσετε τον φορτωτή σε ένα ενσωματωμένο στοιχείο σε επίπεδο σελίδας — τότε θα παρακολουθείτε μόνο αυτή τη μία σελίδα.
Google Tag Manager
Το GTM λειτουργεί, με δύο επιφυλάξεις. Πρώτον: χρησιμοποιήστε μια προσαρμοσμένη ετικέτα HTML με την ενεργοποίηση να έχει οριστεί σε «Όλες οι Σελίδες», έτσι ώστε ο φορτωτής να εκτελείται σε κάθε προβολή σελίδας. Δεύτερον: ορίστε την προτεραιότητα της ετικέτας αρκετά υψηλή ώστε να εκτελείται πριν από άλλες ετικέτες analytics που μπορεί να καθυστερήσουν το αρχικό φορτίο. Οι χρήστες του GTM συχνά στοιβάζουν τέσσερις ή πέντε ετικέτες στο head· ο φορτωτής είναι μικρός, αλλά η σειρά με την οποία ενεργοποιούνται οι ετικέτες είναι σημαντική εάν θέλετε αναγνώριση στην πρώτη αίτηση.
Προσέξτε τη λειτουργία συναίνεσης: εάν χρησιμοποιείτε το GTM πίσω από ένα banner συναίνεσης που ενεργοποιεί ετικέτες analytics μόνο μετά την επιλογή, μην βάλετε την αναγνώριση σε επίπεδο εταιρείας πίσω από το ίδιο εμπόδιο — δεν χρησιμοποιεί cookies και δεν αποθηκεύει δεδομένα στη συσκευή του επισκέπτη, οπότε δεν χρειάζεται το ίδιο επίπεδο συναίνεσης. Διαμορφώστε την ετικέτα να ενεργοποιείται αμέσως, μαζί με τις απολύτως απαραίτητες ετικέτες σας.
Απλό HTML / δικές σας στοίβες
Για έναν αυτοσχέδιο ιστότοπο ή ένα πλαίσιο που δεν έχουμε αναφέρει, επικολλήστε τον φορτωτή μέσα στο στοιχείο <head> του βασικού σας προτύπου — το αρχείο που αποδίδεται σε κάθε σελίδα. Ανακατασκευάστε και αναπτύξτε ξανά. Για γεννήτριες στατικών ιστότοπων, ο φορτωτής ανήκει στο αρχείο διάταξης σε όλο τον ιστότοπο (στο Next.js, αυτό είναι ένα <Script> στην διάταξη σε επίπεδο εφαρμογής με strategy="afterInteractive"· στο Astro, το στοιχείο <BaseHead>· στο 11ty, το βασικό πρότυπο partial). Εάν το προσθέσατε ως σενάριο σε επίπεδο στοιχείου, μόνο οι σελίδες που περιέχουν αυτό το στοιχείο θα αναφέρουν.
Εφαρμογές μίας σελίδας — η παγίδα
Σε μια SPA, η αρχική προβολή σελίδας καταγράφεται από τον φορτωτή όταν η σελίδα φορτώνεται για πρώτη φορά. Οι διαδοχικές πλοηγήσεις από την πλευρά του πελάτη δεν είναι αυτόματες προβολές σελίδας από την άποψη του προγράμματος περιήγησης. Ο φορτωτής μας ακούει την History API από προεπιλογή, οπότε οι πλοηγήσεις που βασίζονται σε back/forward και pushState καταγράφονται ως νέες προβολές σελίδας χωρίς να χρειάζεται να προσθέσετε κώδικα. Εάν η SPA σας χρησιμοποιεί έναν αποκλίνοντα δρομολογητή που παρακάμπτει την History API (σπάνιο, αλλά δυνατό), καλέστε τη μικρή τεκμηριωμένη λειτουργία pageview σε μια αλλαγή διαδρομής — τρεις γραμμές, που βρίσκονται στην τεκμηρίωση.
Επαληθεύστε την εγκατάσταση σε δύο λεπτά
Η επαλήθευση δεν είναι προαιρετική. Κάντε το πριν κλείσετε την καρτέλα στην οποία εγκαταστήσατε τον φορτωτή· η ανακάλυψη μιας χαλασμένης εγκατάστασης πέντε λεπτά μετά την επικόλληση είναι εύκολη, πέντε ημέρες αργότερα όχι.
- Ανοίξτε τον ιστότοπό σας σε ένα παράθυρο ανώνυμης περιήγησης (ώστε τα προσωρινά αποθηκευμένα αρχεία να μην σας μπερδέψουν).
- Ανοίξτε τα DevTools → καρτέλα Network, φιλτράρετε για «l5e» ή τη διαδρομή του φορτωτή.
- Ανανεώστε τη σελίδα. Θα πρέπει να δείτε ένα αίτημα προς τον φορτωτή, ακολουθούμενο από ένα μικρό identify-beacon. Και τα δύο πρέπει να έχουν κατάσταση 200. Οι κεφαλίδες απόκρισης του φορτωτή πρέπει να περιλαμβάνουν ένα cache-control με s-maxage και stale-while-revalidate.
- Πλοηγηθείτε σε μια δεύτερη σελίδα. Θα πρέπει να δείτε ένα ακόμη identify-beacon να ενεργοποιείται, χωρίς να γίνει εκ νέου λήψη του φορτωτή (θα δώσει ένα 304).
- Επιστρέψτε στον πίνακα ελέγχου του lead.box, ανοίξτε τη ροή ζωντανών επισκεπτών και επιβεβαιώστε ότι εμφανίζεται η δοκιμαστική σας επίσκεψη. Εάν ναι, η εγκατάσταση έχει ολοκληρωθεί.
Συχνά λάθη — ο πίνακας που πρέπει να ελέγξετε πρώτα
| Σύμπτωμα | Πιθανή αιτία | Λύση |
|---|---|---|
| Καθόλου ζωντανές επισκέψεις | Ο φορτωτής λείπει από το head, ή βρίσκεται σε λάθος πρότυπο | Μετακινήστε τον φορτωτή στο head-template σε όλο τον ιστότοπο |
| Ζωντανές επισκέψεις μόνο από ένα τμήμα | Ο φορτωτής σε ένα ενσωματωμένο στοιχείο σε επίπεδο σελίδας, όχι καθολικά | Μετακινήστε στο καθολικό head / κεφαλίδα θέματος |
| Ο φορτωτής φορτώνει, αλλά όχι identify-beacon | Το banner συναίνεσης μπλοκάρει τα σενάρια τρίτων μερών πολύ επιθετικά | Διαμορφώστε το banner ώστε να επιτρέπει τα απολύτως απαραίτητα· ο φορτωτής δεν χρειάζεται συναίνεση |
| Διπλά beacons ανά προβολή σελίδας | Ο φορτωτής εγκαταστάθηκε δύο φορές (θέμα + πρόσθετο/ετικέτα) | Αφαιρέστε ένα |
| Αργή πρώτη εμφάνιση μετά την εγκατάσταση | Ο φορτωτής τοποθετήθηκε πριν από κρίσιμο CSS | Επιβεβαιώστε ότι υπάρχει το χαρακτηριστικό async· τοποθετήστε μετά την προφόρτωση κρίσιμου CSS |
| Η SPA αναφέρει μόνο την πρώτη σελίδα | Ο προσαρμοσμένος δρομολογητής παρακάμπτει την History API | Καλέστε την τεκμηριωμένη pageview() σε αλλαγή διαδρομής |
| Παλιό HTML σερβίρεται χωρίς φορτωτή | Η πλήρης προσωρινή μνήμη σελίδας δεν εκκαθαρίστηκε μετά την εγκατάσταση | Εκκαθαρίστε την προσωρινή μνήμη· επαληθεύστε σε ανώνυμη περιήγηση |
Σημείωση απόδοσης — φορτωτής με edge-cached
Ο φορτωτής σερβίρεται από μια διαδρομή πρώτου μέρους που έχει γίνει proxy στην edge-cache μας με s-maxage=300 και stale-while-revalidate. Στην πράξη, αυτό σημαίνει ότι ο φορτωτής ανακτάται μία φορά κάθε πέντε λεπτά ανά PoP άκρου και στη συνέχεια σερβίρεται από την προσωρινή μνήμη σε κάθε επόμενο επισκέπτη. Ο αντίκτυπος στο μέγεθος του αρχείου και στον χρόνο φόρτωσης είναι τόσο μικρός που αποθαρρύνουμε την προσθήκη επιπλέον λογικής φόρτωσης.
Πότε να ζητήσετε βοήθεια
Εάν έχετε περάσει τα βήματα επαλήθευσης και κάτι εξακολουθεί να μην είναι σωστό, προτιμούμε να το ακούσουμε μετά από δέκα λεπτά παρά μετά από δέκα ημέρες. Παρακαλούμε δώστε τρία πράγματα: τη διεύθυνση URL του ιστότοπου, ένα στιγμιότυπο οθόνης της καρτέλας Network στα DevTools φιλτραρισμένο για τη διαδρομή του φορτωτή και το όνομα της πλατφόρμας στην οποία εγκαταστήσατε. Αυτό είναι αρκετό για να διαγνώσουμε σχεδόν κάθε πρόβλημα εγκατάστασης στην πρώτη απάντηση.
Published by
lead.box Team
Περισσότερα άρθρα
Δείτε το lead.box στο δικό σας traffic
Ξεκινήστε δωρεάν — χωρίς κάρτα, χωρίς κλήση πωλήσεων. Ή κλείστε μια 20λεπτη παρουσίαση αν προτιμάτε την ξενάγηση.