JavaScript-Integration: Installation

Die CrowdHandler-JavaScript-Integration ist die schnellste und einfachste Möglichkeit, eine Warteschlange in eine Website einzubinden – sie weist jedoch einige Einschränkungen auf, die hier beschrieben werden . Bitte lesen Sie diese durch, bevor Sie die JavaScript-Integration einrichten.

Es gibt zwei Möglichkeiten, wie Sie das CrowdHandler -API-Skript zu Ihrer Website hinzufügen können.

Wenn Sie Zugriff auf Ihren HTML-Code und/oder Ihre Vorlagen haben, können Sie das Skript manuell einfügen.

Falls Sie das nicht tun oder sich lieber nicht die Hände schmutzig machen möchten, können Sie das Skript über den Google Tag Manager einbinden.

So erhalten Sie Ihren öffentlichen API-Schlüssel

In beiden Fällen benötigen Sie Ihren öffentlichen API-Schlüssel.

Um Ihren öffentlichen API-Schlüssel zu erhalten, melden Sie sich bei https://admin.crowdhandler.com und gehen Sie zu Ihrem Konto.

Klicken Sie auf „API“ in der Kontonavigation.

Oben auf dem Bildschirm wird Ihr öffentlicher API-Schlüssel angezeigt.

Sie können entweder auf die Zwischenablage klicken, um den öffentlichen API-Schlüssel zu kopieren, oder den Code markieren und kopieren.

Das Skript manuell hinzufügen

Fügen Sie das folgende Skript-Tag in den Head-Bereich aller Seiten ein, die Sie schützen möchten.

Replace <ch-public-key> with your Public API key.

<script src="https://wait.crowdhandler.com/js/latest/lite-validator/main.js?id=<ch-public-key>"></script>

Beispiel: Wenn Ihr öffentlicher API-Schlüssel 123456abcedf123456abcedf123456abcedf123456abcedf123456abcedf123 lautet, dann lautet Ihr Skript-Tag

<script src="https://wait.crowdhandler.com/js/latest/lite-validator/main.js?id=123456abcedf123456abcedf123456abcedf123456abcedf123456abcedf123"></script>

Hinweis: Es ist wichtig, dass dieses Skript so schnell wie möglich ausgeführt wird. Wir empfehlen daher, es vor allen anderen Skript-Tags einzufügen.

Verwendung des Google Tag Managers

Google Tag Manager ist ein Tag-Management-System, das das Hinzufügen von HTML-/JavaScript-Schnipseln zu Ihrer Website vereinfacht. Wir haben eine spezielle GTM-Tag-Vorlage erstellt, mit der Sie CrowdHandler auf Ihrer Website nutzen können, ohne den Code bearbeiten zu müssen.

Mit diesem Tag wird CrowdHandler auf Ihrer Website implementiert, wodurch wir die Crowds verwalten können. Es muss nur einmal hinzugefügt werden.

Important: Before you start, please make sure that Google Tag Manager is set up correctly on your website, according to the Google Tag Manager installation guide. Specifically, make sure that the <script> element of your Google Tag Manager container appears early on in the <head> section of your site and the <noscript> element appears at the beginning of the <body> section.

So installieren Sie CrowdHandler über den Google Tag Manager auf einer Website:

1. Laden Sie die Vorlage herunter

Am Ende dieses Artikels finden Sie eine Vorlage. Laden Sie diese auf Ihren Computer herunter – wir werden sie in Kürze benötigen.

2. Erstellen Sie eine neue Vorlage im Google Tag Manager

Klicken Sie im Menü des Google Tag Managers auf „Vorlagen“

Wählen Sie anschließend im Bereich „Tag-Vorlagen“ die Option „Neu“ aus.

3. Importieren Sie die Tag-Vorlage

Klicken Sie auf die drei Punkte oben rechts in der Benutzeroberfläche des Google Tag Managers, um das Menü aufzurufen, und wählen Sie „Importieren“ aus.

Navigieren Sie anschließend zu Ihrer heruntergeladenen Datei „template.tpl“ und importieren Sie diese.

Klicken Sie auf „Speichern“ und schließen Sie den Editor.

Die Tag-Vorlage sollte nun in Ihrem Menü „Tag-Vorlagen“ verfügbar sein.

4. Fügen Sie die Tag-Vorlage hinzu

Wählen Sie nun im Menü des Google Tag Managers den Punkt „Tags“ aus und klicken Sie auf „Neu“.

Klicken Sie auf das Tag-Konfigurationsfenster und wählen Sie Ihre neue CrowdHandler-JavaScript-Vorlage aus. Möglicherweise müssen Sie nach unten scrollen, um sie zu sehen.

5. Mit CrowdHandler verbinden

Um Ihre Website mit CrowdHandler zu verbinden, müssen Sie Ihren öffentlichen API-Schlüsselangeben.

Fügen Sie ihn in das Feld „Öffentlicher API-Schlüssel“ in der Tag-Vorlage ein.

Es ist wichtig, dass dieses Tag so schnell wie möglich ausgelöst wird. Öffnen Sie daher die erweiterten Einstellungen und legen Sie die Auslösepriorität des Tags auf einen hohen Wert fest.

Erstellen Sie im Abschnitt „Trigger“ einen neuen Trigger, indem Sie auf den Abschnitt „Trigger“ klicken und anschließend auf das Pluszeichen (+) klicken.

Sie müssen den Trigger so einschränken, dass er nur auf Ihrer Produktionsdomain und mit dem Produktionsprotokoll ausgelöst wird (es sei denn, Sie möchten ausdrücklich Tests in einer Staging- oder Entwicklungsumgebung durchführen; in diesem Fall müssen Sie sicherstellen, dass diese Domains in CrowdHandler eingerichtet sind). Wählen Sie daher als Trigger-Typ „Seitenaufruf“ aus, wählen Sie als Bedingung „Dieser Trigger wird bei bestimmten Seitenaufrufen ausgelöst “ und erstellen Sie eine Bedingung, die Ihrem Anwendungsfall am besten entspricht.

Erstellen Sie beispielsweise die Bedingung „Domains beginnen mithttps://my-domain.com , um sicherzustellen, dass der Trigger nur bei https://my-domain.com ausgelöst wird.

Geben Sie Ihrem Trigger einen Namen und klicken Sie auf die Schaltfläche „Speichern “.

Wählen Sie nun einen Namen für Ihr Tag aus und klicken Sie auf die Schaltfläche „Speichern “.

Klicken Sie auf die Schaltfläche „Senden“ und wählen Sie auf dem nächsten Bildschirm „Veröffentlichen“, um die Änderungen zu veröffentlichen.

Das war's schon! Das CrowdHandler-Skript wurde Ihrer Website hinzugefügt, sodass wir uns um die Menschenmengen kümmern können und Sie sich um den Verkauf kümmern können!

Vorlage.tpl