Το Google tag manager (GTM) είναι ένα Tag Management System (TMS) που δίνει την δυνατότητα να κάνουμε εύκολα και γρήγορα αλλαγές στον πηγαίο κώδικα ενός website. Συνήθως χρησιμοποιείται από ομάδες marketing με σκοπό την ανάλυση της κίνησης του website (analytics) και την βελτιστοποίηση των εργαλείων προώθησης της ιστοσελίδας. To GTM, όπως και πολλά άλλα TMS, χρησιμοποιείται από εκατομμύρια website, αφού είναι μια από τις τεχνολογίες που έχουν εξελίξει το web marketing και τα web analytics τα τελευταία χρόνια. Στο συγκεκριμένο workshop θα ανακαλύψουμε μαζί πως λειτουργεί ένα TMS και τους λόγους που θεωρείται απαραίτητο σήμερα. Όπως επίσης θα δούμε πρακτικές εφαρμογές που μπορεί να ξεφεύγουν από αυτές που φαντάζεται ένα αρχάριος χρήστης. Το περιεχόμενο ενδείκνυται για όσους έχουν χρησιμοποιήσει κάποιο εργαλείο web marketing ή web analytics (π.χ. Google analytics, Floodlight κτλ) και θέλουν να δουν πως μπορούν να δώσουν ακόμα περισσότερο νόημα στα δεδομένα που συλλέγουν. Και για αυτούς που έχουν γνώσεις web development και θέλουν να κάνουν την διαδικασία ανανέωσης ενός website πιο εύκολη και γρήγορη.

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

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

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

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

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

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

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

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

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

10. Απαραίτητες γνώσεις
> HTML
• 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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32. 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