Google Tag Manager: Ευελιξία και δύναμη στην ιστοσελίδα σας Παναγιώτης Τζαμτζής Analytics Consultant / Data Collection Architect panagiotis@baresquare.com

Τι είναι ένα Tag management systems (TMS) Με 1 γραμμή κώδικα JavaScript Αλλαγές στον κώδικα της σελίδας μέσω ενός online περιβάλλοντος (less coding) Επιτρέπει εγκατάσταση JavaScript, HTML και CSS Οι λειτουργίες εκτελούνται στον browser (Client-side)

Εργαλεία που υποστηρίζονται Analytics Remarketing Παρακολούθηση αγορών Online chat Online ερωτηματολόγια Heat maps User recordings A/B test Διαχείριση popups Εργαλεία καταγραφής σφαλμάτων (bugs) Λειτουργικές αλλαγές (CSS, JavaScript, HTML, Cookies)

Πριν τα TMS Όλα αυτά αλλάξανε τα τελευταία 6 – 7 χρόνια! Κάθε αλλαγή ήταν μέρος των διαδικασιών αλλαγής του website ελάχιστος χρόνος αναμονής 30 – 60 μέρες Διαδικασία που περιλάμβανε 20 – 30 άτομα Προγραμματισμός αλλαγής 3 μήνες νωρίτερα Σε περίπτωση bug διόρθωση μετά από 1 μήνα Όλα αυτά αλλάξανε τα τελευταία 6 – 7 χρόνια!

Γιατί TMS? Γρηγορότερο website Πιο εύκολες και γρήγορες αλλαγές Λιγότερα λάθη κατά την συλλογή δεδομένων Μείωση κόστους Εύκολη διαχείριση περισσότερων εργαλείων Αναίρεση αλλαγών με ένα κλικ (Rollback)

Η αγορά σήμερα

Η αγορά σήμερα (Enterprise clients)

Η αγορά σήμερα (Όλα τα website)

Πως λειτουργεί? Τεχνικά χαρακτηριστικά Κανόνες / φίλτρα εκτέλεσης κώδικα Έτοιμα templates Minification πηγαίου κώδικα Έλεγχος για λάθη Ασύγχρονη εκτέλεση TMS ( 1 ) TMS Server ( 2 )

Απαραίτητες γνώσεις HTML JavaScript Regex CSS Selectors jQuery http://learn.shayhowe.com/html-css/ https://www.udacity.com/course/cs253 JavaScript http://jsforcats.com/ https://developer.mozilla.org/en- US/docs/Web/JavaScript Regex https://regexone.com/ http://www.regexpal.com/ CSS Selectors http://learn.shayhowe.com/advanced- html-css/complex-selectors jQuery http://learn.jquery.com/ http://api.jquery.com/ Web page performance https://www.webpagetest.org/ https://developers.google.com/speed/pa gespeed/insights/

Εγκατάσταση http://sample.baresquare.eu/

Πώς συλλέγουμε δεδομένα; 1 x 1

energy analytics and workflow automation holistic use of solutions at global HQ level sports analytics communication for audience engagement reporting automation, comprehensive business answers data collection: tag management, QA, integrations ONLINE MARKETING & ECOMMERCE ANALYTICS EVENTS & SPORTS ANALYTICS ENERGY ANALYTICS

Google Tag Manager για προχωρημένους

Χρήσιμοι όροι Variables Είναι ένα μέσο προσωρινής αποθήκευσης που μπορούμε να χρησιμοποιήσουμε για να οργανώσουμε την πληροφορία μας Triggers / Events Όπως χρησιμοποιούμε τα events σε όλες τις γλώσσες προγραμματισμού, τα χρησιμοποιούμε για να ειδοποιήσουμε το TMS ότι έχει ολοκληρωθεί μια ενέργεια Tags Κομμάτια πηγαίου κώδικα, τα οποία έχουν πρόσβαση στα variables και ενεργοποιούνται βάσει των triggers

#1 Προσωπικά δεδομένα Αναζήτηση στοιχείων που μπορεί να είναι email Δημιουργία Regex κανόνα που βρίσκει που βρίσκει email Αντικατάσταση email με μια άλλη τιμή (π.χ. “[PII_Mask-email]”) Το URL θα πρέπει να είναι decoded για να εντοπίζεται πάντα ένα email

#1 Προσωπικά δεδομένα Δημιουργία καινούργιου variable στο GTM, με πηγαίο κώδικα http://sample.baresquare.eu/techsaloniki-2017-workshop/1-προσωπικά-δεδομένα/

#2 Συνδυάζοντας διαφορετικά δεδομένα Επιλέγουμε το web service που θέλουμε να εξάγουμε δεδομένα Δημιουργούμε ένα καινούργιο tag που επικοινωνεί με αυτό Χρησιμοποιούμε ένα trigger για να καταλάβουμε ότι ολοκληρώθηκε η επικοινωνία με το web service Αποθηκεύουμε τα αποτελέσματα στο data layer

#2 Συνδυάζοντας διαφορετικά δεδομένα Για να χρησιμοποιήσουμε τα αποτελέσματα, δημιουργούμε ένα καινούργιο tag το οποίο ενεργοποιείται από το trigger που ορίσαμε στο προηγούμενο βήμα http://sample.baresquare.eu/techsaloniki-2017-workshop/2-συνδυάζοντας-δεδομένα/

#3 Εντοπισμός Adblocker Όλοι οι adblocker ψάχνουν για συγκεκριμένα αρχεία ή URLs που μπορεί να “προδίδουν” μια διαφήμιση. Φορτώνουμε ένα “δόλωμα” για να δούμε αν θα “περάσει” Φορτώνουμε το αρχείο δόλωμα όσο νωρίτερα μπορούμε και synchronously Το αρχείο δόλωμα αποτελείται από λέξεις κλειδιά όπως “advertisement.js” και “ad_url”

#3 Εντοπισμός Adblocker Όταν ολοκληρωθεί το φόρτωμα της σελίδας ψάχνουμε αν “τσίμπησε” κανείς το δόλωμα Υπάρχουν adblockers που θα μπλοκάρουν ακόμα κα το Google Tag Manager http://sample.baresquare.eu/techsaloniki-2017-workshop/3-εντοπισμός-adblocker/

#4 Βελτιώσεις SEO Οι crawler του Google άρχισαν πρόσφατα να υποστηρίζουν λίγη JavaScript Σε ένα καινούργιο tag απλά γράφουμε τον JavaScript κώδικα που θα μας κάνει τις απαραίτητες αλλαγές στα SEO meta tags Καλό είναι να τοποθετηθούν τέτοιου είδους tag είτε στο pageview ή στο DOM ready trigger. Αν χρησιμοποιούμε jQuery βεβαιωνόμαστε ότι υπάρχει διαθέσιμο πριν γίνουν trigger! http://sample.baresquare.eu/techsaloniki-2017-workshop/4-αλλαγές-seo/

#4 Βελτιώσεις SEO Μπορούμε να προσθέσουμε ακόμα και εξτρά δομημένες πληροφορίες (Rich data format) με το κατάλληλο JSON schema Αρχικά βρίσκουμε το κατάλληλο schema Το προσθέτουμε σε ένα καινούργιο tag

#4 Βελτιώσεις SEO http://sample.baresquare.eu/techsaloniki-2017-workshop/4-αλλαγές-seo/

#5 Εμπλουτισμός δεδομένων Αποθηκεύουμε πληροφορία για τους χρήστες (π.χ. Τελευταία επίσκεψη)

#5 Εμπλουτισμός δεδομένων Οργανώνουμε την πληροφορία σε λογικές ομάδες (π.χ. σύνολο επισκέψεων μέσα σε ένα χρονικό διάστημα)

#5 Εμπλουτισμός δεδομένων Ενεργοποίηση λειτουργίας βάσει της ομάδας ή συνδυασμού ομάδων ενός επισκέπτη (π.χ. προσφορές ή suggestions) http://sample.baresquare.eu/techsaloniki-2017-workshop/5-εμπλουτισμός-δεδομένων/

#6 Μετασχηματισμός δεδομένων Κοινή μορφοποίηση τιμών (π.χ. νομίσματα, ημερομηνίες) £ 480,00 $ 39.99 RUB 2.499 € 1,350.00 ¥ 600 Lookup tables Προϊόντα ανά κατηγορία Πηγές εισόδου ανά είδος Μετάφραση όρων σε κοινή γλώσσα Μετατροπή σε lowercase

#6 Μετασχηματισμός δεδομένων Αντικατάσταση κειμένου Χαρακτήρες που δεν εμφανίζονται σωστά Μορφοποίηση που επιτρέπει την ευκολότερη ανάλυση δεδομένων Έλεγχος τιμών Ανήκει μια τιμή σε ένα σύνολο δεδομένων; Δημιουργία τυχαίων τιμών Sampling Randomization

#6 Μετασχηματισμός δεδομένων Δημιουργία μεταβλητών στο GTM με πηγαίο κώδικα για μετασχηματισμό http://sample.baresquare.eu/techsaloniki-2017-workshop/6-μετασχηματισμός-δεδομένων/

Don’t be a stranger! Connect with us: At our booth www.baresquare.com www.facebook.com/baresquare Contact me directly on LinkedIn Stay tuned for our next Digital analytics meetup