Vom serverseitigen Tag Manager in Cloudflare D1 schreiben
Vom serverseitigen Tag Manager kannst du Daten an viele Systeme wie die Cloudflare D1 Storage senden; nicht nur an Google Analytics 4 oder Google ADs. Cloudflare D1 ist eine SQL-Lite Datenbank bei Cloudflare und eine interessante Alternative für BigQuery.
In diesem Tutorial verwenden wir die Cloudflare D1 Storage, um ein einfaches Bewertungssystem für Webseiten mit dem Google Tag Manager (Client und Server) aufzubauen.
- Voraussetzungen für dieses Tutorial
- Daten vom serverseitigen Tag Manager an Cloudflare D1 senden
- Analyse der Daten in der Cloudflare D1 Storage
- Zusammenfassung
Voraussetzungen für dieses Tutorial
Dieses Tutorial zum Schreiben von Daten vom serverseitigen Tag Manager in die Cloudflare D1 Storage ist für Fortgeschrittene.
Ich gehe daher davon aus, dass du bereits einen client- und serverseitigen Tag Manager im Einsatz hast. Außerdem weißt du, wie man Tags und Variablen aus der Community Galerie in den Tag Manager importiert und verwendet.
Du bist auch mit der Cloudflare D1 Storage vertraut, sodass du dort eine Datenbank anlegen kannst. Zusätzlich brauchst du SQL auf einfachem Niveau (INSERT und SELECT).
Schließlich brauchst du auch HTML-Kenntnisse, damit du ein HTML-Snippet zu deiner Website hinzufügen kannst.
Als Ausgangsbasis für dieses Beispiel habe ich in Cloudflare eine D1 Datenbank mit der Tabelle "ratings" angelegt. Die Tabelle enthält nur 2 Felder, nämlich "url" und "rating". Das Feld "url" enthält die URL (bzw. den Pfad der Seite), für die eine Bewertung abgegeben wurde, und das Feld "rating" enthält einen Wert zwischen 1 (schlechteste Bewertung) und 5 (beste Bewertung).
Daten vom serverseitigen Tag Manager an Cloudflare D1 senden
Nachdem du deine Cloudflare D1 Datenbank eingerichtet hast, brauchen wir zunächst auf jeder Seite ein HTML-Snippet z.B. mit Smileys oder Sternen. Durch einen Klick auf einen Smiley (oder einen Stern) im HTML-Snippet können Menschen eine Bewertung für eine Seite abgeben.
Füge also im ersten Schritt bitte jeder Seite ein HTML-Snippet für Bewertungen hinzu. Es darf natürlich etwas hübscher aussehen als auf meiner Seite.
HTML-Snippet für Bewertungen
Damit wir auf die Klicks auf die Bewertungs-Smileys mit möglichst wenigen Triggern und Tags im clientseitigen Tag-Manager reagieren können, ist jedes Smiley mit dem darunter stehenden Text in einem DIV-Container enthalten. Jedem DIV-Container für die drei Bewertungen habe ein benutzerdefiniertes HTML-Attribut mit dem Namen "data-rating-value" gegeben:
<div class="rating" data-rating-value="5">(HTML für die Bewertungen)</div>Das "data-rating-value"-Attribut hat für das höchste Rating (den lachenden Smiley) den Wert "5", für das mittlere den Wert "3" und für das niedrigste (den traurigen Smiley) den Wert "1".
Jedem der drei DIV-Tags habe ich außerdem die CSS-Klasse mit dem Namen "rating" zugewiesen. Damit kann ich mit einem einzigen Klick-Trigger auf einen Klick auf einen der Bewertungs-Smileys im clientseitigen Tag Manager reagieren.
Klick-Trigger für die Bewertungs-Tags im clientseitigen Tag Manager
Im clientseitigen Tag-Manager habe ich nun einen Trigger vom Typ "Klick - Alle Elemente" erstellt. Den "alle Elemente" Klick-Trigger verwende ich, da die Smileys für das Rating keine HTML-Links (A-Tags) sind, sondern eben nur DIVs. Der "Nur Links" Klick-Trigger würde dafür nicht funktionieren.
Klick-Trigger im clientseitigen Tag Manager
Für die Trigger-Bedingung verwende ich die automatische Variable "{{Click Element}}" mit dem Operator "matches CSS Selektor". Die Bedingung enthält nun zwei CSS-Selektoren, die durch einen Bestrich voneinander getrennt sind:
DIV.rating, DIV.rating *Würde ich in der Triggerbedingung nur den CSS-Selektor "DIV.rating" angeben, würde der Klick-Trigger nur dann reagieren, wenn jemand in den weißen Bereich des DIV-Tags rund um den Smiley klickt, aber nicht, wenn jemand direkt auf den Smiley oder den Text klicken würde. Deshalb gibt es den zweiten CSS-Selektor "DIV.rating *". Damit reagiert der Klick Trigger bei einem Klick auf jedes Element innerhalb des DIVs mit der CSS-Klasse "rating".
Sobald also jemand auf einen der drei Bewertungs-Smileys, den Text oder den umgebenden weißen Bereich (des DIV-Containers) klickt, reagiert der Trigger und feuert ein Google Analytics 4 Ereignis-Tag.
GA4 Ereignis-Tag im clientseitigen Tag Manager ausführen
Mit dem Klick-Trigger des letzten Kapitels feuere ich nun ein GA4-Ereignis-Tag für das benutzerdefinierte Ereignis "rate_article".
GA4 Ereignis-Tag im clientseitigen Tag Manager
In diesem Tag ist eine "{{Event Settings Variable}}" angegeben. Damit sende ich unter anderem den Consent-Status an den serverseitigen Tag Manager. Damit entscheide ich dann am serverseitigen Tag Manager, ob die Bewertung nur an die Cloudflare D1 Datenbank (ohne personenbezogene Daten und damit unabhängig vom Consent) oder auch an GA4 (nur mit Consent) senden darf.
Als Ereignisparameter habe ich "rating" und "rating_counter" angegeben. Für den Parameter "rating" verwende ich eine benutzerdefinierte JavaScript-Variable, mit der ich den Wert des HTML-Attributs "data-rating-value" des angeklickten DIV-Containers auslese.
function() {
return {{Click Element}}.closest('DIV.rating').getAttribute('data-rating-value');
}Ich verwende dafür die integrierte Variable "{{Click Element}}" und die JavaScript-Methode "closest". Diese Methode durchläuft das HTML ausgehend vom angeklickten Element (Variable "{{Click Element}}") in Richtung der Eltern-HTML-Elemente, bis es auf das Element stößt, das ich in Klammern angegeben habe, also "DIV.rating". Bei diesem HTML-Tag ist das benutzerdefinierte HTML-Attribut "data-rating-value" angegeben.
Mit der JavaScript-Methode "getAttribute" lese ich den Wert des Attributes "data-rating-value" des angeklickten DIV-Containers und damit die Bewertung aus.
Der Parameter "rating_counter" hat immer den Wert 1. Das ist ein Workaround für die Auswertung von Bewertungen in GA4. Falls du die Daten nur an die Cloudflare D1 Storage sendest, brauchst du den Parameter "rating_counter" nicht.
"Danke"-Meldung einblenden
Mit dem Klick-Trigger feuere ich nicht nur das GA4-Ereignis Tag im clientseitigen Tag Manager für das Ereignis "rate_article", sondern auch benutzerdefiniertes HTML Tag. Dieses Tag blendet das HTML-Snippet mit den Smileys für die Bewertung nach einem Klick daraus aus und stattdessen eine "Danke-Meldung" ein.
Dazu ersetze ich einfach das gesamte "innerHTML" des DIV-Containers.
Benutzerdefiniertes HTML-Tag um das HTML-Snippet für die Bewertungen durch eine “Danke-”-Meldung zu ersetzen.
API-Token und Cloudflare-IDs finden
Damit wir vom serverseitigen Tag Manager Daten in die Cloudflare S1 Storage schreiben können, brauchen wir:
- Einen API-Token
- Die Cloudflare Account ID
- Die D1 Datenbank ID
Einen API-Token erstellst du in deinem Account. Klicke dazu in der Seitenleiste unter "Account verwalten" auf "API-Tokens des Kontos" und lege einen neuen API-Token an. Wichtig ist dabei, unter "Berechtigungen" die Einstellung "Konto" auszuwählen und bei den Berechtigungen die Option "D1 Storage" mit den Berechtigungen "Bearbeiten.
Cloudflare API-Token für D1 Storage generieren
Für diesen API-Token legst du nun bitte im serverseitigen Tag Manager eine Variable vom Typ "Constant" an und gibst ihr den Wert des API-Token. Gemäß meinem Tag Manager Namensschemas heißt diese Variable bei mir "{{Set Cloudflare API Token}}".
Im nächsten Schritt brauchen wir die Cloudflare Account-ID. Die findest du, in dem du im Cloudflare Account Dashboard auf die drei Punkte klickst. Wähle dann den Befehl "Konto-ID kopieren"
Cloudflare Konto-ID finden
Für die Cloudflare Konto-ID habe ich im serverseitigen Tag Manager wieder eine Variable vom Typ "Constant" angelegt und ihr die Konto-ID zugewiesen. Die Variable heißt bei mir "{{Set Cloudflare Account ID}}".
Schließlich brauchen wir noch die ID der D1 Datenbank. Die findest du in der Übersicht der Datenbanken (Im Screenshot aus Sicherheitsgründen schwarz markiert). Klicke einmal darauf, um die Datenbank-ID in die Zwischenablage zu kopieren.
Cloudflare Datenbank-ID finden
Auch für die Datenbank-ID habe ich im serverseitigen Tag Manager eine Variable vom Typ "Constant" angelegt und ihr die Datenbank-ID zugewiesen. Die Variable heißt "{{Set Cloudflare pages Database ID}}", wobei "pages" der Name der Datenbank ist.
Diese drei Variablen brauchen wir im nächsten Schritt, um Daten vom serverseitigen Tag Manager in die Cloudflare D1 Storage zu schreiben.
Daten vom serverseitigen Tag Manager in die Cloudflare D1 Storage schreiben
Um eine Bewertung vom serverseitigen Tag Manager an die Cloudflare D1 Storage zu senden, verwende ich das "JSON HTTP Request" Tag von "stape.io". Du findest es in der Community-Galerie des serverseitigen Tag-Managers.
**Hinweis: **Das "JSON HTTP Request" Tag von "stape.io" funktioniert auch, wenn du deinen Tag Manager nicht bei "stape.io" betreibst.
JSON HTTP Request Tag von “stape.io” konfigurieren
In diesem Tag brauchen wir zunächst die URL des API-Endpunkts der Cloudflare D1 Datenbank. Die genaue Dokumentation dieses und aller anderen Cloudflare-API-Aufrufe findest du in der Cloudflare D1 API Dokumentation.
Die API-URL muss die Cloudflare Account-ID und die Datenbank-ID enthalten. Dafür haben wir uns weiter oben die entsprechenden Variablen im serverseitigen Tag Manager angelegt. Ich habe sie im obigen Screenshot speziell hervorgehoben.
Unter "Request-Data" geben wir das SQL Statement an, das wir ausführen möchten. Das ist ein "INSERT" SQL Statement:
INSERT INTO ratings (url,rating) VALUES ('{{Get Page Path (without Query String)}}',{{Get Article Rating}});Im SQL-Statement sind zwei Variablen enthalten. Einmal "{{Get Page Path (without Query String)}}" und einmal "{{Get Article Rating}}". Die erste Variable ist vom Typ "URL Parser", den Simo Ahava gebaut hat". Das ist ein Variablentyp, den du in der Community-Galerie findest. Die zweite Variable ist vom Typ "Ereignisdaten". Damit lese ich den Wert des Parameters "rating" aus, den ich mit dem Ereignis "rate_article" vom clientseitigen Tag Manager sende.
Im Request Header brauchen wir zwei Felder. Einmal für Content-Type und einmal "Authorization" für die Authentifizierung. Dieses Feld enthält das Wort "Bearer" und dann den API-Token, den wir weiter vorn erstellt haben.
Diesen HTTP Request senden wir nun mit der "POST"-Methode an Cloudflare (nicht im Screenshot). Um die Request-Methode einzustellen, klappe bitte im Tag die Option "Additional Options" aus und wähle dort die Methode "POST".
Das gerade konfigurierte Tag am serverseitigen Tag Manager feuern wir nun beim Ereignis "rate_article", das wir vom clientseitigen Tag Manager senden und für das wir weiter oben den Trigger erstellt haben.
Analyse der Daten in der Cloudflare D1 Storage
Die in der Cloudflare D1 Storage gespeicherten Daten kannst du auf mehrere Arten auswerten. Die erste und einfachste Variante ist direkt mit einem SQL-Statement in der Benutzeroberfläche von Cloudflare.
Leider unterstützt Cloudflare D1 im Gegensatz zu BigQuery noch keine gespeicherten SQL-Statements. Du musst das SQL also jedes Mal wieder eingeben.
Daten der Cloudflare D1 mit SQL direkt in der Benutzeroberfläche abfragen
Die zweite und etwas komfortablere Variante ist das direkte Importieren der Daten in Google Sheets. Dazu verwende ich das Google Sheets Add-On "API Connector". Du findest den API Connector direkt im Google Workspace Marketplace. Mit der kostenlosen Version kannst du 1000 Zeilen pro Abfrage importieren und 100 Abfragen pro Monat durchführen.
Daten der Cloudflare D1 Storage via “API Connector” in Google Sheets anzeigen
Um die Daten von Cloudflare D1 in Google Sheets zu importieren, rufe in Google Sheets den API Connector über das Menü "Extensions" auf. Konfiguriere dann den Datenabruf:
- Wähle dazu unter "Application" den Eintrag "Custom" aus und lege die Methode auf "POST" fest.
- Gib dann unter Request URL die vollständige URL inklusive der Account-ID und der Datenbank-ID an. Das ist dieselbe URL, die du auch im JSON HTTP Request Tag im serverseitigen Tag Manager angegeben hast
- Lege unter "Headers" die Authentifizierungsdaten fest. Das sind ebenfalls dieselben Daten wie im Tag des serverseitigen Tag-Managers.
- Im "Request-Body" gibst du ein JSON-Objekt mit dem Schlüssel "sql" und der SQL-Abfrage als Wert für den Schlüssel an
- Klicke dann auf "Run" (nicht im Screenshot). Falls die Ausgabe der Daten nicht deinen Bedürfnissen entspricht, kannst du sie unter "Output Options" anpassen.
Zusammenfassung
Vom serverseitigen Tag Manager kannst du Daten nicht nur an Google Analytics oder Marketing-Plattformen senden. Du kannst Daten auch ein eigene Datenbanken wie den Cloudflare D1 Storage senden. Dafür muss die Datenbank idealerweise ein Restful-API unterstützen.
Zum Senden von Daten vom serverseitigen Tag Manager verwende ich das "JSON HTTP Request Tag" von "stape.io". Damit kannst du in der Regel Daten an alle Speicherlösungen senden, die ein Restful-API unterstützen.
Zum Auslesen oder Analysieren der Daten kannst du etwa Google Sheets in Verbindung mit dem API Connector Add-on für Google Sheets verwenden. Damit kannst du die Daten ebenfalls wieder über ein Restful-API auslesen.
