Google-Tag-Manager-Integration
KI-Chatbot mit dem Google Tag Manager einbinden
Lade deinen intoCHAT-Agenten über ein benutzerdefiniertes HTML-Tag auf jeder Seite, ohne die Templates deiner Website zu bearbeiten. Der Code unten übergibt die Agenten-ID so, dass GTM sie nicht entfernt.
Zuletzt aktualisiert:
So funktioniert intoCHAT mit GTM
Mit dem Google Tag Manager fügst du Scripts zentral an einer Stelle zu deiner Website hinzu. intoCHAT funktioniert über GTM, mit einem wichtigen Detail: GTM entfernt Data-Attribute aus Script-Tags in benutzerdefinierten HTML-Tags, und das intoCHAT-Script liest seine Agenten-ID genau aus so einem Attribut. Der Code auf dieser Seite umgeht das, indem er das Script-Element per JavaScript erzeugt, damit das Widget mit dem richtigen Agenten lädt. Alles andere, von Farben bis Wissen, verwaltest du in intoCHAT.
intoCHAT mit dem Google Tag Manager installieren
Agenten-ID kopieren
Öffne in intoCHAT den Tab Share deines Agenten. Die ID steht auf der Karte WordPress Plugin und ist auch der Wert von data-chatbot-id im Script-Tag.
Trigger für DOM ist bereit anlegen
Geh in deinem GTM-Container zu Trigger und klicke auf Neu. Öffne die Triggerkonfiguration, wähle DOM ist bereit, lass ihn bei allen Ereignissen auslösen, gib ihm einen Namen und speichere.
Benutzerdefiniertes HTML-Tag hinzufügen
Geh zu Tags und klicke auf Neu. Öffne die Tag-Konfiguration, wähle Benutzerdefiniertes HTML und füge den Code unten ein, mit deiner Agenten-ID statt YOUR_AGENT_ID. Wähle den Trigger für DOM ist bereit aus und speichere.
Im Vorschaumodus testen
Starte den Vorschaumodus von GTM, öffne deine Website im verbundenen Fenster und prüfe, ob das Tag ausgelöst wurde und die Chat-Bubble unten in der Ecke erscheint.
Senden und veröffentlichen
Sende deine Änderungen und veröffentliche den Container. Die Chat-Bubble lädt jetzt auf jeder Seite, auf der dein GTM-Container läuft.
Das benutzerdefinierte HTML-Tag
<script>
(function () {
if (document.getElementById('intochat-embed')) return;
var s = document.createElement('script');
s.id = 'intochat-embed';
s.src = 'https://www.intochat.ai/api/embed.js';
s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
document.body.appendChild(s);
})();
</script>Füge nicht das einfache Script-Tag aus dem Tab Share in GTM ein, denn GTM entfernt daraus das Attribut data-chatbot-id. Diese Version setzt das Attribut per JavaScript und lädt nichts, wenn das Widget schon auf der Seite ist.
Was der Agent auf einer Website mit GTM macht
Installation ohne Code-Deployment
Wenn auf deiner Website schon ein GTM-Container läuft, fügst du den Agenten in GTM hinzu, testest ihn und entfernst ihn wieder, ohne die Templates deiner Website zu ändern.
Lernt aus deiner Website
Gib deine Website-Adresse ein, und intoCHAT findet über Sitemap und Links bis zu 500 Seiten, rendert JavaScript-lastige Seiten und lässt dich auswählen, was dazugehört.
Sammelt Leads
Ein Formular im Chat fragt nach E-Mail-Adresse oder Telefonnummer, nach Regeln, die du festlegst. Leads bekommst du per E-Mail und kannst sie als CSV exportieren.
Führt Aktionen auf deiner Seite aus
Clientseitige Aktionen rufen JavaScript-Funktionen auf, die du auf deiner Seite registrierst, und eigene API-Aktionen lassen den Agenten während des Chats deine HTTP-API aufrufen.
Passt zu deiner Marke
Lege Farben, Avatar, Launcher-Icon, Hinweistext und Position in intoCHAT fest. Änderungen wirken, ohne dass du das GTM-Tag bearbeitest.
Zeigt, was Besucher fragen
Lies jedes Gespräch mit Suche und Datumsfilter und verfolge Gespräche, Nachrichten und Leads im Dashboard.
Häufige Fragen
Kann ich das normale intoCHAT-Script-Tag in den Google Tag Manager einfügen?
Nein. GTM entfernt eigene Attribute wie data-chatbot-id aus Script-Elementen in benutzerdefinierten HTML-Tags, das Widget wüsste also nicht, welchen Agenten es zeigen soll, und es erscheint keine Bubble. Der Code auf dieser Seite erzeugt das Script-Element per JavaScript und setzt das Attribut selbst, das lässt GTM unverändert.
Welchen GTM-Trigger soll ich für intoCHAT verwenden?
Nimm einen Trigger vom Typ DOM ist bereit. Das Widget hängt seine Bubble an den Body der Seite, sobald es läuft, und DOM ist bereit löst erst aus, wenn der Browser die Seite aufgebaut hat, der Body ist also immer da. Soll der Chat nur auf bestimmten Seiten erscheinen, lass den Trigger bei einigen Ereignissen auslösen und füge eine Bedingung hinzu, etwa Page Path beginnt mit /support.
Macht intoCHAT über GTM meine Website langsamer?
Die Seite wartet nicht darauf. GTM lädt seinen Container asynchron, und ein per JavaScript eingefügtes Script-Element blockiert das Rendern nicht. Das Chatfenster läuft danach in einem eigenen iframe von intoCHAT, getrennt vom Code deiner Website.
Erscheint die Chat-Bubble in einer Single-Page-App doppelt?
Nein. Der Code prüft vor dem Einfügen, ob sein Script-Element schon existiert, wenn das Tag auf derselben Seite erneut auslöst, etwa durch einen Trigger für Verlaufsänderungen, kommt also nichts hinzu. Einmal geladen, bleibt die Bubble bis zum nächsten vollständigen Neuladen, Seitenbedingungen entscheiden also nur, wo sie zuerst erscheint.
Muss ich das GTM-Tag ändern, wenn ich den Agenten anpasse?
Nein. Das Tag enthält nur deine Agenten-ID. Farben, Position, Begrüßung, Vorschlagsfragen und Wissen lädt das Widget bei jedem Seitenaufruf von intoCHAT, du musst also keine neue GTM-Version veröffentlichen.
Meine Website hat eine Content Security Policy. Was muss ich erlauben?
Erlaube www.intochat.ai für Scripts, Verbindungen und Frames. Das Widget lädt sein Script von dort, ruft seine Einstellungen von derselben Domain ab und öffnet den Chat in einem iframe von intoCHAT.
Sieh, wie er mit deiner Website antwortet
Gib die Adresse deiner Website ein und chatte mit einem Agenten, der aus deinen Seiten gebaut wird. Das dauert etwa eine Minute.
Agent kostenlos erstellenKostenloser Plan, keine Kreditkarte nötig.