Eine sinnvolle Website-Struktur ist nicht nur für ein gutes Nutzererlebnis und erfolgreiche Suchmaschinen-Rankings wichtig. Auch Tracking-Tools profitieren von einer bewussten Strukturierung und Benennung der Elemente von Websites und Online-Shops. Im Folgenden werden einige Grundsätze vorgestellt, die bei der Gestaltung von Online-Auftritten beachtet werden sollten. Damit wird sichergestellt, dass über Tracking-Tools wie Google Analytics, Matomo Analytics oder das Meta-Pixel das Nutzerverhalten auf Websites und in Online-Shops bestmöglich erfasst und ausgewertet werden kann.
Tracking-Tool-Implementierung
Tracking-Tools wie Google Analytics oder Matomo Analytics können entweder direkt oder über einen Tag Manager auf Websites und in Online-Shops implementiert werden. Die Implementierung über einen Tag Manager ist zu bevorzugen, da sie die weitere Konfiguration und Administration des Tracking-Setups deutlich vereinfacht.
Unabhängig von der verwendeten Methode muss in beiden Fällen in der Regel ein JavaScript-Code-Snippet in den Quellcode der Online-Präsenz eingefügt werden. Für ein vollständiges Tracking muss dieser Code möglichst weit oben im Head-Bereich aller HTML-URLs der jeweiligen Domain eingebunden werden. Dies geschieht entweder durch direktes Editieren des HTML-Quellcodes oder durch ein entsprechendes Plugin.
Für den Einsatz von Tracking-Tools auf Websites und in Online-Shops muss neben der vollumfänglichen Information in der Datenschutzerklärung in den allermeisten Fällen eine aktive Einwilligung der Website-Besucher eingeholt werden. Dies geschieht in der Regel über ein Consent-Banner. Die Code-Snippets der Tracking-Tools müssen daher so eingebunden werden, dass sie erst dynamisch geladen werden, nachdem der Website-Besucher seine Einwilligung gegeben hat.
Dies gilt auch für die Basiscodes von Tag Managern, selbst wenn die darin enthaltenen Tracking-Tags so konfiguriert sind, dass sie erst nach Zustimmung des Nutzers ausgelöst werden. Denn bereits mit dem Laden des JavaScript-Code-Snippets werden in den Standardeinstellungen Daten von den Servern der Tool-Anbieter im Browser des Nutzers geladen, wodurch mindestens die IP-Adresse als personenbezogenes Datum an den Tool-Anbieter übermittelt wird.
Das Nachladen des Tracking-Tool-Codes muss dynamisch erfolgen, d. h. unmittelbar nach der Zustimmung des Webseitenbesuchers. Die Seite darf nicht neu geladen werden, da sonst die für das Tracking sehr wichtige Information über die Traffic-Quelle des ursprünglichen ersten Seitenaufrufs verloren geht und die entsprechenden Informationen nicht mehr korrekt zugeordnet werden können.
Der Data Layer
Zu den Grundsätzen des modernen Webdesigns gehört die Trennung von Inhalt, Darstellung und Verhalten einer Website. HTML definiert die Struktur und den Inhalt einer Website. CSS sorgt für die Formatierung und Gestaltung des Layouts und mit JavaScript werden in der Regel Website-Funktionalitäten wie Menüs und andere Interaktivitäten umgesetzt. Für ein funktionierendes Webtracking muss diesem Trio eine vierte Schicht hinzugefügt werden: Die Datenschicht oder auf Englisch Data Layer.
Ein Data Layer ist ein JavaScript-Objekt, das wichtige Daten, die in Tracking-Tools erfasst werden sollen, zentral zur Verfügung stellt. Dazu gehören beispielsweise E-Commerce-Bestelldaten wie Transaktions-ID, Umsatz und verkaufte Produkte bei Einkäufen in Online-Shops. Ohne Data Layer müssten sich die Tracking-Tools die entsprechenden Informationen aus dem Inhalt der Website ziehen, sofern sie bspw. auf der Bestellbestätigungsseite überhaupt vorhanden sind. Damit wäre das Funktionieren des Trackings vom Inhalt und der Gestaltung der Website abhängig und müsste bei jeder inhaltlichen Anpassung überprüft und ggf. korrigiert werden.
Über den Data Layer werden die für das Tracking relevanten Daten also unabhängig von der Gestaltung der Website oder des Online-Shops bereitgestellt, was das Tracking-Setup deutlich robuster macht. Tag Management Systeme wie der Google Tag Manager oder der Matomo Tag Manager können auf diese Daten zugreifen und sie über Tags an die entsprechenden Tracking Tools (z. B. Google Analytics, Matomo Analytics, Meta Pixel) weitergeben. Somit können die Daten aus dem Data Layer für alle zu implementierenden Tracking-Tools genutzt werden.
Die Benennung des Data-Layer-Objekts ist in der Regel abhängig vom genutzten Tag Management System und muss wie in der jeweiligen Entwickler-Dokumentation beschrieben benannt werden, damit die Daten verarbeitet werden können. Einige Beispiele:
- Google Tag Manager: dataLayer
- Matomo Tag Manager: _mtm
- Tealium: utag_data
- Mapp: _ti
Die im Folgenden abgebildeten Code-Beispiele sind auf das in der Regel vom Google Tag Manager genutzte Data-Layer-Objekt dataLayer abgestimmt.
Der Data Layer ist nicht persistent, sondern wird bei jedem Seitenaufruf neu erzeugt. Das Data-Layer-Objekt wird üblicherweise beim Seitenaufruf initiiert und die darin abzubildenden Daten über eine push-Funktion in das Objekt geschrieben.
Die Code-Zeile window.dataLayer = window.dataLayer || []; stellt sicher, dass ein bestehendes dataLayer-Objekt mit bereits enthaltenen Daten nicht überschrieben wird. Alternativ wird ein leeres dataLayer-Objekt initiiert. Damit laufen die über die push-Funktion übergebenen Daten nicht ins Leere, wenn aus irgendeinem Grund das dataLayer-Objekt noch nicht existiert.
Bsp.: Initiierung des dataLayer-Objekts und Bereitstellung von Seiteninformationen im Data Layer direkt beim Seitenaufruf
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'pageTitle': 'Titel der Seite',
'pageCategory': 'Startseite'
'loginStatus': 'notLoggedIn'
});
Bsp.: Dynamisches Schreiben der Bestell- und Produktinformationen in das bestehende dataLayer-Objekt beim Kauf-Ereignis purchase
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: 'T_12345',
value: 25.42,
tax: 4.90,
shipping: 5.99,
currency: 'EUR',
coupon: 'SUMMER_SALE',
items: [{
item_id: 'SKU_12345',
item_name: 'Produktname',
affiliation: 'Beispiel-Online-Shop',
discount: 0,
index: 0,
item_brand: 'Beispielmarke',
item_category: 'Beispielkategorie',
price: 9.99,
quantity: 1
}]
}
});
Grundsätzlich gilt, dass alle in Tracking-Tools zu erfassenden Nutzerereignisse inklusive der damit verbundenen Daten im Data Layer abgebildet werden sollten. Neben den E-Commerce-Interaktionen können das beispielsweise erfolgreich abgeschickte Formulare inklusive des Formularnamens oder Klicks auf klickbare E-Mail-Adressen und Telefonnummern inklusive der geklickten E-Mail-Adresse bzw. Telefonnummer sein.
Bsp.: Senden eines JavaScript-Events formSent inklusive des Formularnamens in den Data Layer beim erfolgreichen Abschicken eines Registrierungsformulars
window.dataLayer.push({
'event': 'formSent',
'formName': 'Registrierungsformular'
});
In den meisten Fällen ist eine vollständige Abbildung aller relevanten Nutzerinteraktionen einschließlich der dabei zu erfassenden Daten in einem Data Layer nicht möglich oder für den konkreten Anwendungsfall zu aufwändig. Um dennoch ein robustes Tracking zu gewährleisten, sollten die im Folgenden beschriebenen Prinzipien – alternativ und optimalerweise auch parallel zur Nutzung eines Data Layers – beachtet werden.
Seitenaufrufe
Für eine saubere Datenerfassung in Tracking-Tools sollte jede Seitenansicht in Websites und Online-Shops einen eigenen Seitenaufruf mit spezifischer URL generieren. Dies ist insbesondere für die Nutzung von Funnel-Auswertungen und Verhaltensfluss-Analysen wichtig, da diese in manchen Tracking-Tools verlässlich nur auf Basis von erfassten Seitenaufrufen erstellt werden können.
Tracking-Tools wie Google Analytics und Matomo Analytics können alle Bestandteile einer URL auslesen inklusive ggf. angefügter Parameter (Bsp.: https://www.beispieldomain.tld/?urlParameter=set). Für die Erfassung von URL-Fragmenten (z. B. https://www.beispieldomain.tld/?urlParameter=set#link1) ist ggf. eine spezifische Konfiguration nötig.
Sollte die Umsetzung technisch nicht möglich sein (z. B. für einzelne Schritte eines Registrierungsprozesses, Produktkonfigurators o. ä.), so kann alternativ bei jeder Aktualisierung einer Seitenansicht ein Data-Layer-Event ausgelöst werden, welches dann als Auslösebedingung für die Erfassung von so genannten virtuellen Seitenaufrufen in den Tracking-Tools genutzt werden kann.
Bsp.: Schreiben eines virtuellen Seitenaufrufs mit dem Event vpv und der zuzuweisenden Seiten-URL in den Data Layer
window.dataLayer.push({
'event': 'vpv',
'pageURL': 'Fiktive Seiten-URL, die im Tracking-Tool für den Seitenaufruf ausgewiesen werden soll'
});
Danke-Seiten für erfolgreich abgeschickte Formulare
Neben der Bereitstellung eines Data-Layer-Events ist die robusteste Methode zur Erfassung des erfolgreichen Absendens von Formularen die automatische Weiterleitung auf eine Dankesseite mit einer spezifischen URL. In diesem Fall kann die Benutzerinteraktion leicht über den Seitenaufruf dieser URL erfasst werden.
Die Struktur der URL dieser Dankesseiten sollte einheitlich umgesetzt werden. Es wird empfohlen, einen festen URL-Bestandteil oder URL-Parameter zu verwenden, der an die eigentliche URL der Seiten angehängt wird, auf denen das Formular integriert ist.
Bsp.: Danke-Seite mit festem URL-Bestandteil /danke/
https://www.beispieldomain.tld/registrierungsformular/danke/
Bsp.: Danke-Seite mit URL-Parameter success=1
https://www.beispieldomain.tld/registrierungsformular/?success=1
Klickbare E-Mail-Adressen, Telefonnummern, Download-Links
Klicks auf E-Mail-Adressen, Telefonnummern und PDF-Download-Links werden üblicherweise in Tag Management Systemen über Klick-Trigger erfasst. Diese lesen das href-Attribut der auf der Website integrierten Links aus:
- E-Mail-Adressen: Click URL enthält mailto:
- Telefonnummern: Click URL enthält tel:
- PDF-Download-Links: Click URL enthält .pdf
Damit diese Trigger korrekt ausgelöst werden, müssen die folgenden Voraussetzungen geschaffen werden:
- Alle E-Mail-Adressen müssen als mailto:-Links im href-Attribut definiert werden, z. B.
<a href=’mailto:info@beispieldomain.tld’>Schreiben Sie uns eine E-Mail!</a> - Alle Telefonnummern müssen als tel:-Links im href-Attribut definiert werden:
<a href=’tel:004930123456789′>Rufen Sie uns an!</a> - Alle Download-Links müssen die direkte Datei-URL inklusive Dateiendung im href-Attribut abbilden
<a href=’https://www.beispieldomain.tld/beispieldatei.pdf‘>Laden Sie die Beispieldatei herunter!</a>
Klicks auf Buttons und andere Elemente
Neben dem Klick-Ziel im href-Attribut eines Links und dem Link-Text können auch CSS-Klassen und IDs als Auslösebedingungen für Klick-Events in Tracking Tools genutzt werden. Damit können bspw. mehrere Buttons mit demselben Link-Ziel (= href-Attribut) auf derselben URL unterschieden werden.
Bsp.: Auf einer URL sind insgesamt drei Buttons mit dem Button-Text „Hier klicken, um zur Beispielseite zu gelangen“ implementiert, die auf dieselbe Unterseite https://www.beispieldomain.tld/beispielunterseite/ verlinken. Über das href-Attribut und die Button-Beschriftungen lassen sich Klicks auf diese Buttons nicht unterscheiden, da diese für alle drei Buttons identisch ist.
Durch Hinzufügen spezifischer IDs zu den a-Elementen können die Button-Klicks anhand dieser IDs unterschieden werden:
- Button 1: <a href=’https://www.beispieldomain.tld/beispielunterseite/’ id=’button1′>Hier klicken, um zur Beispielunterseite zu gelangen</a>
- Button 2: <a href=’https://www.beispieldomain.tld/beispielunterseite/’ id=’button2′>Hier klicken, um zur Beispielunterseite zu gelangen</a>
- Button 3: <a href=’https://www.beispieldomain.tld/beispielunterseite/’ id=’button3′>Hier klicken, um zur Beispielunterseite zu gelangen</a>
Klickbare Elemente wie Buttons und Links sollten also immer mit identischen IDs oder CSS-Klassen ausgezeichnet werden. Zusammen zu erfassende Ausprägungen (z. B. Button-Kategorien) können dabei mit identischen IDs bzw. CSS-Klassen versehen werden, wenn eine Unterscheidung innerhalb dieser Gruppe nicht nötig ist.
Da Link-Klicks von Tag Management Systemen in der Regel am a-Element erfasst werden, sollten die IDs bzw. CSS-Klassen im HTML-Quellcode immer am jeweiligen a-Element platziert werden und nicht bspw. an einem das a-Element umschließenden div-Container. Um die Klicks zuverlässig erfassen zu können, solle das a-Element selbst das im HTML-Baum am höchsten positionierte Element des klickbaren Elements sein und alle weiteren dieses beschreibende Elemente umfassen.
Bsp.:
<a href='tel:004930123456789' id='tel-link-1'>
<i class='icon-class'></i>
Rufen Sie uns an!
</a>
Sichtbarkeit von Elementen
Für manche Elemente kann es sinnvoll sein, nicht nur die Klicks auf diese zu erfassen, sondern bereits deren Anzeigen im sichtbaren Bereich des Browsers der Website-Besucher. Ein Beispiel hierfür kann das Anzeigen einer bestimmten Grafik auf einer Landingpage sein.
Diese Sachverhalte können mit so genannten Elementsichtbarkeits-Triggern in Tag Management Systemen getracked werden. Analog zu den Klicks auf Buttons und andere Elemente arbeiten auch diese auf Basis von IDs und CSS-Selektoren der jeweiligen Elemente im HTML-Quellcode.
Es gelten daher grundsätzlich dieselben Vorgaben wie für das Tracking von Klicks auf Buttons und weitere Elemente. Website-Elemente, deren Sichtbarkeit erfasst werden soll, müssen mit eindeutig identifizierbaren CSS-Klassen oder IDs ausgezeichnet werden.
Einbindung von Newsletter-Anmeldungen, Buchungssystemen o. ä.
Viele Unternehmen nutzen auf ihrer Website externe Systeme, um z. B. Newsletter-Anmeldungen, Terminbuchungen oder Zimmerreservierungen zu erfassen. Diese Dienste werden in der Regel als iframe in die eigene Website eingebunden, laufen aber vollständig auf den Systemen des jeweiligen Toolanbieters.
Eine Erfassung der Nutzerinteraktionen über auf der eigenen Website implementierte Tracking-Tools wie Google Analytics oder Matomo Analytics ist daher in den meisten Fällen nicht möglich. Es besteht schlichtweg keine Möglichkeit, die dafür notwendigen Tracking-Codes in die Systeme der externen Tool-Anbieter zu integrieren.
Um zumindest die erfolgreich abgeschlossenen Interaktionen mit diesen externen Systemen messen zu können, ermöglichen viele Anbieter die Weiterleitung auf eine Bestätigungsseite innerhalb der eigenen Website-Domain, wenn z. B. die Newsletter-Anmeldung erfolgreich abgeschlossen, ein Termin gebucht oder ein Zimmer reserviert wurde. Auf dieser Bestätigungsseite sind die Tracking-Tools dann wieder implementiert, so dass der entsprechende Seitenaufruf als Conversion erfasst werden kann, die die jeweilige relevante Nutzerinteraktion beschreibt.
Fazit
Mit Tracking-Tools wie Google Analytics oder Matomo Analytics kann das Nutzerverhalten auf der eigenen Website oder im Online-Shop detailliert erfasst und ausgewertet werden. Gerade im Zusammenspiel mit Tag Management Systemen kann ein solches Tracking-Setup oft mit wenig Aufwand erstellt und aktuell gehalten werden, ohne dass auf Seiten der Website oder des Shops Programmieraufwand entsteht.
Die in diesem Beitrag beschriebenen Grundsätze stellen sicher, dass das Tracking möglichst standardisiert und auf einer soliden technischen Basis erfolgt. Werden sie eingehalten, funktioniert das Tracking in der Regel auch nach Änderungen an der Website oder dem Online-Shop fehlerfrei und der Pflegeaufwand wird deutlich minimiert.
Benötigen Sie Unterstützung bei der Konzeption und Umsetzung eines zielführenden Trackings auf Ihrer Website oder in Ihrem Online-Shop? Unsere Webanalyse-Experten beraten Sie gern und unterstützen Sie im gesamten Webanalyse-Prozess, von der Tracking-Konzeption über die Konfiguration und Implementierung von Tracking-Tools bis hin zur Datenauswertung und Anwenderschulung. Sprechen Sie uns an, wir freuen uns auf Ihre Anfrage.
