Μετά τη δημιουργία ενός container μπορούμε να λάβουμε τον κώδικα για την εγκατασταση στο website. Πρόκειται για δύο κομμάτια κώδικα.
Το πρώτο πρέπει να τοποθετηθεί στο HEAD section κάθε σελίδας και το δεύτερο αμέσως μετά το BODY tag. Το δεύτερο δεν είναι απολύτως απαραίτητο.
Σε ένα custom site αυτό γίνεται με απευθείας παρέμβαση στον κώδικα. Καθώς όμως τα περισσότερα sites σήμερα έχουν δημιουργηθεί με κάποια πλατφόρμα, υπάρχουν πλέον εξειδικευμένες και πιο εύκολες μέθοδοι για την εγκατάσταση.
WordPress
Στο WordPress συνήθως σρησιμοποιούμε το GTM4WP. Πρόκειται για πολυδύναμο plugin που εκτός από την εγκατασταση του GTM, προσφέρει εξαιρετικές λύσεις για GA4 eCommerce Tracking και αρκετές ακόμα λύσεις.
Σε περίπτωση που έχουμε ένα απλό site μπορούμε εναλλακτικά να χρησιμοποιήσουμε κάποιο “headers and footers” plugin για την εισαγωγή του κώδικα. Υπάρχουν πολλά. Συνήθως χρησιμοπoιώ το WP Code.
Using plugins
GTM4WP
WP Code
Manual integration
Υπάρχει η δυνατότητα να εισάγουμε τον κώδικα του GTM μέσα από την επιλογή
Appearance ⟶ Theme Files Editor
αλλα η μέθοδος αυτή πρέπει να αποφεύγεται.
Magento 2
Using plugins
Η εγκατασταση στο Magento 2 γίνεται συνήθως με ένα από τα ακόλουθα δύο plugins και πρακτικά συνοδεύεται από την παραμετροποίηση για GA4 eCommerce Tracking (και άλλες υπηρεσίες που πιθανώς υποστηρίζονται, πχ Facebook Pixel etc)
- Anowave: Magento 2 Google Tag Manager Enhanced Ecommerce (GA4) Tracking
- Weltpixel: Google Analytics 4 (GA4) With GTM Support for Magento 2
Άλλα λιγότερο χρησιμοποιούμενα plugins:
- Amasty: Google Analytics 4 with GTM Support for Magento 2
- Magefan: Magento 2 Google Tag Manager & GA4
- Mageplaza: Magento 2 Google Tag Manager Extension (GTM) – Enhanced Ecommerce UA Tracking – Integrated GA4
- Meetanshi: Magento 2 Google Analytics 4 (GA4) Using GTM
Manual integration
Αν και σπάνια χρησιμοποιείται, η εγκατασταση μπορεί να γίνει και manually:
Από το Magento Admin Panel επιλέγουμε
Content ⟶ Design ⟶ Configuration ⟶ Edit the Store View ⟶ Other Settings ⟶ HTML Head
και τοποθετούμε τον βασικό κώδικα για το HEAD εδώ.
Στη συνέχεια στο Footer section τοποθετούμε το δεύτερο τμήγα κώδικα στο “Miscellaneous HTML.”
Τέλος αποθηκεύουμε τις αλλαγές.
Shopify
Η βασική εγκατάσταση γίνεται ως εξής:
theme.liquid file
Βρίσκουμε το αρχείο ως εξής:
Online Store ⟶ Themes ⟶ Edit code ⟶ theme.liquid
Τοποθετούμε το πρώτο κομμάτι κώδικα αμέσως μετά το HEAD tag και το δεύτερο αμέσως μετά το BODY tag και προφανώς αποθηκεύουμε τις αλλαγές.
order confirmation page
Settings ⟶ Checkout ⟶ Order Status Page ⟶ Additional Scripts
Τοποθετούμε το πρώτο κομμάτι κώδικα και αποθηκεύουμε τις αλλαγές.
Credits
- Pixabay https://pixabay.com/photos/programming-computer-environment-1857236/
- The perfect tattoo doesn’t exi- meme: https://www.reddit.com/r/ProgrammerHumor/comments/hf98v0/the_perfect_tattoo_doesnt_exi/?rdt=44002