Skip to content

Digital Analytics Blog

von Marcus Stade

Menu
Menu
gatesting_test1_result

GA4 Recipes: Automatisiertes Testen der Google Analytics Implementierung

Posted on 17. Februar 202118. Februar 2021 by mstade

Es kommt immer wieder vor, dass besonders wichtige Trackingdaten (z.B. die Bestellstrecke eines Onlineshops) aufgrund von technischen Änderungen der Website oder der App nicht mehr erfasst werden. Oft fällt der Fehler dann sehr spät auf und auch das anschließende Debugging erfolgt dann manuell. Ich beschreibe hier deshalb eine Lösung die es ermöglicht die wichtigsten Daten automatisiert und kontinuierlich zu testen und zu monitoren. Damit fallen Trackingfehler sofort auf und können schnell behoben werden.

Dafür nutze ich den BigQuery Streaming Export in Google Analytics 4. Vom Auslösen eines Events bis zur Verfügbarkeit in BigQuery vergehen nur wenige Sekunden. Werden die GA4 Daten aus dem Universal Analytics EEC Object geholt, ist auch das Testen dieser Daten damit möglich. Schauen wir uns im Folgenden den Aufbau eines Tests für vier eCommerce Events an: view_item, select_item, add_to_cart, purchase.

Der Workflow

Um die Events zu testen, wird folgender Workflow genutzt:

gatesting_workflow

Um das eCommerce Setup zu testen, wird ein Plugin genutzt, das den Browser steuert und die Tags im Google Tag Manager auslöst. Über den Big Query Streaming Export sind die Daten dann in Big Query verfügbar und werden anschließend in DataStudio visualisiert.

Browser-Steuerung mit Selenium IDE

Das Auslösen der Events soll automatisiert erfolgen. Hierfür verwende ich Selenium IDE für Chrome oder Firefox. Mit dem Plugin ist es einfach möglich, Abläufe im Browser aufzuzeichnen und regelmäßig ausführen zu lassen. In diesem Fall möchten wir die eCommerce Events view_item, select_item, add_to_cart, purchase regelmäßig prüfen. Nach dem Öffnen des Selenium Plugins, kann ein Test aufgezeichnet werden:

gatesting

Um zu kennzeichnen, dass es sich um den Test für die EEC-Events handelt, wird die Startseite mit dem Query Parameter „?test“ ergänzt. Danach werden die Aktionen definiert und der Workflow gespeichert. Dabei sollte so vorgegangen werden, als würde das Setup manuell getestet werden.

Mit dem Klick auf Run kann der Test jederzeit gestartet werden:

gatesting_run

Selenium orientiert sich bei den Aktionen an Attributen der HTML-Tags. Wenn sich diese ändern, kann der Test ggf. Nicht mehr korrekt ausgeführt werden. Dieser Test kann natürlich auch automatisiert in der GCP z.B mit Python und Selenium regelmäßig durchgeführt werden.

Die Daten des Tests erscheinen nun im BigQuery Intraday Table des Google Analytics 4 Projektes:

gatesting_bq

Daten in BigQuery finden

Um nun die Daten des letzten Tests zu extrahieren, wird der folgende Query verwendet:

SELECT event_name as eventname, items, TIMESTAMP_MICROS(event_timestamp) as time

FROM `<Project>.analytics_<id>.events_intraday_*` where user_pseudo_id=
 
(
SELECT user_pseudo_id FROM `<Project>.analytics_<id>.events_intraday_*`, unnest(event_params) as e where e.key="page_location" and e.value.string_value="https://demo.gmp-masterclass.de/?test" order by event_timestamp desc LIMIT 1
)

and
 
event_timestamp>=
 
(
SELECT event_timestamp FROM `<Project>.analytics_<id>.events_intraday_*`, unnest(event_params) as e where e.key="page_location" and e.value.string_value="https://demo.gmp-masterclass.de/?test" order by event_timestamp desc LIMIT 1
)
 
order by event_timestamp desc

Der Query gibt die Events und die passenden item Daten, also Produktdaten zurück, für die letzte user_pseudo_id (User Identifier) von der eine URL mit „?test“ aufgerufen wurde. Um das Vermischen von verschiedenen Tests zu verhindern, werden nur Events berücksichtigt, deren Timestamp größer ist als der des letzten Pageviews mit „?test“. Das Ergebnis des Queries sieht dann wie folgt aus:

gatesting_bq_result

Wir sehen als Ergebnis alle Events mit item-Parametern des letzten Tests.

DataStudio Datenvisualisierung

Nun möchten wir nicht nach jedem Test die Daten in BigQuery suchen. Datastudio bietet uns hier das passende Mittel zur Visualisierung. Wir bauen ein Dashboard, das auf den Workflow angepasst ist und den Test abbildet. Hierfür wird eine DataStudio Community Visualization eingesetzt und später direkt mit BigQuery verbunden:

gatesting_ds_result_true

Das Dashboard kann natürlich auch anders und mit mehr Design-Elementen gestaltet werden. Ich habe hier eine sehr rudimentäre Version gebaut. Es empfiehlt sich, den Code der Visualisierung an den Test anzupassen, also die Prüfung der Parameter direkt in DataStudio vorzunehmen. Dadurch ist das Dashboard flexibler. DataStudio Community Visualization bestehen im Wesentlichen aus folgenden Dateien:

  • manifest.json die die Meta-Daten und Ressourcen URLs enthält
  • Ein JSON-file für die Konfiguration der Einstellungen in DataStudio (Anzahl Dimensionen, Metriken, Styles, etc.), für dieses Projet viz.json genannt
  • Einer CSS Datei für die Styling, hier viz.css
  • einer Datei, die die Logik der Visualisierung enthält (Code in Javascript), sowie den Code der Data Studio Community Component Library dscc.js. Die dscc.js stellt die passenden Methoden zur Verfügung, eine DataStudio Community Visualization zu erstellen.

Kompletter Code dieser Visualisierung im Gitlab. Codelab zu DataStudio Community Visualizations

Für die DataStudio Community Visualization verwende ich folgenden Code (vereinfacht). DataStudio stellt für die Ausführung die passenden Daten in dem Array row[„Dimensionen“] (= Dimensionswerte), und data.fields[„Dimension“] (= Dimensionsnamen), vorgefiltert, segmentiert, etc. bereit:


  var select_item=false;
  var eec_viewitem=false;
  var eec_addtocart = false;
  var eec_purchase = false;  
  var select_item_array=['Select Item : false'];
  var eec_viewitem_array=['Item View : false'];
  var eec_addtocart_array=['Add to Cart : false'];
  var eec_purchase_array=['Purchase : false'];
  
  rowData.forEach(function (row, i) {

	if (row["Dimension"][0]=="select_item")
	{
		select_item=true;
		
		x=1;
		while(x<row["Dimension"].length)
		{
			select_item_array.push(data.fields["Dimension"][x].name+" : "+row["Dimension"][x]);
			x++;
		}
	}

	if (row["Dimension"][0]=="view_item")
	{
		eec_viewitem=true;
		x=1;
		while(x<row["Dimension"].length)
		{
			eec_viewitem_array.push(data.fields["Dimension"][x].name+" : "+row["Dimension"][x])
			x++;
		}
	}

	if (row["Dimension"][0]=="add_to_cart")
	{
		eec_addtocart=true;
		x=1;
		while(x<row["Dimension"].length)
		{
			eec_addtocart_array.push(data.fields["Dimension"][x].name+" : "+row["Dimension"][x])
			x++;
		}
	}
	
	if (row["Dimension"][0]=="purchase")
	{
		eec_purchase=true;
		x=1;
		while(x<row["Dimension"].length)
		{
			eec_purchase_array.push(data.fields["Dimension"][x].name+" : "+row["Dimension"][x])
			x++;
		}
	}

  });

	select_item_array[0]='Select Item : '+select_item;
	eec_viewitem_array[0]='Item View : '+eec_viewitem;
	eec_addtocart_array[0]='Add to Cart : '+eec_addtocart;
	eec_purchase_array[0]='Purchase : '+eec_purchase;

Zuerst wird für jedes Element ein Boolean (false) und ein Array angelegt. Nun wird geprüft, ob ein Event vorhanden ist und falls ja, wird der Boolean auf true gesetzt und die Key-Value Pairs zu diesem Event in das passende Array geschrieben. (Der Code ist einfach gehalten, nicht optimiert und kann für den Produktiveinsatz deutlich verbessert werden, beispielsweise indem auch item Werte auf Vorhandensein geprüft werden).

Nun wird jedes Array Key-Value Pair in ein HTML-Element umgewandelt und an ein übergeordnetes HTML-Element, mit der ID des Boolean, gebunden. In der CSS-Datei ist für #true und #false ein entsprechendes Stylesheet hinterlegt, das entweder die Hintergrundfarbe Grün oder Rot erscheinen lässt. Zum Schluss wird dieses dann an das BODY-Element angehängt und es scheint in DataStudio.

	var si = document.createElement('div');
	si.id=select_item;
	
	select_item_array.forEach(function(e)
	{
		var param = document.createElement('div');
		param.innerHTML=e;
		param.id="param"
		si.appendChild(param)
	});

	var vi = document.createElement('div');
	vi.id=eec_viewitem;
	
	eec_viewitem_array.forEach(function(e)
	{
		var param = document.createElement('div');
		param.innerHTML=e;
		param.id="param"
		vi.appendChild(param)
	});
	
	var atc = document.createElement('div');
	atc.id=eec_addtocart;
	
	eec_addtocart_array.forEach(function(e)
	{
		var param = document.createElement('div');
		param.innerHTML=e;
		param.id="param"
		atc.appendChild(param)
	});

	var pp = document.createElement('div');
	pp.id=eec_purchase;
	
	eec_purchase_array.forEach(function(e)
	{
		var param = document.createElement('div');
		param.innerHTML=e;
		param.class="param"
		pp.appendChild(param)
	});
	
	var eecobj=document.createElement('div');
	eecobj.id="eec";
	eecobj.appendChild(si);
	eecobj.appendChild(vi);
	eecobj.appendChild(atc);
	eecobj.appendChild(pp);

  document.body.appendChild(eecobj);

Nun müssen die Files der DataStudio Community Visualization zur Verwendung in DataStudio in einen Google Cloud Bucket hochgeladen werden. In diesen Google Cloud Bucket wird nun dem User AllUsers Zugriff gewährt mit den Rechten Cloud Storage Viewer. Damit ist der Bucket öffentlich über seine URL erreichbar. In der manifest.json muss für unter „resource“ der Pfad für die einzelnen Dateien (js, config, css) im Bucket hinterlegt werden, beginnend mit gs:// .

gatesting_manifest

Sind die Dateien im Google Cloud Storage Bucket verfügbar, kann nun in die DataStudio Community Visualization hinzugefügt werden.

  1. DataStudio Community Visualization auswählen
gatesting_dscv

2. Build your own community visualisation auswählen

gatesting_dscv2

3. Pfad zur Visualisation hinzufügen, auswählen und Consent gewähren

gatesting_dscv3

4. Die DataStudio Community Visualization wird nun angezeigt, allerdings noch nicht konfiguriert:

gatesting_dscv4

Nun wird die Datenquelle BigQuery hinzugefügt:

gatesting_dscv5

und als Custom Query in unserem Projekt den bereits oben generierten Query:

gatesting_dscv6

DataStudio nutzt damit das Resultat des Queries als Datenquelle. Nach dem Klick auf Add, werden die vorhanden Felder angezeigt. Obwohl im Query nur item abgefragtg wird, sind alle Felder in diesem Aobjekt einzeln vorhanden:

gatesting_dscv7

Bei jedem Anfragen der Daten durch DataStudio wird damit der Query ausgeführt. Hinweis: Die Ausführung des Queries durch DataStudio wird zu Kosten im Rahmen des BigQuery Projektes führen.

Nun müssen nur noch die Dimensionen im DataStudio Panel ergänzt werden. Gemäß dem Quellcode oben, wird auf Position 1 der Eventname erwartet, danach die item Paramter:

gatesting_dscv8

Damit ist unser Dashboard fertig. Führen wir nun den Test aufgezeichneten Test aus:

gatesting_test1

Das Ergebnis in DataStudio:

gatesting_test1_result

Nun wird das Add to Cart Tag im Tag Manager pausiert und der Test neu gestartet:

gatesting_test2_result

Für wiederkehrende Tests, beispielsweise vor dem Launch einer Website, in der Entwicklung oder beim Auto-Event-Tagging bietet sich ein automatisiertes Vorgehen an, auch wenn der initiale Aufwand zur Anpassung des Codes recht hoch ist.

1 thought on “GA4 Recipes: Automatisiertes Testen der Google Analytics Implementierung”

  1. Pingback: BP 4.08: Februar-News, ein Gast, Spam und ein Tooltipp Podcast

Comments are closed.

Keep in Touch

Supporter: InPignus GmbH

ImPignus

mohrstade

mohrstade.de

Analytics Pioneers

Schlagwörter

App+Web App-Tracking Basic Big Query Customer Data Platform DataQuality DataStudio Events Google Analytics für Firebase ITP Machine Learning Property PWA Quick-Tipp User-Journey Wordpress Überblick

Podcast Empfehlung:

beyond pageview

Neueste Beiträge

  • Tag Management Platform: Commanders Act Platform X – DataCollection (Teil 2)
  • Tag Management Platform: Übersicht (Teil 1)
  • IP und User Agent Identifier: Nachteile
  • GA4 Recipes: Machine Learning Features für Predictive Audiences in anderen Tools nutzen, am Beispiel von Tealium AudienceStream
  • Quick Tipp: GA4 Configuration Tag vs. Universal Analytics Setting Variable – Sequence matters

Kategorien

  • Allgemein
  • Cloud
  • Dashboard
  • Firebase Analytics
  • Google Analytics
  • Google Analytics 4 (App+Web)
  • Google Optimize
  • Google Tag Manager
  • Machine Learning
  • Matomo
  • Tag Management

Links

  • Datenschutzerklärung
  • Hear Me Speak
  • Impressum
  • Meet & Eat
  • Über den Blog
©2025 Digital Analytics Blog | Built using WordPress and Responsive Blogily theme by Superb