Wichtige Erkenntnisse
- Der Click-Trigger im Google Tag Manager ist der einfachste Weg, um Klicks auf bestimmte Buttons ohne Code-Änderungen zu tracken.
- Die GA4 Optimierte Analyse trackt automatisch Klicks auf externe Links ohne jegliche Einrichtung.
- Für individuelles Button-Tracking füge Daten-Attribute zu deinen Buttons hinzu und höre diese per JavaScript ab.
- Click-Tracking verrät dir, welche CTAs, Links und Buttons tatsächlich genutzt werden – essenziell für die Conversion-Optimierung.
Click-Tracking schließt die Lücke zwischen Seitenaufrufen und Käufen. Du siehst vielleicht, dass 1.000 Personen deine Produktseite besucht haben – aber ohne Click-Tracking weißt du nicht, ob 900 von ihnen 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 Click-Events fließen:
- Berichte → Engagement → Ereignisse — hier siehst du alle Events und deren Anzahl
- Klick auf einen Event-Namen — sieh dir Parameter-Details an (welches Produkt, welche Button-Variante)
- Explorative Datenanalyse → Trichter-Exploration — erstelle Funnels wie „Produkt angesehen → Klick auf In den Warenkorb → Checkout gestartet“, um Absprünge zu identifizieren
Diese Daten zeigen, welche CTAs funktionieren und welche nicht – unverzichtbar für eine fundierte Conversion-Rate-Optimierung.
