Zum Hauptinhalt springen

Intercom in einer Single-Page-App integrieren

Wenn Ihr Produkt selten Seiten aktualisiert, müssen Sie Intercom mit diesen Anweisungen installieren.

Verfasst von Beth-Ann Sher

Wenn Ihre App nur sehr wenige Seitenaktualisierungen hat (d.h. Inhalte auf der Client-Seite ausgetauscht werden, aber keine Seitenaktualisierung erfolgt) und viel asynchrones JS, müssen Sie Intercom etwas anders integrieren, um sicherzustellen, dass die Daten Ihrer users aktuell bleiben und sie alle Ihre ausgehenden Inhalte (Nachrichten, Touren usw.) erhalten.

Das schlagen wir vor:

Binden Sie zuerst die Intercom-JS-Bibliotheksdatei in das Head-Element Ihres HTML ein.

(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();

Wichtig: Wenn Sie den obigen Code-Snippet kopieren, stellen Sie sicher, dass Sie Ihre workspace ID manuell ändern (dies wird im Code als APP_ID bezeichnet).

Als Nächstes, sobald Sie einen angemeldeten user auf Ihrer Seite haben (nachdem er sich authentifiziert hat und Sie seine Daten verfügbar haben), rufen Sie window.Intercom('boot', {user_data}) auf, wobei user_data alle Daten über den user sind. Bitte stellen Sie sicher, dass Sie user_id und/oder E-Mail bei jedem Aufruf senden, um Ihre users zu aktualisieren. Dies sendet die Details des angemeldeten users an Intercom und prüft auf neue Nachrichten, die dem user angezeigt werden sollen.

Ein Beispiel dafür für ausgeloggte Besucher wäre:

window.Intercom('boot', {
app_id: 'abc12345',
custom_launcher_selector: '#my_custom_link'
});

Wichtig: Wenn Sie den obigen Code-Snippet kopieren, stellen Sie sicher, dass Sie Ihre workspace ID manuell ändern (dies wird im Code als APP_ID bezeichnet).

Wenn Sie sie dann anmelden oder in einen user umwandeln möchten, ändern Sie einfach die Boot-Methode, um deren user-Informationen einzuschließen:

window.Intercom('boot', {
app_id: 'abc12345',
email: 'example@example.com',
user_id: 'abc123',
created_at: 1234567890,
custom_launcher_selector: '#my_custom_link'
});

Wichtig: Wenn Sie den obigen Code-Snippet kopieren, stellen Sie sicher, dass Sie Ihre workspace ID manuell ändern (dies wird im Code als APP_ID bezeichnet).

Intercom mit Google Tag Manager installieren

Intercom mit JavaScript-Frameworks verwenden

Single-Page-Apps werden oft mit JavaScript-Frameworks wie Ember.js, React, Vue, Angular und Next.js gebaut. Für alle diese verwenden Sie das in diesem Artikel beschriebene SPA-Integrationsmuster – starten Sie den Messenger beim Routenwechsel und beenden Sie ihn beim Logout – anstelle des Standard-Code-Snippets, das nicht zuverlässig funktioniert, da die Seite bei der Navigation nicht vollständig neu geladen wird. Für frameworkspezifische npm-Pakete gehen Sie zu Einstellungen → Channels → Messenger → Installieren → Für Web installieren und wählen Sie Ihr Framework aus der Liste aus.


Intercom informieren, wenn sich Ihre Daten oder URL ändern

Es gibt zwei weitere Aufrufe, die Sie möglicherweise in Ihrer App verwenden müssen.

Wenn sich die Daten Ihres users ändern oder Sie die URL auf irgendeine Weise ohne Seitenladen ändern, sollten Sie window.Intercom('update', {user_data}) aufrufen, wobei user_data eine Menge von Änderungen an Ihren user-Daten ist.

Wichtig: Ein Update-Aufruf simuliert eine Seitenaktualisierung, wodurch Intercom prüft, ob neue Nachrichten oder Touren an den Kunden gesendet werden sollen.

Sie müssen nur das einbeziehen, was sich geändert hat – Sie müssen nicht alle user-Daten bei jedem Update senden. Sie sollten jedoch weiterhin user_id und/oder E-Mail senden.

Sie verwenden die Update-Funktion so (stellen Sie sicher, dass Sie Ihre app_id ändern):

  • Sie starten den user wie normal: window.Intercom('boot', {app_id: APP_ID, email: 'someuser@example.com', apples: 1});

  • Wenn sich die Daten des users ändern oder sie gerade eine 'Seiten'-Änderung verursacht haben, würden Sie aufrufen: window.Intercom('update', {email: 'someuser@example.com', apples: 2}); mit allen neuen user-Daten.

Wichtig: Sie müssen Intercom("update") mit einigen neuen user-Daten aufrufen, um bei jeder URL-Änderung einen "Ping" zu initiieren. Wenn sich keine user-Daten geändert haben, können Sie die aktuelle Zeit als Wert für 'last_request_at' wie folgt senden:

Intercom("update", {last_request_at: parseInt((new Date()).getTime()/1000)})

Wenn sich die URL ohne vollständiges Neuladen der Seite ändert, sendet der Intercom Messenger URL-Änderungen nicht automatisch an Intercom, um Nachrichten basierend auf URLs abzugleichen.

Der Update-Aufruf ist auf 20 Mal pro user pro Seite begrenzt, ohne gedrosselt zu werden. Wenn Sie diese Rate überschreiten, werden Sie gedrosselt und das Kontingent von 20 Aufrufen wird alle 30 Minuten zurückgesetzt. Ein Seiten-Refresh oder Neuladen setzt dies zurück.

Wir empfehlen aus diesem Grund, nur an Stellen zu aktualisieren, an denen eine Änderung der user-Daten an Intercom gesendet wird, die eine Auto-Nachricht auslösen könnte.


Wie man eine Sitzung beendet

Intercom ermöglicht es Ihnen, den Intercom Messenger auf jeder öffentlichen Website, die Sie besitzen (Ihre Marketingseite, Ihre Dokumentationsseite, Ihr Entwickler-Hub usw.), zu platzieren. Um die Kontinuität von Gesprächen über all diese potenziell unterschiedlichen Subdomains hinweg zu gewährleisten, während Ihre users angemeldet sind, setzen wir ein Cookie im Browser Ihres users. Dieses Cookie läuft nach einer Woche ab.

Jeder user, der einen gemeinsam genutzten Computer und Browser mit jemand anderem verwendet, kann die zuletzt angemeldete user-Konversationshistorie sehen, bis das Cookie abläuft. Deshalb ist es sehr wichtig, Intercom ordnungsgemäß herunterzufahren, wenn die Sitzung eines users in Ihrer App endet (manuell oder automatisch ausgeloggt).

So fahren Sie Intercom herunter:

  1. Sie haben bereits begonnen, Ihren user über das Intercom-JS-Snippet oder die „boot“-Methode zu verfolgen.

  2. Wenn sich Ihr user von Intercom abmeldet (oder automatisch von Ihrer App abgemeldet wird), rufen Sie Intercom('shutdown'); aus unserer JavaScript-API auf, um die Intercom-Sitzung zu beenden und das Cookie zu löschen.

  3. Falls zutreffend, rufen Sie Intercom('boot', {app_id: 'YOUR_APP_ID'}) auf, um eine neue Sitzung zu starten.

Wichtig: Stellen Sie sicher, dass Sie app_id im Code mit Ihrer eigenen workspace ID ändern.

Die Intercom('shutdown');-Methode setzt Intercom automatisch in einen sauberen Zustand zurück, um einen anderen user anzumelden oder Intercom für ausgeloggte Bereiche Ihrer Anwendung zu starten.


Identitätsprüfung in einer Single-Page-App aktivieren

Um die Identitätsprüfung in Ihrer Single-Page-App zu aktivieren, sollten Sie das Attribut user_hash zu Ihrem Boot-Aufruf hinzufügen.

Beim Implementieren der Benutzeridentifikation in Ihrer Anwendung beachten Sie bitte diese wichtigen Richtlinien:

  1. Identifizieren Sie users nur gegenüber Intercom, nachdem sie authentifiziert und in Ihrer Anwendung angemeldet wurden.

  2. Für nicht angemeldete users (Besucher) schließen Sie nur die app_id in Ihre Konfiguration ein.

  3. Kodieren Sie Benutzerinformationen niemals fest – füllen Sie diese immer dynamisch nach der Authentifizierung aus.

Weitere Details finden Sie hier.

Hinweis: Ohne Messenger-Sicherheit sehen Ihre users im Messenger nur ihre letzten 14 Tage Gesprächshistorie. Mehr erfahren →

Hat dies deine Frage beantwortet?