Benutzerdefiniertes Ereignis & Benutzerdefinierte Eigenschaften

Metricalp sammelt standardmäßig screen_view-Ereignisse, um Sitzungen, Seitenaufrufe usw. zu verfolgen. Sie können diese automatische Sammlung jedoch deaktivieren (siehe API-Referenz) oder Sie möchten möglicherweise andere benutzerdefinierte Ereignisse sammeln, während sie aktiv ist. Um die manuelle Sammlung von 'screen_view' oder jedem benutzerdefinierten Ereignis zu erreichen, gibt es zwei Möglichkeiten. Dies sind über die JavaScript-API oder über HTML-Datenattribute. Außerdem können Sie benutzerdefinierte Eigenschaften mit diesen Ereignissen senden. Wir werden diese beiden Methoden und benutzerdefinierte Eigenschaften auf dieser Seite beschreiben.

Benutzerdefinierte Ereignisse

Zunächst einmal ist screen_view ein 'Systemereignis'. Alle anderen Ereignisse nennen wir 'benutzerdefinierte Ereignisse'. Benutzerdefinierte Ereignisse müssen manuell von Ihrem System ausgelöst werden. Wir zeigen, wie Sie dies im Folgenden tun können. Sie können auch screen_view-Ereignisse manuell mit den folgenden Methoden zusätzlich zu benutzerdefinierten Ereignissen auslösen. Aber es gibt einen weiteren wichtigen Punkt, nämlich dass Sie entweder jedes benutzerdefinierte Ereignis in Ihrem System zulassen oder nur bestimmte Ereignisse zulassen können. Es liegt ganz bei Ihnen und ist konfigurierbar. Sie können dies in Tracker-Einstellungenkonfigurieren. Zum Beispiel können Sie nur benutzerdefinierte Ereignisse click_save, click_buy zulassen (screen_view ist immer vom System erlaubt) und jeder andere Ereignistyp wird ignoriert. Oder erlauben Sie einfach alle benutzerdefinierten Ereign -isse. Nochmals, es liegt an Ihnen.

Wir zeigen zwei Möglichkeiten zur Erfassung von benutzerdefinierten Ereignissen:

1. Über die JavaScript-API

Wenn Sie Metricalp korrekt integriert haben, wird es ein Objekt namens metricalp zum globalen Fensterobjekt hinzufügen. Dieses Objekt hat eine Methode event, die Sie verwenden können, um benutzerdefinierte Ereignisse zu senden. Diese Methode nimmt ein Argument, das ein Objekt ist. Dieses Objekt muss das Feld type enthalten, das den Namen des Ereignisses angibt. Sie können diesem Objekt weitere benutzerdefinierte Eigenschaften anhängen. Für benutzerdefinierte Eigenschaften siehe weiter unten auf dieser Seite. Beispiel für ein benutzerdefiniertes Ereignis über die JS-API:

window.metricalp.event({
  type: 'click_buy',
  color: 'red'
});

Außerdem, wie bei React- und NextJS-Frameworks, haben wir benutzerdefinierte Integrationsbibliotheken und ihre APIs für die Erstellung von Ereignissen unterscheiden sich von dieser reinen Logik. Überprüfen Sie deren Dokumentationen.

2. Über HTML-Datenattribute

Metricalp wird standardmäßig Ihr Dokument auf Elemente mit dem Attribut data-metricalp-event überprüfen.

Wenn es ein Element mit diesem Datenattribut gibt, wird es, wenn es sich um ein Formularelement handelt, das Sendeereignis abhören, andernfalls wird es die Klickereignisse für dieses Element abhören. Wenn das Ereignis ausgelöst wird, wird ein Ereignis mit dem Namen des Wertes dieses Datenattributs erzeugt. Außerdem werden alle Datenattribute dieses Elements, die mit data-metricalp- beginnen, als benutzerdefinierte Eigenschaften an das Ereignis angehängt. Zum Beispiel:

<button data-metricalp-event="click_buy" data-metricalp-color="red">Kaufen</button>

Wenn ein Besucher auf diesen Button klickt, wird das gleiche Ereignis wie im obigen JS-Beispiel erzeugt.

Benutzerdefinierte Eigenschaften

Benutzerdefinierte Ereignisse sind sehr leistungsfähig, um bedeutende Daten basierend auf Ihren Bedürfnissen zu verfolgen. Jedes Ereignis hat Basisdaten wie Browser, Land, Gerät usw. Aber vielleicht möchten Sie zusätzliche Daten an diese benutzerdefinierten Ereignisse (oder das screen_view-Ereignis) anhängen. Wir nennen diese zusätzlichen Datenbenutzerdefinierte Eigenschaften. Sie können benutzerdefinierte Eigenschaften an benutzerdefinierte Ereignisse über die JavaScript-API oder HTML-Datenattribute anhängen. Wir zeigen, wie Sie benutzerdefinierte Eigenschaften unten anhängen können.

Standardmäßig können Sie benutzerdefinierte Eigenschaften mit den Schlüsseln custom_prop1, custom_prop2, custom_prop3, custom_prop4, custom_prop5 anhängen. Derzeit erlauben wir 5 benutzerdefinierte Eigenschaften pro Ereignis, aber wir planen, diese Anzahl in Zukunft zu erhöhen. Zum Beispiel:

window.metricalp.event({
  type: "screen_view",
  custom_prop1: "red"
});

Es könnte schwierig sein, sich zu merken, welche benutzerdefinierte Eigenschaft welche Daten enthält. Um diese Verwirrung zu vermeiden, können Sie Aliase für jede benutzerdefinierte Eigenschaft pro Ereignistyp festlegen. Wenn Sie beispielsweise `color` als Alias für benutzerdefinierte Eigenschaft 1 in den Tracker-Einstellungen für screen_view-Ereignisse festlegen, wird diese benutzerdefinierte Eigenschaft als Farbe in Ihrem Dashboard für screen_view-Ereignisse angezeigt. Nun können Sie Ereignisse wie folgt erstellen:

window.metricalp.event({
  type: "screen_view",
  color: "red"
});

Viel lesbarer, oder? Aber beispielsweise können Sie `username` als Alias für benutzerdefinierte Eigenschaft 1 in den Tracker-Einstellungen für click_save-Ereignisse festlegen, und dann wird diese benutzerdefinierte Eigenschaft als Benutzername in Ihrem Dashboard für click_save-Ereignisse angezeigt.

window.metricalp.event({
  type: "click_save",
  username: "John"
});

Sie können auch die Syntax custom_prop1 weiterhin verwenden, auch wenn Sie einen Alias für diese benutzerdefinierte Eigenschaft festgelegt haben. Die Schönheit dabei ist, dass diese Aliase spezifisch für jeden Ereignistyp sind. Das hilft Ihnen, bedeutungsvolle Daten zu erfassen und diese leicht anzuzeigen. Im obigen Beispiel für benutzerdefinierte Ereignisse haben wir auch gezeigt, wie Sie benutzerdefinierte Eigenschaften über HTML-Datenattribute anhängen können: data-metricalp-color="red". Auch die Syntax custom_prop1 ist für HTML-Datenattribute gültig: data-metricalp-custom_prop1="red", wobei die Namen der Datenattribute auch Unterstriche enthalten können.

Wie oben erwähnt, finden Sie diese Alias-Konfiguration auf der Seite der Tracker-Einstellungen. Um mehr über benutzerdefinierte Eigenschaften-Aliase zu erfahren, schauen Sie sich die Dokumentationsseite Tracker konfigurierenan.

Schließlich, wenn Sie benutzerdefinierte Eigenschaften für bestimmte Ereignistypen automatisch anhängen möchten, können Sie 'sharedCustomProps' wie folgt definieren:

<script>
        window.metricalp = window.metricalp || {
          queue: [],
          sharedCustomProps: {
            _global: { custom_prop3: "v1.0" },
            screen_view: {
              color: "red",
              custom_prop2: "Test",
            }
          },
          event: function (e) {
            this.queue.push(e);
          },
        };
</script>

Der Schlüssel '_global' ist hier ein spezieller Schlüssel. Es ist ein generischer Container und kein Ereignistyp. Wenn Sie benutzerdefinierte Eigenschaften in '_global' festlegen, werden diese allen Ereignistypen hinzugefügt. Im obigen Beispiel wird custom_prop3 allen Ereignistypen hinzugefügt. Aber custom_prop2 und color werden nur zu screen_view-Ereignissen hinzugefügt. Wenn Sie eine benutzerdefinierte Eigenschaft für einen bestimmten Ereignistyp und auch in _global definieren, überschreibt die spezifische Eigenschaft für das Ereignis dieselbe benutzerdefinierte Eigenschaft in _global. Im obigen Beispiel ist color ein Alias für eine benutzerdefinierte Eigenschaft. Wenn Sie die Alias-Syntax für die benutzerdefinierte Eigenschaft anstelle der Syntax custom_prop1 in sharedCustomProps verwenden, müssen Sie diesen Alias für diesen Ereignistyp in den Tracker-Einstellungen definiert haben, andernfalls wird er für nicht definierte Ereignistypen ignoriert. Sie sollten das obige Skript-Tag vor dem Metricalp-Skript-Tag platzieren, damit es sharedCustomProps zu automatisierten screen_view-Ereignissen hinzufügen kann. Wenn Sie die React-Bibliothek verwenden, können Sie sharedCustomProps als Prop definieren

<MetricalpReactProvider
  tid="mam123456"
  initialSharedCustomProps={{
    _global: { custom_prop3: "v1.0" },
    screen_view: { color: 'red', custom_prop2: 'Test' } 
}}>

Weitere Informationen zu sharedCustomProps mit der React-Bibliothek finden Sie in der React und NextJS Dokumentation.

Jetzt haben Sie über benutzerdefinierte Ereignisse und benutzerdefinierte Eigenschaften gelernt. Zum Beispiel können Sie Ereignisse 'error' erstellen, wenn Ihr System einen Fehler hat und Fehlerprotokolle als Eigenschaften anhängen (neben Browser, Geräteinformationen usw., automatisch gesammelten Standard-Eigenschaften). Oder Sie können benutzerdefinierte Eigenschaften für A/B-Tests verwenden. Die Verwendungsszenarien sind unbegrenzt, basierend auf Ihrer Vorstellungskraft und Ihren Bedürfnissen.

Mit benutzerdefinierten Ereignissen und benutzerdefinierten Eigenschaften können Sie tiefere Einblicke in Ihre Besucher erhalten. Das ist die Schönheit von Metricalp 💜