Element-Klick-Ziele werden ausgelöst, wenn Besucher auf bestimmte Seitenelemente klicken. Ideal für die Verfolgung von CTA-Schaltflächen, Navigation und ausgehenden Links.
Wann Sie Klick-Ziele verwenden sollten
Am besten geeignet für die Verfolgung von:
- Call-to-Action-Schaltflächen
- Navigationsmenü-Klicks
- Download-Links
- Ausgehende Links
- Video-Wiedergabe-Schaltflächen
- Jedem klickbaren Element
Klick-Ziele erstellen
Ziele befinden sich auf dem Dashboard jeder Website unter der Registerkarte Journeys.
Journeys-Registerkarte öffnen
Öffnen Sie vom Dashboard Ihrer Website die Registerkarte Journeys und wählen Sie die Unterregisterkarte Ziele.
Ziel hinzufügen
Klicken Sie auf Ziel hinzufügen, dann wählen Sie Element-Klick als Zieltyp.
Ziel benennen
Geben Sie einen aussagekräftigen Namen ein, z.B. „Anmeldungs-Schaltfläche" oder „Preisangebot-CTA".
CSS-Selektor eingeben
Geben Sie im Feld CSS-Selektor den Selektor ein, der das zu verfolgende Element identifiziert.
Wert verfolgen (optional)
Aktivieren Sie Monetären Wert verfolgen, wenn Sie jeder Completion einen Umsatzwert zuordnen möchten.
Erstellen
Klicken Sie auf Erstellen, um das Ziel zu speichern.
CSS-Selektoren
Was ist ein CSS-Selektor?
Ein Muster, das HTML-Elemente identifiziert:
<button id="signup-btn" class="cta primary">
Anmelden
</button>
Selektoren für diese Schaltfläche:
#signup-btn(nach ID).cta(nach Klasse)button.primary(nach Tag und Klasse)
Häufige Selektoren
| Selektor | Trifft zu auf |
|---|---|
#my-id | Element mit id="my-id" |
.my-class | Elemente mit class="my-class" |
button | Alle Button-Elemente |
a.download | Links mit class="download" |
[data-action] | Elemente mit data-action-Attribut |
Den richtigen Selektor finden
Methode 1: Browser-Inspektor
- Rechtsklicken Sie auf das Element
- Wählen Sie „Untersuchen"
- Finden Sie das Element in den DevTools
- Suchen Sie nach einer eindeutigen ID oder Klasse
Methode 2: In der Konsole testen
- Öffnen Sie die Browser-Konsole (F12)
- Geben Sie ein:
document.querySelector('your-selector') - Wenn das Element angezeigt wird, funktioniert der Selektor
Selektor-Best-Practices
IDs verwenden, wenn verfügbar
Zuverlässigste Option:
<button id="cta-signup">Anmelden</button>
Selektor: #cta-signup
Spezifische Klassen verwenden
Wenn keine ID vorhanden, verwenden Sie eine beschreibende Klasse:
<button class="btn btn-primary cta-main">Erste Schritte</button>
Selektor: .cta-main
Generische Selektoren vermeiden
| Schlecht | Problem |
|---|---|
button | Trifft auf alle Schaltflächen zu |
.btn | Zu verbreitet |
a | Alle Links |
| Gut | Warum |
|---|---|
#signup-cta | Eindeutige ID |
.cta-signup | Spezifische Klasse |
[data-goal="signup"] | Zweckgebaut |
Data-Attribute hinzufügen
Bitten Sie Entwickler, verfolgbare Attribute hinzuzufügen:
<button data-goal="signup" class="btn">Anmelden</button>
Selektor: [data-goal="signup"]
Häufige Beispiele
CTA-Schaltflächen
| Ziel | Selektor |
|---|---|
| Haupt-CTA | #hero-cta |
| Sekundärer CTA | .cta-secondary |
| Preis-CTA | .pricing-cta |
Navigation
| Ziel | Selektor |
|---|---|
| Preis-Link | a[href="/pricing"] |
| Kontakt-Link | nav a[href="/contact"] |
| Anmelden | .nav-signin |
Downloads
| Ziel | Selektor |
|---|---|
| Jeder Download | a[download] |
| PDF-Downloads | a[href$=".pdf"] |
| Bestimmte Datei | a[href="/files/guide.pdf"] |
Ausgehende Links
| Ziel | Selektor |
|---|---|
| Externe Links | a[target="_blank"] |
| Affiliate-Links | a[href*="partner.com"] |
| Social-Media-Links | .social-links a |
Erweiterte Selektoren
Attribut-Selektoren
| Muster | Trifft zu auf |
|---|---|
[attr] | Hat Attribut |
[attr="value"] | Exakte Übereinstimmung |
[attr*="value"] | Enthält |
[attr^="value"] | Beginnt mit |
[attr$="value"] | Endet mit |
Kombinatoren
| Muster | Trifft zu auf |
|---|---|
div button | Button innerhalb von div |
div > button | Direktes Kind-Button |
button:first-child | Erster Button |
button:not(.disabled) | Nicht deaktiviert |
Beispiele
/* Links zu externen Seiten */
a[href^="http"]:not([href*="mysite.com"])
/* Absende-Buttons, die nicht deaktiviert sind */
button[type="submit"]:not(:disabled)
/* Download-Links im Inhaltsbereich */
.content a[href$=".pdf"]
Wie Klicks gezählt werden
Ein Klick-Ziel wird einmal pro Besucher-Sitzung abgeschlossen. Zenovay verzeichnet den ersten übereinstimmenden Klick in einer Sitzung und ignoriert nachfolgende Klicks auf das gleiche Element innerhalb dieser Sitzung, sodass ein Besucher, der zweimal klickt, als eine Conversion zählt. Derselbe Besucher, der in einer neuen Sitzung zurückkehrt, kann das Ziel erneut abschließen.
Wenn Sie einen bestimmten Klick nur auf bestimmten Seiten verfolgen möchten, begrenzen Sie ihn auf der Selektor-Ebene durch Kombination des Klick-Selektors mit einer übergeordneten Ebene, die nur auf diesen Seiten existiert, oder verwenden Sie ein URL-Match-Ziel für seitenbasierte Conversions.
Dynamische Elemente
Nach dem Seitenladen hinzugefügte Elemente
Klick-Tracking wird auf Dokumentebene angebracht, sodass es für Elemente funktioniert, die nach dem ursprünglichen Seitenladen erscheinen, einschließlich Inhalte, die von JavaScript-Frameworks gerendert werden.
Dynamische Elemente testen
- Laden Sie die Seite
- Warten Sie, bis das Element angezeigt wird
- Klicken Sie auf das Element
- Überprüfen Sie, ob das Ziel ausgelöst wird
Fehlerbehebung
Klicks werden nicht verfolgt
Selektor überprüfen:
// In der Browser-Konsole
document.querySelector('your-selector')
// Sollte das Element zurückgeben
Element-Sichtbarkeit überprüfen:
- Ist das Element beim Klicken sichtbar?
- Ist es versteckt oder von einem anderen Element verdeckt?
Falsche Elemente werden zugeordnet
Machen Sie den Selektor spezifischer:
- Übergeordneten Kontext hinzufügen
- Eindeutigere Klasse verwenden
- Data-Attribut hinzufügen
Verzögert geladene Elemente
Wenn ein Element nach der Seite geladen wird:
- Die meisten Fälle funktionieren automatisch
- Gründlich testen
- Bei anhaltenden Problemen ein Custom Event-Ziel in Betracht ziehen
Best Practices
Selektoren planen
Vor der Implementierung:
- Wichtige CTAs identifizieren
- Eindeutige Bezeichner sicherstellen
- Selektoren dokumentieren
- Über alle Seiten hinweg testen
Mit Entwicklern zusammenarbeiten
Fordern Sie an:
- Eindeutige IDs für wichtige CTAs
- Data-Attribute für das Tracking
- Einheitliche Namenskonventionen
Gründlich testen
- Klicken Sie selbst auf das Element
- Prüfen Sie die Echtzeit-Ansicht
- Überprüfen Sie, ob das Ziel erfasst wurde
- Testen Sie auch auf Mobilgeräten