Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt.

Events vom Typ „Angeklicktes Element“ erstellen

Zuletzt aktualisiert am: Januar 19, 2023

Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):

Marketing Hub Enterprise

Ein Event vom Typ „Angeklicktes Element“ verfolgt nach, wann ein anonymer Besucher oder HubSpot-Kontakt auf ein bestimmtes Elemente auf Ihrer Website klickt. Verfolgen Sie beispielsweise nach, wenn ein CTA für eine kostenlose Demo oder einen PDF-Download-Link angeklickt wird. Events vom Typ „Angeklicktes Element“ können nur auf Seiten erstellt und nachverfolgt werden, auf denen der HubSpot-Tracking-Code installiert ist.

Bitte beachten:

Die Anweisungen in diesem Artikel sind für das neue Tool für benutzerdefinierte verhaltensorientierte Events, das das vorherige Tool für benutzerdefinierte verhaltensorientierte Events ersetzt. Alle Events, die im vorherigen Tool erstellt wurden, funktionieren weiter und Sie können nach wie vor diese Events im alten Tool verwalten und analysieren.
Frühere Events können nicht mit dem neuen Events-Tool migriert werden. Stattdessen wird empfohlen, Ihre früheren Events im neuen Tool erneut zu erstellen, da neue benutzerdefinierte Events mehr Flexibilität bei Event-Eigenschaften bieten. Beispielsweise mussten Sie bei früheren Events mehrere Events erstellen, um separate Kampagnen nachzuverfolgen, wohingegen jetzt mit einem einzelnen benutzerdefinierten verhaltensorientierten Event mehrere Kampagnen nachverfolgt werden können.

Es gibt zwei Möglichkeiten, um Events vom Typ „Angeklicktes Element“ zu erstellen:

Installieren und Verwenden der Chrome-Erweiterung bei einfachen Events vom Typ „Angeklicktes Element“, z. B. bei angeklickten Hyperlinks und Bildern.
Manuelles Erstellen des Events mithilfe einer ID, einer Klasse oder eines jQuery-Selektors für komplexere Inhalte wie CTAs.

Erfahren Sie nach der Erstellung Ihrer Events, wie Sie Events in den Analytics- und Reporting-Tools analysieren. Sie können auch Events vom Typ „Aufgerufene URL“ und benutzerdefinierte Events erstellen.

Events vom Typ „Angeklicktes Element“ mit der Chrome-Erweiterung erstellen

Chrome-Erweiterung für Events installieren

Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das settings Zahnradsymbol, um die Einstellungen aufzurufen.
Gehen Sie im linken Seitenmenü zu „Tracking & Analytics“ > „Tracking-Code“.
Klicken Sie auf „Events Chrome-Erweiterung installieren“.
Klicken Sie auf „Download“.
Sie werden zur HubSpot Analytics-Erweiterung im Google Chrome-Webstore weitergeleitet. Klicken Sie oben rechts auf „Zu Chrome hinzufügen“.

Klicken Sie im Dialogfeld auf „Erweiterung hinzufügen“.
Nachdem die Erweiterung installiert wurde, wird sie in der Chrome Toolbar als orangefarbenes Sprocket-Symbol sprocket angezeigt.

Mit der Chrome-Erweiterung für Events ein Event erstellen

Gehen Sie zu einer Webseite, auf der Ihr HubSpot-Tracking-Code installiert ist.
Klicken Sie in der Chrome Toolbar auf das sprocket Sprocket-Symbol.
Wählen Sie im Dialogfeld „Angeklicktes Element“ aus.
Klicken Sie auf „Weiter“. Sie können dann ein Element auf der Seite auswählen, das nachverfolgt werden soll.
Klicken Sie auf ein Element auf der Seite, für das ein Event vom Typ „Angeklicktes Element“ erstellt werden soll. Im folgenden Beispiel verfolgt das Event vom Typ „Angeklicktes Element“ Klicks auf den Link „Wichtige Aspekte“ nach.

Im Dialogfeld wird der CSS-Selektor des Elements automatisch generiert. Geben Sie einen Namen für das Event ein und klicken Sie dann auf „Event erstellen“.

Bitte beachten: Abhängig von der Komplexität des HTML- und CSS-Markups Ihrer Website kann die Chrome-Erweiterung für Events unter Umständen keinen eindeutigen CSS-Selektor für ein Element erkennen. In diesem Fall sollten Sie das Event manuell erstellen oder ein eindeutiges ID-Tag zum Element hinzufügen.

Wenn die Erstellung des Events erfolgreich war, wird eine Bestätigungsmeldung angezeigt. Klicken Sie auf „Event in HubSpot anzeigen“, um das neue Event vom Typ „Angeklicktes Element“ in Ihrem Event-Dashboard anzuzeigen.

HubSpot beginnt dann, das Element nachzuverfolgen. Erfahren Sie, wie Sie das Event in HubSpot analysieren.

Das Event mithilfe einer ID, einer Klasse oder einem jQuery-Selektor manuell erstellen

Klicken Sie auf „Benutzerdefinierte verhaltensorientierte Events”.
Klicken Sie oben rechts auf „Event erstellen“.
Geben Sie im rechten Bereich einen Namen für Ihr Event ein und wählen Sie dann „Angeklicktes Element“ aus.
Klicken Sie auf „Weiter“.
Wählen Sie aus, wie Sie das angeklickte Element auf der Seite identifizieren möchten. Erfahren Sie mehr darüber, wie Sie IDs auf einer Website-Seite finden.
- HTML-ID: Geben Sie die ID des Elements ein, das Sie verfolgen möchten. Wenn Ihr angeklicktes Element beispielsweise als <button id="log-in"> eingerichtet ist, würden Sie log-in eingeben.
- HTML-Klasse: Geben Sie die Klasse des Elements ein, das Sie verfolgen möchten. Wenn Ihr angeklicktes Element beispielsweise als <button class="bigCTA"> eingerichtet ist, würden Sie bigCTA eingeben.
- jQuery-Selektor: Geben Sie den jQuery-Selektor des Elements ein, das Sie verfolgen möchten.
Klicken Sie auf „Weiter“.
Standardmäßig wird das angeklickte Element auf allen Seiten nachverfolgt, auf denen der HubSpot-Tracking-Code installiert ist.. Um nur Element-Klicks auf eine bestimmte Seite nachzuverfolgen, wählen Sie „Spezifische Seite“ aus und geben Sie die Seiten-URL ein.

Klicken Sie auf „Speichern“.

Nach dem Erstellen des Events beginnt HubSpot, das Element nachzuverfolgen. Erfahren Sie, wie Sie das Event in HubSpot analysieren.

Element-Selektoren verstehen und abrufen

Sie können ein Element anhand seiner HTML-ID, seiner HTML-Klasse oder mit Hilfe eines jQuery-Selektors identifizieren.

ID

So finden und verwenden Sie die ID eines Elements:

Klicken Sie mit der rechten Maustaste auf die Seite mit dem gewünschten Element und wählen Sie „Seitenquelle anzeigen“ oder „Untersuchen“ aus.
Klicken Sie auf das Element. Sie sollten das ID-Attribut in der Code-Zeile ablesen können (z. B. id="unique-element-name").
Kopieren Sie den ID-Wert und fügen Sie ihn (z. B. in diesem Fall " unique-element-name") ohne Anführungszeichen in das Feld HTML-ID ein. Für ein Element, das id="get-started-marketing-hub" enthält, würden Sie beispielsweise get-started-marketing-hub in das Feld eingeben.

Klasse

Ein Ereignis für ein angeklicktes Element kann ein Element anhand seines Klassenattributs identifizieren.

Bitte beachten:

wenn mehrere Elemente auf einer Seite dieselbe Klasse haben, wird nur das erste Element auf der Seite für die Ereignisabschlüsse gezählt. Daher sollten Sie class nur dann als Bezeichner verwenden, wenn kein anderes Element auf der Seite diese Klasse teilt. Wenn das Element keine eindeutige Klasse hat, empfiehlt es sich, stattdessen ID zu verwenden.
Wenn Sie nicht in der Lage sind, den Quellcode eines Elements zu aktualisieren, um eine eindeutige Klasse oder ID hinzuzufügen, empfiehlt es sich, stattdessen die Chrome-Erweiterung zu verwenden, um das Ereignis einzurichten, da HubSpot einen spezifischeren Bezeichner zuweist.

Um die Klasse eines Elements zu finden und sie für das Ereignis zu verwenden:

Klicken Sie mit der rechten Maustaste auf die Seite mit dem gewünschten Element und wählen Sie „Seitenquelle anzeigen“ oder „Untersuchen“ aus.
Klicken Sie auf das Element. Sie sollten das Klasse-Attribut in der Code-Zeile ablesen können (z. B. class="unique-element-name").
Kopieren Sie den Klassenwert und fügen Sie ihn ohne Anführungszeichen in das Feld HTML Class ein. Zum Beispiel für ein Element, das in das Feld aufgenommen wird
- Wenn ein Element mehrere Klassen hat, können Sie jede seiner Klassen als Ziel verwenden. Wenn ein Element zum Beispiel class="cta--primary cta--medium homepage-sales"enthält , können Sie cta--primary, cta--medium oder homepage-sales in das Feld HTML Class eingeben. Stellen Sie jedoch sicher, dass keine anderen Elemente diese Klasse teilen.
- Wenn Sie mehrere Klassen verbinden, verwenden Sie das folgende Format: Klasse1.Klasse2.Klasse3.

html-klassenselektor-einzeln0

jQuery-Selektor

Sie können auch vollständige jQuery-Selektoren verwenden, um zielgerichtet Elemente zu erfassen. Dies ist nützlich, wenn das Element, auf das Sie abzielen, keine ID oder Klasse hat, oder wenn Sie spezifischer sein müssen

Sie möchten z. B. ein Ereignis für ein angeklicktes Element erstellen, indem Sie einen jQuery-Selektor für das folgende Element verwenden:

<a id="get-started-marketing-hub" class="cta--primary" href="https://www.hubspot.com/products/marketing/get-started" aria-label="Get started with Marketing Hub">Los geht's</a>

Anstatt die ID oder Klasse des Elements zu verwenden, können Sie einen jQuery-Selektor verwenden, um die href-Eigenschaft des Elements anzuvisieren, indem Sie Folgendes in das jQuery-Selektorfeld eingeben:

[href='https://www.hubspot.com/products/marketing/get-started']

jquery-selector-field-with-value