+49(0)911 13 13 35 18
LOGIN
AUSPROBIEREN
Zum Hauptinhalt springen

Google Conversion Tracking

Zurück

Ihr schaltet Google Ads und möchtet wissen, welche Anzeigen tatsächlich zu Online-Buchungen führen? Dann könnt ihr Google Conversion Tracking mit dem studiobookr iframe auf eurer Website kombinieren. In diesem Artikel erklären wir euch Schritt für Schritt, wie das funktioniert.

Wichtig vorab: Für das reine Tracking, woher eure Buchungen kommen (Homepage, Instagram, Facebook, Google, usw.), braucht ihr keinen iframe und keinen zusätzlichen Code. Dafür gibt es unsere Tracking Links – die funktionieren ganz ohne Cookie-Banner, ohne technisches Setup und werden direkt in studiolution ausgewertet. Google Conversion Tracking ist nur dann nötig, wenn ihr aktiv Google Ads schaltet und die Conversion-Daten direkt in euer Google Ads Konto zurückfließen sollen.

1. Wie funktioniert Google Conversion Tracking im iframe?

Wenn ein Kunde über eure Website eine Buchung im studiobookr iframe abschließt, sendet der iframe ein Signal (appointmentRequested) an eure Elternseite. Dieses Signal fangt ihr ab und feuert darüber ein Google Conversion-Event. So weiß Google Ads, dass aus einem Anzeigenklick eine echte Buchung geworden ist.

Der gesamte Tracking-Code wird ausschließlich auf eurer Website eingebaut – nicht in studiobookr. Ihr benötigt dafür Zugriff auf den HTML-Quellcode eurer Seite.

2. Voraussetzungen

  • Ein Google Ads Konto oder Google Analytics 4 (GA4) Konto
  • Zugriff auf den HTML-Quellcode eurer Seite mit dem studiobookr iframe
  • Eure studiobookr URL (z. B. https://www.studiobookr.com/dein-salonname-12345)
  • Eure Google Ads Conversion-ID und Conversion-Label (oder GA4 Measurement-ID)

3. Google Tag (gtag.js) einbinden

Fügt folgenden Code in den <head>-Bereich eurer Website ein. Ersetzt AW-XXXXXXXXX durch eure Google Ads ID (bzw. G-XXXXXXXXX für GA4).

<!-- Google tag (gtag.js) -->
<script async
  src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXXX">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-XXXXXXXXX');
</script>

Tipp: Die Conversion-ID findet ihr in eurem Google Ads Konto unter Tools > Conversions. Bei GA4 verwendet ihr eure Measurement-ID (G-XXXXXXXXX) aus den Admin-Einstellungen.

4. studiobookr iframe mit Tracking-Code einbauen

Fügt den folgenden vollständigen Code-Block an der Stelle in eure Seite ein, wo die Buchungsstrecke angezeigt werden soll. Er enthält den iframe, die automatische Höhenanpassung und das Conversion Tracking.

Ersetzt dabei:

  • Die iframe src-URL durch eure eigene studiobookr URL
  • AW-XXXXXXXXX/AbCdEfGhIjKlMn durch eure Conversion-ID und euer Conversion-Label
<div>
  <iframe
    src="https://www.studiobookr.com/dein-salonname-12345?brand=0&head=0&empl=0&cont=0&rev=0&smc=0"
    style="width: 100%; height: 600px; border: 0px;"
    id="studiobookr-frame">
  </iframe>
</div>

<script type="text/javascript">
  const IFRAME_ELEMENT_ID = 'studiobookr-frame';
  const OBSERVER_STEPS_COUNT = 200;

  const iframeElement = document.getElementById(IFRAME_ELEMENT_ID);
  const threshold = [];
  for (let index = 0; index < OBSERVER_STEPS_COUNT; index++) {
    threshold[index] = 1 / OBSERVER_STEPS_COUNT * index;
  }
  threshold[OBSERVER_STEPS_COUNT] = 1;

  const observer = new IntersectionObserver((e) => {
    iframeElement.contentWindow.postMessage({
      boundingClientRect: e[0].boundingClientRect,
      boundingClientRectOffset: 50
    }, '*');
  }, {
    threshold,
    root: null,
    rootMargin: iframeElement.getBoundingClientRect().y + "px 0px 0px 0px"
  });
  observer.observe(iframeElement);

  window.addEventListener('message', function (event) {
    if (!event.data) return;

    // --- Iframe-Höhe automatisch anpassen ---
    if (!isNaN(event.data.height)) {
      const height = parseInt(event.data.height);
      document.getElementById(IFRAME_ELEMENT_ID).style.height = height + 'px';
    }

    // --- Google Conversion Tracking ---
    if (event.data.appointmentRequested) {
      gtag('event', 'conversion', {
        'send_to': 'AW-XXXXXXXXX/AbCdEfGhIjKlMn',
        'value': 1.0,
        'currency': 'EUR'
      });
      console.log('Conversion Event gesendet');
    }
  }, false);
</script>

5. Alternative: GA4 statt Google Ads

Wenn ihr statt Google Ads lieber Google Analytics 4 (GA4) nutzen möchtet, ersetzt den Conversion-Block (den Teil ab // --- Google Conversion Tracking ---) durch:

if (event.data.appointmentRequested) {
  gtag('event', 'studiobookr_buchung', {
    'booking_source': 'iframe'
  });
}

Dieses Custom Event könnt ihr anschließend in GA4 unter Admin > Ereignisse als Key Event (Conversion) markieren. Den Parameter booking_source könnt ihr optional unter Admin > Benutzerdefinierte Definitionen als Custom Dimension registrieren, um ihn in Reports zu sehen.

6. Alternative: Google Tag Manager (GTM)

Wer bereits den Google Tag Manager im Einsatz hat, kann statt gtag() ein dataLayer-Event pushen und dieses in GTM als Trigger verwenden. Ersetzt dafür den Conversion-Block durch:

if (event.data.appointmentRequested) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'studiobookr_buchung'
  });
}

In GTM erstellt ihr dann einen benutzerdefinierten Ereignis-Trigger mit dem Event-Namen studiobookr_buchung und verknüpft diesen mit eurem Google Ads Conversion-Tag oder GA4-Event-Tag.

7. So funktioniert der Ablauf

  1. Ein Besucher kommt über eine Google-Anzeige auf eure Website. Der gtag-Code erfasst automatisch den Klick (gclid).
  2. Der Besucher sieht den studiobookr iframe mit der Buchungsstrecke auf eurer Seite.
  3. Der Besucher schließt eine Buchung im iframe ab.
  4. studiobookr sendet per postMessage das Signal appointmentRequested an eure Elternseite.
  5. Euer Tracking-Code fängt das Signal ab und feuert das Google Conversion-Event.
  6. Google ordnet die Conversion der ursprünglichen Anzeige zu.

8. Testen

Um sicherzustellen, dass das Tracking korrekt funktioniert:

  • Browser-Konsole öffnen: Drückt F12 und wechselt zum Tab „Konsole“. Nach einer Testbuchung sollte dort „Conversion Event gesendet“ erscheinen.
  • Google Tag Assistant: Installiert die Browser-Erweiterung „Google Tag Assistant“ und prüft, ob der Tag korrekt feuert.
  • Google Ads Vorschau: In Google Ads unter Tools > Conversions sollte die Conversion nach einigen Stunden als „Bestätigt“ markiert sein.
  • GA4 DebugView: Bei Nutzung von GA4 könnt ihr unter Admin > DebugView das Event in Echtzeit verfolgen.

9. URL-Parameter für den iframe

Mit folgenden Parametern steuert ihr, welche Elemente auf der studiobookr-Seite im iframe angezeigt werden:

Parameter Beschreibung Empfehlung
brand=0 Blendet das studiobookr-Logo aus Empfohlen für iframe
head=0 Blendet den Header-Bereich aus Empfohlen für iframe
empl=0 Blendet die Mitarbeiter-Auswahl aus Optional
cont=0 Blendet den Kontaktbereich aus Empfohlen für iframe
rev=0 Blendet Bewertungen aus Optional
smc=0 Blendet Social-Media-Buttons aus Empfohlen für iframe

10. Tracking Links von studiolution – die einfache Alternative

Neben Google Conversion Tracking bietet studiolution eigene Tracking Links an. Diese funktionieren über einen einfachen ?src=-Parameter in der studiobookr URL und werden direkt in den studiolution-Statistiken ausgewertet – ganz ohne iframe.

Der große Vorteil: Tracking Links funktionieren ohne Cookie-Banner und ohne zusätzlichen Code. Jede Buchung wird zuverlässig erfasst – egal, ob der Kunde Cookies akzeptiert hat oder nicht. Das macht sie deutlich effizienter als cookiebasierte Lösungen wie Google Analytics.

Tracking Links könnt ihr überall einsetzen: auf eurer Homepage, in Instagram, Facebook, Google Business, Flyern (per QR-Code) und überall, wo ihr auf eure Online-Buchungsseite verlinkt. Und das Beste: sie funktionieren auch ohne iframe – einfach den Tracking Link direkt als Buchungslink verwenden.

Unsere Empfehlung bei Google Ads: Kombiniert beides! Erstellt in studiolution unter Marketing > Tracking Links einen Tracking Link (z. B. „google-ads“) und hängt den src-Parameter an eure iframe-URL an:

src="https://www.studiobookr.com/dein-salonname-12345?brand=0&head=0&empl=0&cont=0&rev=0&smc=0&src=google-ads"

So habt ihr die Buchung sowohl in den studiolution-Statistiken (Tracking Link) als auch in Google Ads (Conversion-Event) sichtbar.

Wann reichen Tracking Links allein?
Wenn euch wichtig ist, alle Buchungen zu messen – und nicht nur dann, wenn Kunden den Cookie Banner akzeptieren. Mit Google Tracking bekommt ihr nur die halbe Wahrheit. Oder wenn ihr keine Werbung schaltet, dann sind die Tracking Links auch die einfachere und datenschutzfreundlichere Lösung. Ihr seht damit trotzdem, ob Buchungen über eure Homepage, Instagram, Facebook oder andere Kanäle kommen – ganz ohne technisches Setup. Mehr dazu im Hilfeartikel Tracking Links.

Häufige Fragen

Muss ich etwas an studiobookr ändern?
Nein. Der gesamte Tracking-Code liegt auf eurer Website. studiobookr sendet das Signal automatisch – ohne Konfiguration.

Wird meine Google Ads Kampagne korrekt zugeordnet?
Ja, solange gtag.js auf derselben Domain läuft wie eure Landingpage. Der gclid-Parameter wird automatisch aus dem Google-Cookie gelesen und der Conversion zugeordnet.

Brauche ich ein Cookie-Banner für das Google Tracking?
Ja – gtag.js setzt Cookies und fällt damit unter die DSGVO-Einwilligungspflicht. Ihr müsst sicherstellen, dass der Google Tag erst nach Einwilligung geladen wird. Unsere Tracking Links sind hier die datenschutzfreundlichere Alternative, da sie komplett ohne Cookies funktionieren.

Kann ich mehrere Conversion-Aktionen gleichzeitig tracken?
Ja. Ihr könnt zum Beispiel sowohl eine Google Ads Conversion als auch ein GA4-Event gleichzeitig im appointmentRequested-Block feuern.

Was passiert, wenn der Besucher den iframe verlässt, ohne zu buchen?
Nichts. Das Conversion-Event wird nur ausgelöst, wenn appointmentRequested gesendet wird – also nur bei einer tatsächlich abgeschlossenen Buchung.