Προσθήκη μετρητή Stats4U με το Google Tag Manager

Υπάρχει ένας οδηγός για αυτό στο ιστολόγιο από το 2015. Τα στιγμιότυπα οθόνης του δείχνουν ένα Tag Manager που δεν μοιάζει πια έτσι, και ένα από τα επτά βήματά του – η επιλογή του document.write – δεν χρειάζεται πλέον καθόλου. Αυτό το άρθρο τον αντικαθιστά.

Απαντά επίσης στο ερώτημα που ο παλιός οδηγός είχε εγκαταλείψει. Εκείνος πρότεινε τον αόρατο μετρητή με το Tag Manager, με το σκεπτικό ότι η θέση της εικόνας των στατιστικών δεν μπορούσε να ελεγχθεί. Μπορεί. Η εξήγηση βρίσκεται στο κάτω μέρος αυτής της σελίδας.

Η σύντομη εκδοχή

Στο Tag Manager: Ετικέτες → Νέα → Προσαρμοσμένο HTML, και επικολλήστε μία γραμμή στο πεδίο HTML:

<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Ως ενεργοποιητής ορίζεται το Όλες οι σελίδες· έπειτα αποθηκεύστε και δημοσιεύστε το κοντέινερ. Το χαρακτηριστικό data-id παίρνει τον αριθμό μετρητή, που αναγράφεται στη σελίδα στατιστικών.

Αυτή είναι όλη η δουλειά – τρία πεδία και ένας ενεργοποιητής, εκεί όπου το 2015 χρειάζονταν επτά βήματα. Δεν χρειάζεται να επιλεγεί τίποτα σχετικά με το document.write, επειδή το script δεν το χρησιμοποιεί πια.

Τι κάνει στην πραγματικότητα, και γιατί ίσως δεν είναι η σωστή επιλογή

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

Μέσω του Tag Manager είναι διαφορετικά, επειδή η τοποθέτηση δεν είναι πλέον ελεύθερη επιλογή. Αποφασίζει το κοντέινερ, το οποίο συνήθως βρίσκεται στο head του εγγράφου ή όπου εγκαταστάθηκε ο κώδικας του κοντέινερ. Έτσι ο μετρητής εισάγεται εκεί – όχι στο υποσέλιδο, όχι στην πλαϊνή στήλη, αλλά όπου έτυχε να εισαγάγει την ετικέτα το Tag Manager.

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

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

Έλεγχος του σημείου όπου εμφανίζεται ο μετρητής

Το script έχει μια δεύτερη λειτουργία που ο παλιός οδηγός δεν ανέφερε ποτέ. Αντί για το χαρακτηριστικό data-id δέχεται μια λίστα και αναζητά στοιχεία κράτησης θέσης με βάση το ID τους.

Βήμα πρώτο – ένα στοιχείο κράτησης θέσης στη σελίδα, εκεί όπου ανήκει ο μετρητής. Μπαίνει στο ίδιο το πρότυπο του ιστοτόπου, όχι στο Tag Manager, γιατί ακριβώς το Tag Manager θέλουμε να κρατήσουμε έξω από αυτή την απόφαση:

<div id="s4u_cp0"></div>

Βήμα δεύτερο – στο Tag Manager, αυτό αντικαθιστά τη μία γραμμή. Ίδιος τύπος ετικέτας, Προσαρμοσμένο HTML:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

Βήμα τρίτο – αλλάξτε τον ενεργοποιητή. Αυτό είναι το σημείο όπου σκοντάφτουν οι περισσότεροι. Το Όλες οι σελίδες ενεργοποιείται όσο νωρίτερα μπορεί το Tag Manager, συχνά πριν υπάρξει καν το στοιχείο κράτησης θέσης στο έγγραφο. Ο ενσωματωμένος ενεργοποιητής DOM Ready είναι ο σωστός εδώ. Ο μετρητής πρέπει να φτάσει μετά το div, όχι πριν από αυτό.

Ο μετρητής εμφανίζεται πλέον μέσα σε εκείνο το div και πουθενά αλλού.

Έλεγχος των σελίδων όπου εμφανίζεται

Υπάρχουν εδώ δύο ανεξάρτητοι μοχλοί, και αξίζει να τους κατανοήσετε χωριστά.

Ο ένας είναι το στοιχείο κράτησης θέσης. Τη δουλειά την κάνει η πρώτη γραμμή μέσα στη συνάρτηση: αν δεν υπάρχει s4u_cp0 στη σελίδα, σταματά και το script δεν κατεβαίνει καν. Έτσι, ένα πρότυπο που περιλαμβάνει το div παίρνει μετρητή και ένα που δεν το περιλαμβάνει δεν παίρνει – η απόφαση λαμβάνεται στα ίδια τα πρότυπα του ιστοτόπου, χωρίς αλλαγή στο Tag Manager και χωρίς βήμα δημοσίευσης.

Ο άλλος είναι ο ενεργοποιητής. Η ίδια απόφαση μπορεί να ληφθεί εναλλακτικά στο Tag Manager: μια συνθήκη στον ενεργοποιητή, ώστε να ενεργοποιείται στο DOM Ready μόνο όπου ταιριάζει το Page Path. Ο ενεργοποιητής ταιριάζει σε κανόνες για διευθύνσεις URL, το στοιχείο κράτησης θέσης σε κανόνες για πρότυπα.

Περισσότεροι από ένας μετρητές σε μια σελίδα

Η λίστα δέχεται όσους χρειάζονται. Η θέση στη λίστα είναι ο αριθμός στο ID του στοιχείου κράτησης θέσης:

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

Ο πρώτος μπαίνει στο s4u_cp0, ο δεύτερος στο s4u_cp1. Και οι δύο ελέγχθηκαν σε πρόγραμμα περιήγησης κατά τη συγγραφή αυτού του άρθρου: ο πρώτος εμφανίστηκε ως εικονίδιο 20 επί 20, ο δεύτερος ως λωρίδα 162 επί 25, ο καθένας μέσα στο δικό του στοιχείο κράτησης θέσης και πουθενά αλλού στη σελίδα.

Τέσσερα σημεία που δημιουργούν προβλήματα

Οι δύο μέθοδοι δεν συνδυάζονται. Μια ετικέτα που έχει data-id ως χαρακτηριστικό και ορίζει τη λίστα παράγει δύο μετρητές, και οι δύο προβολές μετρώνται χωριστά.
Η λίστα χρειάζεται πάντα s4ustyleid. Το χαρακτηριστικό data-style επιστρέφει σιωπηρά στο σχέδιο 30 όταν λείπει. Η εκδοχή με τη λίστα δεν έχει τέτοια εφεδρική τιμή και θα ζητήσει κενό σχέδιο.
Ένα στοιχείο κράτησης θέσης που λείπει αποτυγχάνει σιωπηλά. Κανένας μετρητής, κανένα σφάλμα, τίποτα στην κονσόλα. Όταν δεν εμφανίζεται τίποτα, πρώτος ύποπτος είναι το ID – s4u_cp0, με μηδέν, όχι με το γράμμα O.
Ο αόρατος μετρητής δεν έχει σύνδεσμο σκόπιμα. Το σχέδιο 980 εμφανίζεται χωρίς σύνδεσμο, επειδή ένας διαφανής στόχος κλικ ενός pixel στη σελίδα κάποιου άλλου είναι παγίδα και όχι λειτουργία. Για σύνδεσμο υπάρχει το σχέδιο 981, με το μικρό του εικονίδιο.

Έλεγχος ότι λειτούργησε

Στο Tag Manager, η λειτουργία Προεπισκόπηση φορτώνει τη σελίδα με ενεργό το κοντέινερ. Η ετικέτα θα πρέπει να εμφανίζεται στις ετικέτες που ενεργοποιήθηκαν για το συμβάν DOM Ready. Στη συνέχεια το επιβεβαιώνει η σελίδα στατιστικών – μια επίσκεψη μέσω Προεπισκόπησης μετράει όπως κάθε άλλη, οπότε ο αριθμός θα πρέπει να αλλάξει μέσα σε λίγα δευτερόλεπτα.

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