Als PDF, PPTX herunterladen
Hochgeladen vonSebastian Blum
Tag Manager Professional
Sebastian Blum erläutert in seinem Dokument die Verwendung von Google Tag Manager (GTM) und die Vorteile von übergreifenden und individuellen Containern für komplexe Tracking- und Remarketing-Anforderungen auf mehreren Websites. Er betont die Notwendigkeit zur Optimierung der Ladezeiten und zur Sicherstellung der DSGVO-Konformität sowie die Vorteile von Integrationstests zur Gewährleistung der korrekten Tag-Implementierung. Das Dokument enthält zudem technische Details zur Implementierung, dynamischem Laden der Tags und der Nutzung von Testframeworks.
Tag Manager Professional
- 1.
- 2. TAG MANAGER PROFESSIONAL SEBASTIANBLUM ▸ Entwickler Individualentwicklung, primär mit Symfony ▸ Technischer Berater Software-Architektur, technisches SEO, Tracking
- 3.
- 4. “UNSER REMARKETING PIXEL MUSSSO WEIT OBEN WIE MÖGLICH PLATZIERT WERDEN.” So manche Agentur TAG MANAGER PROFESSIONAL
- 5. PAGESPEED & LADEZEITEN RemarketingTag Overkill
- 8.
- 9. MEHRERE TAG MANAGER VERWENDEN Aufeiner Webseite
- 11. TAG MANAGER PROFESSIONAL MEHRERETAG MANAGER VERWENDEN? Sinnvoll, wenn ▸ viele Benutzer sowie unterschiedliche Abteilungen und Dienstleister den GTM benötigen ▸ komplexe Anforderungen an das Tracking und Remarketing-Setup bestehen
- 12. TAG MANAGER PROFESSIONAL MEHRERETAG MANAGER VERWENDEN Setup ▸ System-Container Basis-Setup & Tracking (auch domain-übergreifend möglich!) ▸ spezifischer Remarketing-Container Alle Pixel & Tags für Remarketing und Conversions (wird vom System-Container verzögert geladen)
- 13.
- 14. TAG MANAGER PROFESSIONAL SYSTEM-CONTAINER Einzentraler Container pro System ▸ Corporate Website ▸ Shop ▸ Blog ▸ Microsites / eigenständige Landingpages bei Bedarf domainübergreifend
- 15. TAG MANAGER PROFESSIONAL SYSTEM-CONTAINER ▸Abstraktion für unterschiedliche Data Layer Werte ▸ Hoheit bei IT, kleiner Benutzerkreis, komplex
- 16.
- 17. TAG MANAGER PROFESSIONAL REMARKETING-CONTAINER ▸Ein Remarketing-Container pro Domain ▸ Einfache Tag-Integration für Remarketing-Pixel ▸ Für Marketing-Abteilung, großer Benutzerkreis ▸ System-Container übernahm bereits deferred loading, Webseite bereits geladen
- 18. TAG MANAGER PROFESSIONAL REMARKETING-CONTAINER& ECHTER OPT-OUT ▸ In der Datenschutzerklärung Link für System-Container einbauen ▸ Kompletter Remarketing-Container wird bei gesetztem Cookie nicht mehr ausgelöst ▸ Echtes Opt-Out nach EU-DSGVO und LDA bei Facebook und Co. fordern
- 19. EIN CONTAINER AUF MEHRERENWEBSEITEN System-Container domainübergreifend
- 21. “DAS NEUE FEATUREIST SUPER – ROLLEN SIE ES BITTE AUCH FÜR DIE ANDEREN 50 WEBSEITEN AUS.” TAG MANAGER PROFESSIONAL Kunde mit sehr vielen Webseiten
- 23.
- 24. TAG MANAGER PROFESSIONAL 200GTM-CONTAINER PFLEGEN: ÜBERGREIFENDER CONTAINER ▸ Tags und Trigger für ein Tracking sind beim Einsatz von gleichen Systemen in der Regel identisch (beispielsweise bei einer WordPress oder Drupal Multisite) ▸ Analytics-IDs, Piwik- oder etracker Secure-Codes und Parameter werden über Suchtabellen ausgesteuert ▸ Neue Features werden immer systemweit auf alle (technisch gleichen) Seiten ausgerollt => Pflegbarkeit gewährleisten & Synergie-Effekte nutzen
- 25.
- 26. GTM QUEUE Synchrone Tagsin asynchronem GTM?
- 27. TAG MANAGER PROFESSIONAL DYNAMISCHESLADEN MIT CALLBACK ▸ Unsere Empfehlung: einzelne Dienste dynamisch laden und danach ein Custom-Event erzeugen ▸ Korrekte Reihenfolge der Tags ohne Seiteneffekte ▸ Sprechende Events ▸ Wir empfehlen und verwenden: Toast https://github.com/pyrsmk/toast
- 28.
- 29. INTEGRATIONSTESTS 3 Container, 20Tags, 50 Webseiten
- 30. TAG MANAGER PROFESSIONAL INTEGRATIONSTESTSMIT SCREAMING FROG ▸ dataLayer via Custom Regex-Extraction ▸ Existenz von JavaScript Files im DOM (render) ▸ Existenz von Tracking Images im DOM (render)
- 31. TAG MANAGER PROFESSIONAL INTEGRATIONSTESTSMIT JAVASCRIPT TEST-FRAMEWORKS ▸ WebdriverIO (Browsersteuerung) & Chai (Test Bibliothek) ▸ Test mit unterschiedlichen Browsern möglich ▸ Google Chrome (auch headless d. h. ohne sichtbares Browserfenster) ▸ PhantomJS (Kommandozeilenversion der Webkit-Engine) ▸ Firefox, Internet Explorer, …
- 32. TAG MANAGER PROFESSIONAL INTEGRATIONSTESTSMIT JAVASCRIPT TEST-FRAMEWORKS ▸ Statt eines einfachen JavaScripts geht auch testgetriebenes TypeScript, welches mit einem Preprocessor in ES5 umgewandelt wird. ▸ Automatisierte CI Tests mit Travis (für Chrome und PhantomJS) und AppVeyor (IE11) möglich
- 33. TAG MANAGER PROFESSIONAL INTEGRATIONSTESTSMIT JAVASCRIPT TEST-FRAMEWORKS PhantomJS Chrome Session- / LocalStorage ✘ ✔ Abfrage JavaScript-Fehler ✔ ✘ Ressourcenschonend ✘ ✔ Leichtes Debugging ✘ ✔
- 34.
- 35. TAG MANAGER PROFESSIONAL MINI-TOOLBARAUF BASIS DER DATEN IM WINDOW-OBJECT ▸ Es wird lediglich ein JavaScript eingebunden. ▸ Toolbar kann ohne Zugriff auf Tag Manager genutzt werden ▸ Hilfestellung für Fachabteilungen wie Marketing oder externe Agentur ▸ Schneller Überblick der auslösenden Tags mit den Variablen auch ohne Zugriff auf die Tag Manager Container (und Netzwerkanalyse)
- 36. TAG MANAGER PROFESSIONAL TECHNIK ▸Toolbar in TypeScript (ES6) geschrieben ▸ Automatische Code-Erzeugung für den Google Tag Manager ▸ Testgetriebene Entwicklung mit Karma und Jasmine
- 37.
- 38.
- 39. TAG MANAGER PROFESSIONAL ERFAHRUNGENMIT TAG MANAGER PROFESSIONAL SETUP ▸ Deutliche Arbeitserleichterung beim Verbessern des Trackings für viele Websites (Konzept übergreifende und individuelle Container) ▸ Schnelle Ladezeiten trotz des Einsatzes mehrerer Trackingsysteme, Remarketing- und Conversion-Tags (Toast-Queue) ▸ Sicherheit, dass einmal implementierte Tags auch nach einem Umbau immer noch vorhanden sind und korrekt in den richtigen Account feuern (Integrationstests)
- 40. VIELEN DANK FÜR EUREAUFMERKSAMKEIT Sebastian Blum sb@sblum.de Mehr Infos auf der Website https://www.sblum.de/tagmanager