Warum mehrere Tag Manager auf einer Website und umgekehrt ein Tag Manager auf mehreren Webseiten durchaus sinnvoll sein können: professioneller Einsatz des Google Tag Managers für Online-Marketing, Agenturen und technische Dienstleister.

1. TAG MANAGER PROFESSIONAL
Sebastian Blum

2. TAG MANAGER PROFESSIONAL
SEBASTIAN BLUM
▸ Entwickler
Individualentwicklung, primär mit Symfony
▸ Technischer Berater
Software-Architektur, technisches SEO, Tracking

3. SYSTEM- UND REMARKETING
CONTAINER
Teil 1

4. “UNSER REMARKETING PIXEL
MUSS SO WEIT OBEN WIE
MÖGLICH PLATZIERT WERDEN.”
So manche Agentur
TAG MANAGER PROFESSIONAL

5. PAGESPEED & LADEZEITEN
Remarketing Tag Overkill

8. LÖSUNG?

9. MEHRERE TAG MANAGER
VERWENDEN
Auf einer Webseite

11. TAG MANAGER PROFESSIONAL
MEHRERE TAG 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
MEHRERE TAG 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. SYSTEM-CONTAINER
Im HTML-Code eingebettet

14. TAG MANAGER PROFESSIONAL
SYSTEM-CONTAINER
Ein zentraler 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. REMARKETING-CONTAINER
Vom System-Container ausgelöst

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
MEHREREN WEBSEITEN
System-Container domainübergreifend

21. “DAS NEUE FEATURE IST SUPER –
ROLLEN SIE ES BITTE AUCH FÜR
DIE ANDEREN 50 WEBSEITEN AUS.”
TAG MANAGER PROFESSIONAL
Kunde mit sehr vielen Webseiten

23. ÜBERGREIFENDE CONTAINER

24. TAG MANAGER PROFESSIONAL
200 GTM-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. TAG MANAGER PROFESSIONAL
ÜBERGREIFENDER CONTAINER

26. GTM QUEUE
Synchrone Tags in asynchronem GTM?

27. TAG MANAGER PROFESSIONAL
DYNAMISCHES LADEN 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. ASYNCHRONES LADEN MIT TOAST

29. INTEGRATIONSTESTS
3 Container, 20 Tags, 50 Webseiten

30. TAG MANAGER PROFESSIONAL
INTEGRATIONSTESTS MIT 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
INTEGRATIONSTESTS MIT 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
INTEGRATIONSTESTS MIT 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
INTEGRATIONSTESTS MIT JAVASCRIPT TEST-FRAMEWORKS
PhantomJS Chrome
Session- / LocalStorage ✘ ✔
Abfrage JavaScript-Fehler ✔ ✘
Ressourcenschonend ✘ ✔
Leichtes Debugging ✘ ✔

34. TOOLBAR
Helfer in JavaScript

35. TAG MANAGER PROFESSIONAL
MINI-TOOLBAR AUF 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. TAG MANAGER PROFESSIONAL

38. FAZIT
Erfahrungen mit vorgestelltem Setup

39. TAG MANAGER PROFESSIONAL
ERFAHRUNGEN MIT 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 EURE AUFMERKSAMKEIT
Sebastian Blum
sb@sblum.de
Mehr Infos auf der Website
https://www.sblum.de/tagmanager