Google AI Studio: Vom Prompt zum GTM-Tool in unter 60 Minuten
Management Summary
Der Gamechanger: Vibe Coding in Google AI Studio
Google AI Studio hat sich rasant von einer reinen API-Testumgebung zu einer vollwertigen Entwicklungsumgebung gewandelt. Ein entscheidender Meilenstein war die Einführung des Build- und Vibe Coding-Features im Februar 2026. Damit ist es nun möglich, nicht nur Code-Schnipsel zu generieren, sondern vollständige, funktionale Applikationen im Browser zu bauen, zu testen und zu deployen.
Das Problem: Die unübersichtliche GTM-Historie
Wer intensiv mit dem Google Tag Manager (GTM) arbeitet, kennt die Herausforderung: Um Änderungen nachzuvollziehen, muss in der Standard-Ansicht jede veröffentlichte Version einzeln angeklickt werden. Das Debugging wird zur Geduldsprobe.
Die Vision für das Projekt:
Ein Tool, das den Spieß umdreht. Anstatt Versionen zu durchsuchen, wählst du einen spezifischen Tag, einen Trigger oder eine Variable aus und siehst sofort die gesamte historische Entwicklung auf einen Blick.
Der Start: Ein präziser Prompt
Der gesamte Entwicklungsprozess begann mit einer klaren Anweisung an die KI. Um beste Ergebnisse zu erzielen, wurde die Anforderung wie folgt formuliert:
„I want to create an MVP for the following task: The application should run solely on the client-side, with no backend required. Currently, in Google Tag Manager, users can only see changes by clicking through individual versions. I require a better documentation of changes: The user should be able to select a specific tag, trigger, or variable and view all historic changes associated with it. To start the process, the user must be able to choose the GTM account and container.“
Nach diesem Prompt arbeitete das Tool etwa zehn Minuten autonom am Grundgerüst, während ich parallel meine E-Mails bearbeitete.
OAuth-Einrichtung leicht gemacht
Eine der größten Zeitfresser ist bei APIs teilweise die Authentifizierung. Google AI Studio unterstützte hier proaktiv. Das Tool generierte nicht nur den Code, sondern leitete mich Schritt für Schritt durch die Google Cloud Console, um die benötigten OAuth-Credentials zu erstellen:
- Redirect-URIs: Die KI nannte exakt die URIs, die in der Cloud Console hinterlegt werden mussten.
- Validierung: Sofortige Prüfung der Verbindung innerhalb der App-Vorschau.
Visuelle Korrektur per „Markier-Feature“
Ein Highlight der neuen Version ist das Markier-Feature. Bei Design-Fehlern oder Layout-Wünschen muss man den Fehler nicht mühsam beschreiben. Das Tool erstellt einen Screenshot der UI, man kreist die fehlerhafte Stelle ein, und die KI korrigiert das CSS oder HTML unmittelbar.
Bild: Unsaubere Abstände in den Dropdowns.
Bild: Korrigiertes, modernes UI-Design nach der visuellen Markierung.
Iterative Verfeinerung des MVP
Nachdem das Grundgerüst stand, folgten zwei wichtige Optimierungsschritte:
- Aktualität der Daten: Standardmäßig zeigte das Tool die Daten der ersten Container-Version. Dies wurde auf die aktuellste Version korrigiert.
- User-Interface statt JSON: Ursprünglich wurden Änderungen als rohe JSON-Struktur ausgegeben. Für den Endnutzer ist das schwer lesbar. Ich ließ die Darstellung in eine saubere „Diff-Ansicht“ umwandeln, die explizit zeigt, was sich von Version zu Version geändert hat.
Das fertige Tool zeigt übersichtlich die Änderungen an den Parametern eines GA4-Tags.
Fazit: Effizienz in einer neuen Dimension
Das Endergebnis ist ein funktionaler MVP, der in unter einer Stunde entstanden ist. Besonders beeindruckend ist die Zeitersparnis: Während die KI den komplexen Code für die GTM-API-Anbindung und das Diffing schrieb, konnte ich mein Tagesgeschäft fortführen.
Obwohl die Darstellung noch weiter verfeinert werden kann, ist das Tool bereits jetzt ein mächtiger Helfer beim Debugging. Ein weiterer Vorteil: Die App lässt sich direkt aus Google AI Studio heraus publizieren, um sie dem Team dauerhaft zur Verfügung zu stellen.
