Wie man Ereignisse mit Google Tag Manager sendet

Mit Hotjar Events können Sie Ereignisse an Hotjar senden, die auf Aktionen oder Änderungen auf Ihrer Website basieren. Diese Ereignisse können dann innerhalb von Hotjar verwendet werden, um Hotjars Tools auszulösen oder Aufnahme- und Heatmap-Daten zu filtern.

Mit Google Tag Manager (GTM) können Sie Ereignisse und Trigger innerhalb von GTM verwenden, um Ereignisse an Hotjar zu senden, ohne zusätzlichen Code manuell auf Ihrer Website platzieren zu müssen. Dies erfolgt durch Erstellen eines benutzerdefinierten HTML-Tags in GTM, der den mit dem Ereignis verbundenen Code enthält. Weitere Informationen finden Sie in der Dokumentation von Google zu Benutzerdefinierten Tags und Triggern.

In diesem Artikel führen wir Sie durch das Senden von Ereignissen an Hotjar mit GTM anhand eines Beispiels, bei dem ein Ereignis gesendet wird, wenn ein Benutzer irgendwo auf einer Seite klickt.

• Wie erstelle ich einen benutzerdefinierten HTML-Tag, um ein Ereignis an Hotjar zu senden?
• Wie überprüfe ich, ob ein Ereignis an Hotjar gesendet wird?

Wie erstelle ich einen benutzerdefinierten HTML-Tag, um ein Ereignis an Hotjar zu senden?

Google Tag Manager sollte auf Ihrer Website installiert sein, bevor Sie diesem Leitfaden folgen. Wenn Sie Google Tag Manager noch nicht installiert haben, müssen Sie das zuerst einrichten. Verwenden Sie den Artikel Einrichten und Installieren von Tag Manager von Google, um zu erfahren, wie es geht.

Erstellen Sie ein neues benutzerdefiniertes HTML-Tag in GTM.

Im Bereich Tags klicken Sie auf Neu.

Klicken Sie auf Tag-Konfiguration und wählen Sie dann Benutzerdefiniertes HTML.

Fügen Sie das Skript ein, das das Ereignis an Hotjar senden wird, in das HTML-Feld ein.

In diesem Beispiel senden wir ein Ereignis namens 'click' an Hotjar. Hier ist das Skript, das wir im HTML-Bereich des benutzerdefinierten HTML-Tags einfügen werden. Das bedeutet, dass jedes Mal, wenn das GTM-Tag ausgelöst wird, ein Ereignis über unsere Events-API an Hotjar gesendet wird, das 'click' genannt wird.

<script>
  hj('event', 'click');
</script>

<script>
  window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments);};
  hj('event', 'click');
</script>

Klicken Sie auf Auslöser und wenden Sie den entsprechenden Auslöser an, um das Tag auszulösen

Im Abschnitt Auslöser können Sie auch auf das +-Symbol klicken, um einen neuen Auslöser hinzuzufügen.

In diesem Beispiel lösen wir das Tag aus, wenn ein Benutzer auf 'Alle Elemente' klickt.

Dies bedeutet, dass das benutzerdefinierte HTML-Tag ausgelöst wird, wenn ein Benutzer irgendwo auf der Seite klickt. Wenn das Tag ausgelöst wird, wird das Ereignis 'click' an Hotjar gesendet.

Klicken Sie auf Speichern, um Ihr benutzerdefiniertes HTML-Tag-Setup zu bestätigen.

Klicken Sie auf die Schaltfläche Senden.

Stellen Sie sicher, dass die Änderungen auf die Live-Umgebung angewendet werden, und klicken Sie auf Veröffentlichen.

Siehe den nächsten Abschnitt zu Wie überprüfe ich, ob ein Ereignis an Hotjar gesendet wird, um zu testen, ob das Ereignis an Hotjar gesendet wird, wenn das Tag ausgelöst wird.

Zurück nach oben

Wie überprüfe ich, ob ein Ereignis an Hotjar gesendet wird

In dem obigen Beispiel haben wir ein benutzerdefiniertes HTML-Tag eingerichtet, um ein Ereignis an Hotjar zu senden, basierend auf einem Seitenklick. Jetzt können wir unsere Browser-Entwicklertools verwenden, um zu bestätigen, dass das Ereignis erfolgreich an Hotjar gesendet wird.

Aktivieren Sie den Hotjar Debug-Modus.

Jede Seite, auf der der Hotjar-Tracking-Code installiert ist, kann unsere Debugging-Logs nutzen. Um diese Funktion zu nutzen, fügen Sie den folgenden Parameter am Ende der URL Ihrer Webseite hinzu, wenn Sie sie in Ihrem Browser öffnen: ?hjDebug=1

Beispiele:
https://www.hotjar.com/?hjDebug=1
https://www.hotjar.com/?utm=123&hjDebug=1

Öffnen Sie die Entwicklertools Ihres Browsers und klicken Sie auf den Console-Tab.

• Um dies in Chrome zu tun, klicken Sie in der Menüleiste auf Ansicht > Entwickler > Entwicklertools
• Um dies in Firefox zu tun, klicken Sie in der Menüleiste auf Extras > Browser-Tools > Web-Entwicklertools

Sobald das Menü der Entwicklertools im Browser geöffnet ist, wählen Sie den Tab Console aus.

Aktualisieren Sie die Seite.

Wir empfehlen, die Seite neu zu laden, nachdem Sie den Debug-Modus aktiviert und Ihre Entwicklertools geöffnet haben, um sicherzustellen, dass Sie alle relevanten Protokolle sehen, die beim Laden der Seite auftreten. Sie sollten mehrere farbige Protokolleinträge sehen, die ähnlich aussehen wie diese:

Triggern Sie das Ereignis auf der Seite.

Führen Sie die Aktion aus, die erforderlich ist, um das Ereignis auszulösen. Wenn Sie dem im vorherigen Artikel skizzierten Beispiel gefolgt sind, können Sie überall auf der Seite klicken, um das Ereignis auszulösen. Wenn das Ereignis erfolgreich gesendet wurde, sehen Sie es im Konsolen-Tab wie folgt erscheinen:

Wenn Sie Ihr Ereignis erfolgreich im Browser-Konsole gesehen haben, sind Sie fertig! Wenn Sie es nicht gesehen haben, müssen Sie möglicherweise Ihre GTM-Konfigurationen überprüfen, um sicherzustellen, dass der Ereigniscode korrekt implementiert wurde.

Nachdem Sie Ereignisse eingerichtet haben, die an Hotjar gesendet werden sollen, werden Sie die Ereignisse in den Hotjar-Tools sehen können. Von hier aus können Sie derzeit mit Hotjar-Ereignissen folgendes tun:

• Aufnahmen nach Ereignissen filtern.
• Heatmaps nach Ereignissen filtern.
• Eine Aufnahmesegment erstellen, das das gefilterte Ereignis enthält.
• Umfragen und Feedback-Widgets gezielt ausrichten, um basierend auf Ereignissen auszulösen.
• Sitzungsaufzeichnung starten basierend auf der Auslösung von Ereignissen.

Zurück nach oben

Siehe auch

• Was sind Ereignisse?
• [Kurs] Ereignisse für Aufnahmen
• Ereignisse API-Referenz
• Wann man Ereignisse und Benutzerattribute verwenden sollte