Custom goals

Ein Custom Goal zählt etwas, das ABlyft nicht von selbst erkennen kann: das Absenden eines Formulars, ein bis zum Ende angesehenes Video, eine Newsletter-Anmeldung, ein abgeschlossener Schritt in einem Konfigurator. Deine Website teilt ABlyft mit einem JavaScript-Aufruf mit, wenn es passiert.

Schritt 1: Das Goal in ABlyft erstellenCopy Anchor Link

1. Gehe zu Targeting & Goals → Goals und erstelle ein Goal.
2. Wähle den Typ Custom ("Trigger a conversion/value via JavaScript").
3. Prüfe den API Name. Er wird aus dem Namen übernommen und identifiziert das Goal in deinem Code, zum Beispiel newsletter-signup.
4. Wähle den Measurement type: Conversion (hat der Visitor es getan oder nicht?) oder Value (ein numerischer Wert, den du mit dem Aufruf sendest), siehe Goal types.
5. Lege in den Statistic Settings die Counting Method und die Winning Direction fest und speichere.
6. Weise das Goal deinem Experiment zu.

Das Formular zeigt eine API Code-Box mit einem fertigen Aufruf für dein Goal. Klicke, um ihn zu kopieren.

Schritt 2: Das Event von deiner Website sendenCopy Anchor Link

<script>
window['ablyft'] = window['ablyft'] || [];
window['ablyft'].push({
    eventType: 'custom',
    eventName: 'newsletter-signup'
});
</script>

Alle Push-Parameter sind in der push()-Referenz aufgelistet. Der eventName muss exakt mit dem API Name des Goals übereinstimmen.

Für ein Goal mit dem Measurement type Value ergänzt die API Code-Box eventValue:

window['ablyft'] = window['ablyft'] || [];
window['ablyft'].push({
    eventType: 'custom',
    eventName: 'video-watched-seconds',
    eventValue: 42
});

Aufruf, bevor das Snippet geladen istCopy Anchor Link

Die Zeile window['ablyft'] = window['ablyft'] || []; ist wichtig. Ist das Snippet noch nicht geladen, wird der Aufruf in einer Liste gespeichert. Wenn das Snippet startet, spielt es alle gespeicherten Aufrufe ab. Du kannst Goal-Aufrufe daher an beliebiger Stelle deiner Seite platzieren, unabhängig von der Position des Snippets. Details: Queueing.

Was gezählt wirdCopy Anchor Link

• Das Event wird zusammen mit den Variations gesendet, denen der Visitor in diesem Moment zugewiesen ist.
• Wie oft wiederholte Aufrufe gezählt werden, hängt von der Counting Method ab, siehe Counting Method.
• Im Preview-Modus werden Goals zur Kontrolle aufgezeichnet, aber nicht in den Results gezählt.
• Ist Tracking noch nicht erlaubt, zum Beispiel weil der Visitor keine Einwilligung gegeben hat, wird das Event in der Session gehalten und gesendet, sobald Tracking erlaubt ist. Siehe Consent Manager.

BeispieleCopy Anchor Link

Bei einem Button-Klick

document.querySelector('#download-brochure').addEventListener('click', () => {
  window.ablyft = window.ablyft || [];
  window.ablyft.push({ eventType: 'custom', eventName: 'brochure-download' });
});

Für einen einfachen Klick brauchst du keinen Code: Verwende stattdessen ein Click Goal.

Wenn ein Formular erfolgreich gesendet wurde

document.querySelector('#contact-form').addEventListener('submit', () => {
  window.ablyft = window.ablyft || [];
  window.ablyft.push({ eventType: 'custom', eventName: 'contact-form-sent' });
});

Validiert dein Formular zuerst, löse den Aufruf stattdessen im Success-Handler deines Formulars aus statt im submit-Event.

Interaction Goal (der Visitor hat mit der Seite interagiert)

Zählt einen Visitor als "interagiert" beim ersten Klick irgendwo auf der Seite oder nach 10 Sekunden auf der Seite, je nachdem, was zuerst eintritt. Das ist ein Engagement-Goal mit niedriger Hürde.

Erstelle ein Custom Goal mit dem API Name interaction, dem Measurement type Conversion und der Counting Method One. Mit Every würde jeder Klick gezählt. Füge den Code zu deinem Project-JavaScript oder zu deiner Seite hinzu.

function triggerInteractionGoal() {
  window['ablyft'] = window['ablyft'] || [];
  window['ablyft'].push({
    eventType: 'custom',
    eventName: 'interaction' // change if you use another API name
  });
}

// On every click
document.addEventListener('click', function () {
  triggerInteractionGoal();
});

// After 10 seconds
setTimeout(function () {
  triggerInteractionGoal();
}, 10 * 1000);

In einer Single-Page-App, nach einem Routenwechsel

function onThankYouViewRendered() {
  window.ablyft = window.ablyft || [];
  window.ablyft.push({ eventType: 'custom', eventName: 'order-confirmed' });
}

Aus einem Tag Manager

Erstelle ein Custom HTML-Tag mit dem Skript aus der API Code-Box und löse es mit dem Trigger aus, der zu deinem Event passt, zum Beispiel einem "Form submission"-Trigger. Lade das ABlyft-Snippet davor oder unabhängig davon, beide Reihenfolgen funktionieren.

Aus einem Data-Layer-Event

Verwende watchDataLayerEntry, um ein Goal zu pushen, wenn dein Data Layer ein Event erhält.

Prüfen, ob es funktioniertCopy Anchor Link

1. Aktiviere den Debug-Modus und öffne die Konsole. Ein Aufruf protokolliert Triggered GOAL "<name>" (custom).
2. Im Preview-Modus gibt ablyft.get('pingedGoals') die in der aktuellen Session gesendeten Goals zurück.
3. Öffne den Live Log deines Projects, um die eingehenden Events zu sehen.

Nächste SchritteCopy Anchor Link