Key Takeaways
- Der Klick-Trigger des Google Tag Managers ist der einfachste Weg, um bestimmte Button-Klicks ohne Code-Änderungen zu tracken.
- Die optimierte Analyse (Enhanced Measurement) in GA4 trackt Klicks auf ausgehende Links automatisch ohne Setup.
- Für benutzerdefiniertes Button-Tracking fügst du deinen Buttons Data-Attribute hinzu und fängst diese mit JavaScript ab.
- Klick-Tracking zeigt dir, welche CTAs, Links und Buttons tatsächlich genutzt werden – essenziell für die Conversion-Optimierung.
Klick-Tracking schließt die Lücke zwischen Seitenaufrufen (Page Views) und Käufen. Du siehst zwar, dass 1.000 Leute deine Produktseite besucht haben – aber ohne Klick-Tracking weißt du nicht, ob 900 davon auf „In den Warenkorb“ geklickt haben oder nur 90. Dieser Unterschied ändert deine Optimierungsstrategie komplett.
So trackst du Button-Klicks auf einer Website
Drei Ansätze, von einfach bis flexibel:
- GA4 Optimiertes Messen – automatisches Tracking ausgehender Links, keine Einrichtung erforderlich
- Google Tag Manager Click-Trigger – beliebiges Element ohne Code-Anpassungen tracken
- Custom JavaScript mit Data-Attributen – am flexibelsten, funktioniert ohne GTM
Passend dazu: Google Tag Manager zu Shopify hinzufügen.
Methode 1 — GA4 Optimierte Analyse (nur externe Links)
GA4 trackt Klicks auf externe Links (Links, die Besucher auf eine andere Domain führen) automatisch, sobald das Optimierte Messen aktiviert ist.
So prüfen Sie die Einstellung:
- GA4 öffnen → Verwaltung → Datenstreams → wählen Sie Ihren Stream aus
- Prüfen Sie unter „Optimierte Analysen“, ob „Klicks auf externe Links“ aktiviert ist
Dies löst bei jedem externen Klick ein click-Event mit dem Parameter link_url aus. Nützlich für das Tracking von Klicks zu Partnerseiten, Marktplätzen oder Affiliate-Links.
Passend dazu: Custom Events in Shopify hinzufügen.
Einschränkung: Dies trackt nur externe Klicks. Für Klicks innerhalb Ihres eigenen Stores (wie „In den Warenkorb“ oder „Details anzeigen“) benötigen Sie GTM oder Custom JavaScript.
Methode 2 — Google Tag Manager Click-Trigger
GTM kann Events für jedes Element auslösen, auf das ein Besucher klickt – Buttons, Links, Bilder oder jedes andere anklickbare Element.
Schritt 1 — GTM Click-Variablen aktivieren. Gehe im GTM zu Variablen → Konfigurieren. Aktiviere unter Klicks: Click Element, Click Classes, Click ID, Click Target, Click Text, Click URL.
Schritt 2 — Button identifizieren. Klicke in deinem Live-Shop mit der rechten Maustaste auf den Button, den du tracken möchtest → Untersuchen. Notiere dir von dem Element:
- ID (z. B.
id="main-add-to-cart") — am spezifischsten, bevorzugt - Class (z. B.
class="product-form__submit") — weniger spezifisch, funktioniert aber meistens - Textinhalt (z. B. „In den Warenkorb“)
Schritt 3 — Click-Trigger im GTM erstellen.
- Trigger → Neu → Alle Elemente oder Nur Links
- Konfigurieren:
- Dieser Trigger wird ausgelöst bei: Einigen Klicks
- Click Classes enthält
product-form__submit(oder einen anderen Identifikator)
Verwandt: Add Custom Events in Shopify.
- Speichern
Schritt 4 — GA4 Event Tag erstellen.
- Tags → Neu → Google Analytics: GA4-Ereignis
- Ereignisname:
add_to_cart_click(oder ein beliebiger Name) - Füge den in Schritt 3 erstellten Trigger hinzu
- Speichern
Schritt 5 — Testen mit dem GTM Preview-Modus. Klicke auf In der Vorschau ansehen → öffne deinen Shop im neuen Fenster → klicke auf den Button. Bestätige im GTM Debugger, dass dein Tag ausgelöst wird.
Schritt 6 — Senden und veröffentlichen.
Methode 3 — Individuelles JavaScript mit Daten-Attributen
Für Shops ohne GTM oder wenn das Tracking direkt in eine Section integriert werden soll, bieten Data-Attribute ein sauberes, wartungsfreundliches Klick-Tracking.
Schritt 1 – Data-Attribute zu Buttons hinzufügen. Fügen Sie im Liquid-Code Ihres Themes dem Button ein data-track-Attribut hinzu:
<button
type="submit"
class="product-form__submit"
data-track="add-to-cart"
data-product="{{ product.title | escape }}"
>
In den Warenkorb
</button>
Schritt 2 – Click-Listener hinzufügen. In der theme.liquid oder im {% javascript %}-Block einer Section:
document.addEventListener('click', function(event) {
var tracked = event.target.closest('[data-track]');
if (!tracked) return;
var action = tracked.dataset.track;
var product = tracked.dataset.product || '';
// An GA4 senden
if (typeof gtag !== 'undefined') {
gtag('event', action, {
'product_name': product
});
}
});
Dies nutzt Event Delegation – ein einziger Listener auf dem Document erfasst alle getrackten Klicks. So funktioniert es auch bei dynamisch hinzugefügten Elementen (wie Quick-Add-Buttons auf Kategorieseiten).
Um die Ergebnisse zu messen, siehe Landingpage in Shopify erstellen.
Um die Ergebnisse zu messen, siehe Button in Shopify hinzufügen.
Um die Ergebnisse zu messen, siehe Eigene Conversion-Elemente in Shopify hinzufügen.
Was man in einem Shopify-Store tracken sollte
Nicht jeder Klick muss getrackt werden. Konzentriere dich auf Klicks, die dir etwas aussagekräftiges verraten:
Wertvolle Klicks zum Tracken:
- „In den Warenkorb“-Button
- „Jetzt kaufen“ / Express-Checkout
- Upsell- oder Cross-Sell-CTAs
- „Details anzeigen“ auf Produktkacheln
- Versandkostenschätzung, Retouren oder FAQ-Akkordeons auf Produktseiten
- Buttons für Newsletter-Anmeldung oder Wartelisten
Weniger wertvoll zu tracken:
- Navigationsmenü-Links (das wird durch das Seitenaufruf-Tracking abgedeckt)
- Logo-Klicks zur Startseite
- Social-Share-Buttons
Frage dich: „Wenn ich die Klickrate hierauf wüsste, würde ich etwas ändern?“ Wenn ja, tracke es.
Click-Daten in GA4 ansehen
Sobald die Klick-Events einlaufen:
- Berichte → Engagement → Ereignisse — sieh dir alle Events und deren Anzahl an
- Klicke auf einen Event-Namen — sieh dir die Parameter-Aufschlüsselungen an (welches Produkt, welche Button-Variante)
- Erkunden → Trichtererkundung — baue Funnels wie “Product Viewed → Add to Cart Click → Checkout Started”, um Drop-offs zu erkennen
Diese Daten zeigen dir, welche CTAs performen und welche nicht — essenziell für eine fundierte Conversion-Rate-Optimierung.
FAQ
GA4-Klick-Events feuern bei jedem klickbaren Element, das du anlegst (etwa CTAs auf deinen Storefront-Seiten). Shopify Customer Events sind vordefinierte E-Commerce-Events (product_viewed, cart_viewed, checkout_started), die von Shopify automatisch gefeuert werden – sie umfassen auch Checkout-Seiten-Events, die der GTM nicht erreichen kann. Nutze am besten beide: Customer Events für E-Commerce-Aktionen, GA4-Klick-Events für benutzerdefinierte CTAs.
Starte mit 5–10 besonders wichtigen Events („In den Warenkorb“, „Jetzt kaufen“, „Details ansehen“, E-Mail-Anmeldung, wichtige Navigationslinks). Tracking für jedes klickbare Element hinzuzufügen, erzeugt nur Rauschen (Noise), welches die wirklich relevanten Signale überdeckt. Tracke nur das, was du auch tatsächlich für Entscheidungen nutzen würdest.
GA4 hat bei Standardberichten eine Verarbeitungsverzögerung von 24–48 Stunden. Nutze die DebugView (Verwaltung → DebugView) zur Bestätigung in Echtzeit. Prüfe außerdem: Wird das Event gefeuert? (Browser-Konsole), erreicht das Event GA4? (Netzwerk-Tab → nach collect filtern) und ist die GA4-Property mit deiner Reporting-Ansicht verbunden?
Nur minimal, wenn es richtig umgesetzt ist. Ein einzelner Event-Listener auf Dokumentebene mit Delegation (Methode 3) verursacht 1–2 KB und ~1 ms pro Klick. GTM-basiertes Tracking fügt den GTM-eigenen Overhead von ~70 KB hinzu, was zwar mehr, aber immer noch völlig im Rahmen ist. Der Nutzen der gewonnenen Daten ist viel höher als die Kosten.
Nein. Tracke CTAs, bei denen die Klickrate für Entscheidungen relevant ist: primäre Kaufaktionen, alternative Kaufpfade, Formulare zur Lead-Generierung. Verzichte auf das Tracking von Logo-Klicks, der Hauptnavigation (hierfür reichen Seitenaufrufe) und dekorativen Buttons. Es gilt die Faustregel: "Wenn ich diese Zahl kennen würde, würde ich daraufhin handeln?"