Der Google Tag Manager (GTM) ist ein Tool, mit dem du Code-Snippets zu deiner Website hinzufügen und verwalten kannst, ohne den Code der Website direkt bearbeiten zu müssen. Wenn deine Website bereits GTM verwendet, ist dies die empfohlene Methode, um das Superchat-Web-Widget zu installieren.
Nachfolgend findest du eine Schritt-für-Schritt-Anleitung, wie du dein Superchat-Web-Widget in deinen Google Tag Manager integrierst.
Schritt 1: Erstelle dein Web-Widget-Skript
Klicke hier und wähle Neues Web-Widget aus.
Schritt 2: Kopiere den applicationKey aus deinem Web-Widget-Skript
Sobald dein Widget erstellt ist, zeigt dir Superchat ein für dein Konto eindeutiges Skript an. Es sieht in etwa so aus:
<script src='https://widget.superchat.de/snippet.js?applicationKey=AAAAAAAAAAAAAAAAAAA' referrerpolicy='no-referrer-when-downgrade'></script>
Das oben gezeigte Skript ist nur ein Beispiel – dein Skript hat einen anderen Anwendungsschlüssel. Du musst dieses Skript nicht direkt verwenden. Suche stattdessen die Zeichenfolge, die in deinem Skript nach applicationKey= erscheint, und kopiere diese. Das ist dein eindeutiger Anwendungsschlüssel, den du in Schritt 4 in das GTM-Skript einfügst.
Schritt 3: Erstelle einen neuen Tag im Google Tag Manager
Öffne Google Tag Manager und wähle deinen Container aus.
Klicke im linken Menü auf Tags und dann auf Neu.
Gib deinem Tag einen Namen, z. B. "Superchat Web-Widget".
Klicke auf den Bereich Tag-Konfiguration und wähle Benutzerdefiniertes HTML als Tag-Typ aus.
Schritt 4: Füge das Superchat-Skript hinzu
Füge das folgende Skript in das HTML-Feld ein und ersetze XXXXXXXXXXXXXXXXX durch deinen Anwendungsschlüssel aus Schritt 2:
<script>(function() {var script = document.createElement("script");script.type = "text/javascript";script.src = "https://widget.superchat.de/snippet.js?applicationKey=XXXXXXXXXXXXXXXXX";script.setAttribute("referrerpolicy","no-referrer-when-downgrade");document.body.appendChild(script);})();</script>
Schritt 5: Lege einen Trigger fest
Ein Trigger teilt GTM mit, wann dein Tag ausgelöst werden soll – also auf welchen Seiten das Widget geladen werden soll. Klicke auf den Bereich Triggering und wähle Alle Seiten aus. Dadurch wird sichergestellt, dass das Widget auf deiner gesamten Website erscheint.
Wenn das Widget nur auf bestimmten Seiten erscheinen soll, kannst du stattdessen einen benutzerdefinierten Trigger erstellen – zum Beispiel, um es nur auf deiner Kontakt- oder Preisseite anzuzeigen.
Sobald alles wie gewünscht konfiguriert ist, kannst du auf Speichern klicken.
Schritt 6: Vorschau anzeigen und überprüfen
Bevor du die Änderungen veröffentlichst, solltest du überprüfen, ob das Widget korrekt geladen wird. Klicke oben rechts im GTM auf Vorschau.
Füge dann einfach die URL ein, auf der du das Web-Widget hinzufügst. Dadurch wird eine Debug-Sitzung in deinem Browser geöffnet, in der du deine Website besuchen und bestätigen kannst, dass das Superchat-Widget wie erwartet erscheint. Im GTM-Debug-Bereich siehst du auch, ob das Tag erfolgreich ausgelöst wurde.
Schritt 7: Veröffentliche deine Änderungen
Wenn du sicher bist, dass das Widget korrekt geladen wird, gehe zurück zum GTM und klicke oben rechts auf Übermitteln.
Füge bei Aufforderung einen Versionsnamen hinzu (z. B. "Superchat-Widget hinzugefügt") und klicke dann auf Veröffentlichen. Dein Widget ist jetzt auf deiner Website live.
Fehlerbehebung
Fehlerbehebung
Das Widget erscheint nicht auf meiner Website
Überprüfe, ob du deinen GTM-Container nach dem Speichern des Tags veröffentlicht hast – Änderungen im GTM werden erst live geschaltet, wenn du auf Übermitteln und Veröffentlichen klickst. Stelle außerdem sicher, dass der Trigger auf Alle Seiten eingestellt ist und dass der Anwendungsschlüssel im Skript mit dem in deinen Superchat-Widget-Einstellungen übereinstimmt.
Das Tag wird im GTM-Vorschaumodus nicht ausgelöst
Stelle sicher, dass der Trigger korrekt konfiguriert ist und dass du eine Seite besuchst, die den Trigger-Bedingungen entspricht. Wenn du einen benutzerdefinierten Trigger verwendest, überprüfe noch einmal, ob die Regeln wie beabsichtigt eingerichtet sind.
Ich bin mir nicht sicher, ob ich den richtigen Anwendungsschlüssel kopiert habe
Gehe zurück zu Einstellungen → Web-Widget in Superchat, öffne das erstellte Widget und kopiere das vollständige Skript erneut. Der Anwendungsschlüssel ist alles, was nach applicationKey= und vor dem schließenden Anführungszeichen steht.