In diesem Video lernt ihr wie ihr das neue Google Analytics 4 in Bubble einbaut, um Daten zu sammeln, wie eure Nutzer euer Produkt nutzen. Google Analytics ist quasi der Goldstandard für Aanlytics Tracking von Webseiten.

Im ersten Schritt geht ihr auf [ Ссылка ] und erstellt ein Konto, bzw. loggt euch ein. Ihr richtet dann ein Property ein und gebt die Details in die Form ein. Beim Google Setup ist insbesondere wichtig, dass ihr den Datennsteam richtig konfiguriert. Wählt Web-Applikation als Plattform und als Webseite URL nehmt ihr Bubble URL, die von eurer Webseite benutzt wird.

Anschließend gehen wir in Bubble und fügen unter Plugins, dass Google Analytics Plugin, welches offiziell von Bubble publiziert wurde, hinzu. Hierbei erkennen wir, dass die Standard Plugin Version v1:analytics.js (can upgrade!) ist und dort haben wir eine Tracking ID. Bei Google Analytics 4 haben wir jedoch eine Mess ID. Deswegen müssen wir im Plugin V2: Universal Analtiycs (gtag.js) auswählen. Diese Mess-ID / Tracking ID könnt ihr nun kopieren.

Wenn wir nun ein Preview der Seite machen, dann seht ihr, dass wir Google Analytics live sehen können. Jedoch müsst ihr darauf achten, dass ihr keine Adblocker aktiviert habt, weil ansonsten das Tracking unterbunden wird. Wenn wir final noch die Google Developer Console Tools öffnen und nach Google Analytics suchen, finden wir hier ebenfalls Google Analytics.

Anschlißend entwicklen wir das Design für eine Single Page Application. Hierbei haben wir drei Seiten (Home, Booking, Confirmation) und aktivieren diese Gruppen mit einem Workflow: Open an exterrnal website, Website home URL ga/home
Anschließend geht ihr in die Gruppe und lest den Pfad aus der URL aus. Get data from Page URL, Path segments as lists. Und gehen auf Preview. Im Inspector sehen wir, dass die Items eine Zahl haben (First item). Deswegen müssen wir jetzt in der Gruppe die Sichtbarkeit ändern: Wenn man die Seite öffnet, ist das Element nicht sichtbar, aber sobald die folgende Condition zutrifft, schon:
Get data from page URL, path segments as lists, item #2 is "home". Hier müsst ihr darauf achten, dass es keine Schreibfehler gibt. Analog passt ihr die anderen Seiten an.

Wenn wir ins Preview gehen, sehen wir in Google Analytics 4 nun, wie die unterschiedliichen Seiten angezeigt werden, obwohl wir auf einer Single Page Application sind, köntn ihr unter Ereignisanzahl, page view, page location, nun die unterschiedlichen Seiten sehen.

Kapitel:
0:00 Google Analytics Setup
1:30 Konfiguration Bubble für Google Analytics 4 (gtag.js)
2:34 Preview in Bubble und Google Analytics
3:30 Single Page Applications in Google Analytics 4 und Bubble
7:30 Preview in Bubble und Google Analytics

свернуть