Dokumentation
soulclick.ch
Start typing to search…

Google Analytics Tracking (GA4)

Anleitung zum Setup von E-Commerce Tracking für Smart Formulare

Google Analytics 4 E-Commerce Tracking - Komplettanleitung

Übersicht

Mit dem Soulclick GA4 E-Commerce Tracking kannst du die Performance deiner Spendenformulare detailliert messen und für Marketing-Kampagnen optimieren.

Was wird getrackt?

Das Tracking erfasst drei wichtige Events in der Spender-Journey:

EventBeschreibungZeitpunkt
view_itemFormular-AnsichtWenn das Spendenformular auf deiner Website geladen wird
begin_checkoutCheckout-StartWenn ein Person das Formular absendet
purchaseAbgeschlossene SpendeNach erfolgreicher Zahlung

Vorteile

  • Google Ads Optimierung: Kampagnen auf Spenden-Conversions optimieren
  • Detaillierte Analysen: Conversion-Raten auf jeder Stufe des Spendenprozesses
  • ROAS Tracking: Return on Ad Spend für deine Werbekampagnen messen
  • Remarketing: Zielgruppen basierend auf Formular-Interaktionen erstellen

Voraussetzungen

  • Soulclick Iframe-Formular auf deiner Website
  • Google Tag Manager Account
  • Google Analytics 4 Property
  • Optional: Consent Management Platform (CMP) für DSGVO-Konformität

Geschätzte Setup-Zeit

  • Basis-Setup: 30-45 Minuten
  • Mit Consent Management: 60-90 Minuten
  • Inkl. Google Ads: 90-120 Minuten

Schritt 1: Tracking im Admin aktivieren

Wichtig

Das Tracking ist standardmäßig **deaktiviert **und muss für jedes Formular einzeln **aktiviert **werden.

Anleitung

  1. Melde dich im Soulclick Admin-Bereich an
  2. Navigiere zu Smart Formulare → Webseiten Formulare
  3. Wähle das Formular aus, für das du Tracking aktivieren möchtest
  4. Scrolle zum Abschnitt "Webseiten Formular"
  5. Aktiviere die Checkbox "Google Analytics Tracking aktiviert"
  6. Optional: Aktiviere "Debug Modus" für die Entwicklung
  7. Klicke auf "Sichern"

Debug-Modus

Wenn aktiviert, siehst du in der Browser-Konsole alle Tracking-Events:

[Soulclick Tracking] Event pushed: view_item
[Soulclick Tracking] Event pushed: begin_checkout
[Soulclick Tracking] Event pushed: purchase

Tipp: Aktiviere den Debug-Modus nur während der Entwicklung und Testphase.

Schritt 2: Google Tag Manager installieren

GTM Container erstellen

Falls du noch keinen Google Tag Manager Account hast:

  1. Gehe zu tagmanager.google.com
  2. Klicke auf "Konto erstellen"
  3. Gib einen Account-Namen ein (z.B. deine Organisation)
  4. Wähle als Zielplattform "Web"
  5. Gib deine Website-URL ein
  6. Klicke auf "Erstellen"

GTM Code in Website einbinden

Wichtig: Der Google Tag Manager Code muss vor dem Soulclick Iframe-Script eingebunden werden.

Code-Snippet 1: Im Head-Bereich

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Code-Snippet 2: Im Body-Bereich

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Ersetze GTM-XXXXXXX mit deiner eigenen Container-ID!

Vollständiges Beispiel

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spenden</title>
    
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <!-- Dein Soulclick Spendenformular -->
    <link rel="stylesheet" href="https://deine-soulclick-url.com/static/assets/css/iframe.min.css">
    <div class="soulclick-iframe" 
         iframe-id="123" 
         language="de" 
         origin="https://deine-soulclick-url.com/">
    </div>
    <script src="https://deine-soulclick-url.com/static/assets/js/soulclick-iframe.js"></script>
</body>
</html>

Installation überprüfen

  1. Öffne deine Website
  2. Drücke F12 (Entwicklertools)
  3. Öffne die Konsole
  4. Gib ein: console.log(window.dataLayer)

Erfolgreich: Du siehst ein Array mit Einträgen

Schritt 3: Consent Management einrichten

Google Consent Mode v2 aktivieren

Seit März 2024 ist der Google Consent Mode v2 Pflicht für Websites in der EU/Schweiz.

Im Google Tag Manager:

  1. Öffne deinen GTM Container
  2. Gehe zu "Verwaltung" → "Container-Einstellungen"
  3. Aktiviere "Google Consent Mode v2"

Standard Consent States setzen

Erstelle ein neues Tag:

Tag-Konfiguration:

  • Tag-Typ: Benutzerdefiniertes HTML
  • Tag-Name: "Consent Mode - Standard"

HTML-Code:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  
  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'security_storage': 'granted',
    'wait_for_update': 500
  });
</script>

Trigger: Consent-Initialisierung - Alle Seiten

Consent Banner (Cookiebot - Empfohlen)

Installation:

<head>
    <!-- Cookiebot -->
    <script id="Cookiebot" 
            src="https://consent.cookiebot.com/uc.js" 
            data-cbid="DEINE-COOKIEBOT-ID" 
            data-blockingmode="auto" 
            type="text/javascript">
    </script>
    
    <!-- Consent Update Script -->
    <script>
      window.addEventListener('CookiebotOnAccept', function (e) {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        
        gtag('consent', 'update', {
          'analytics_storage': Cookiebot.consent.statistics ? 'granted' : 'denied',
          'ad_storage': Cookiebot.consent.marketing ? 'granted' : 'denied',
          'ad_user_data': Cookiebot.consent.marketing ? 'granted' : 'denied',
          'ad_personalization': Cookiebot.consent.marketing ? 'granted' : 'denied'
        });
      });
    </script>

    <!-- Google Tag Manager -->
    <script>(...GTM Code...)</script>
</head>

Schritt 4: GA4 Property einrichten

Property erstellen

  1. Gehe zu analytics.google.com
  2. Klicke auf "Verwaltung" (Zahnrad-Symbol)
  3. Klicke auf "Property erstellen"
  4. Property-Name: z.B. "Spenden Website"
  5. Zeitzone: Europe/Zurich
  6. Währung: CHF
  7. Branche: Non-Profit
  8. Klicke auf "Erstellen"

Datenstream erstellen

  1. Wähle "Web" als Plattform
  2. Website-URL eingeben
  3. Stream-Namen eingeben
  4. Klicke auf "Stream erstellen"

Mess-ID notieren

Du siehst jetzt deine Mess-ID im Format G-XXXXXXXXXX.

Wichtig: Diese ID brauchst du gleich für GTM!

E-Commerce aktivieren

  1. Klicke auf deinen Datenstream
  2. Scrolle zu "Erweiterte Einstellungen"
  3. Aktiviere "Erweiterte Messung"
  4. Aktiviere "E-Commerce-Daten erfassen"

Schritt 5: Tags im Google Tag Manager erstellen

Tag 1: GA4 Configuration

  1. GTM → "Tags" → "Neu"
  2. Tag-Typ: Google Analytics: GA4-Konfiguration
  3. Tag-Name: GA4 - Configuration
  4. Mess-ID: G-XXXXXXXXXX (deine GA4 Mess-ID)
  5. Trigger: Consent Initialization - All Pages
  6. Consent-Einstellung: analytics_storage erforderlich
  7. Speichern

Tag 2: View Item Event

  1. "Tags" → "Neu"
  2. Tag-Typ: Google Analytics: GA4-Ereignis
  3. Tag-Name: GA4 - E-Commerce - View Item
  4. Konfigurations-Tag: {{GA4 - Configuration}}
  5. Ereignisname: view_item
  6. Aktiviere: "E-Commerce-Daten senden"
  7. Trigger: Neuer Trigger
    • Typ: Benutzerdefiniertes Ereignis
    • Ereignisname: view_item
  8. Speichern

Tag 3: Begin Checkout Event

  1. "Tags" → "Neu"
  2. Tag-Typ: Google Analytics: GA4-Ereignis
  3. Tag-Name: GA4 - E-Commerce - Begin Checkout
  4. Konfigurations-Tag: {{GA4 - Configuration}}
  5. Ereignisname: begin_checkout
  6. Aktiviere: "E-Commerce-Daten senden"
  7. Trigger: Neuer Trigger
    • Typ: Benutzerdefiniertes Ereignis
    • Ereignisname: begin_checkout
  8. Speichern

Tag 4: Purchase Event

  1. "Tags" → "Neu"
  2. Tag-Typ: Google Analytics: GA4-Ereignis
  3. Tag-Name: GA4 - E-Commerce - Purchase
  4. Konfigurations-Tag: {{GA4 - Configuration}}
  5. Ereignisname: purchase
  6. Aktiviere: "E-Commerce-Daten senden"
  7. Trigger: Neuer Trigger
    • Typ: Benutzerdefiniertes Ereignis
    • Ereignisname: purchase
  8. Speichern

Schritt 6: Testen und Veröffentlichen

Vorschau-Modus aktivieren

  1. GTM → "Vorschau" (oben rechts)
  2. Website-URL eingeben
  3. "Connect" klicken

Test 1: view_item Event

  1. Lade deine Website mit dem Spendenformular
  2. Im GTM Debugger: Schaue unter "Tags Fired"
  3. Sollte sehen: GA4 - E-Commerce - View Item

Test 2: begin_checkout Event

  1. Fülle das Formular aus
  2. Klicke auf "Spenden"
  3. Im GTM Debugger: Sollte GA4 - E-Commerce - Begin Checkout sehen

Test 3: purchase Event

  1. Schließe eine Testspende ab
  2. Warte auf Weiterleitung
  3. Sollte GA4 - E-Commerce - Purchase sehen

In GA4 DebugView prüfen

  1. GA4 → "Konfigurieren" → "DebugView"
  2. Führe Tests durch
  3. Siehst du die Events in Echtzeit?

Container veröffentlichen

Wenn alle Tests OK:

  1. GTM → "Senden" (oben rechts)
  2. Versionsbeschreibung eingeben
  3. "Veröffentlichen" klicken

Schritt 7: Google Ads Conversions (Optional)

Conversion importieren

  1. Google Ads → "Tools" → "Conversions"
  2. "+ Neue Conversion-Aktion"
  3. "Importieren" → "Google Analytics 4"
  4. GA4 Property auswählen
  5. "purchase" Event auswählen
  6. "Importieren"

Conversion-Einstellungen

  • Name: "Spende abgeschlossen"
  • Wert: Transaktionsspezifischen Wert verwenden
  • Anzahl: Jede
  • Conversion-Zeitraum: 30 Tage
  • Attributionsmodell: Datengetrieben (oder Letzter Klick)

In Kampagnen verwenden

  1. Kampagne öffnen → "Einstellungen"
  2. Gebotsstrategien: "Conversions maximieren" oder "Ziel-CPA"
  3. Conversions: "Spende abgeschlossen" aktivieren

Troubleshooting

Events werden nicht getriggert

Checkliste:

  • Tracking im Admin aktiviert?
  • GTM korrekt eingebunden?
  • Container veröffentlicht?
  • Consent erteilt?

Überprüfen:

// Browser-Konsole:
console.log(window.dataLayer);
console.log(window.iframeConfig);

purchase Event fehlt

Überprüfen:

  • URL hat Parameter ?soulclick-status=success&tracking={...}?
  • Keine JavaScript-Fehler?

Doppelte Events

Ursachen:

  • GTM mehrfach eingebunden?
  • Mehrere GA4-Configuration-Tags?

Lösung: Duplikate entfernen

Falscher Betrag

Überprüfen:

  • GA4 Währung auf CHF gesetzt?
  • Payment-Gebühren sind im Wert enthalten (ist korrekt)

Event-Details für Entwickler

view_item Event

{
  event: "view_item",
  form_id: "123",
  form_instance_id: "soulclick_form_123_...",
  form_language: "de",
  page_url: "https://kunde.ch/spenden",
  ecommerce: {
    currency: "CHF",
    value: 50,
    items: [{
      item_id: "form_123",
      item_name: "Spende für Tiere",
      price: 50,
      quantity: 1
    }]
  }
}

begin_checkout Event

{
  event: "begin_checkout",
  form_id: "123",
  customer_type: "private",
  payment_method: "VIS",
  donation_interval: "monatlich",
  ecommerce: {
    currency: "CHF",
    value: 100,
    items: [{
      item_id: "form_123",
      item_name: "Spende für Tiere",
      item_variant: "one-off donation",
      price: 100,
      quantity: 1
    }]
  }
}

purchase Event

{
  event: "purchase",
  form_id: "123",
  payment_method: "VIS",
  donation_interval: "monatlich",
  newsletter_signup: true,
  ecommerce: {
    transaction_id: "qr_invoice_ABC123",
    value: 100,
    tax: 0,
    currency: "CHF",
    items: [{
      item_id: "form_123",
      item_name: "Spende für Tiere",
      item_variant: "one-off donation",
      price: 100,
      quantity: 1
    }]
  }
}

FAQ

F: Kostet das Tracking extra? Nein, es ist im Soulclick-Paket enthalten.

F: Funktioniert es mit mehreren Formularen? Ja, jedes Formular wird separat mit seiner form_id getrackt.

F: Was bei Cookie-Ablehnung? Mit Consent Mode v2 werden aggregierte Daten ohne Cookies gesendet.

F: Wie lange bis Daten in GA4 erscheinen? Echtzeit: Sofort | Standard-Berichte: 24-48 Stunden

Support

Bei Fragen oder Problemen: Ticketing


Updated 16 days ago