Alle Kollektionen
Connectoren
So Richtest Du Den JavaScript Object Connector Ein und Verwendest Ihn zum Vorausfüllen von Formularen
So Richtest Du Den JavaScript Object Connector Ein und Verwendest Ihn zum Vorausfüllen von Formularen

Finde heraus, wie du den Dealfront JavaScript Object Connector einrichtest, um bestimmte Bereiche deiner Website zu personalisieren.

Jovanna Karis avatar
Verfasst von Jovanna Karis
Vor über einer Woche aktualisiert

Unser JavaScript (JS) Object Connector liefert in Echtzeit firmografische Informationen über die Besucher deiner Website. Du kannst diese Informationen nutzen, um deine Website zu personalisieren und deinen Nutzern jedes Mal ein einzigartiges Erlebnis zu bieten. Zu diesen firmenbezogenen Daten gehören der Name der Firma, die Domäne, die Branche, die Anzahl der Mitarbeiter und viele andere Datenpunkte.

Der JavaScript Object Connector gleicht die IP-Adresse des Website-Besuchers mit dem entsprechenden Firmenprofil von Leadfeeder ab. Dann füllt er die JavaScript-Variable "discover" mit den firmenbezogenen Informationen über den Besucher.

Du kannst den JS Object Connector zusammen mit anderen Tools zur Website-Personalisierung verwenden.

In dieser kurzen Anleitung erfährst du, wie du den JS Object Connector einrichtest, wie du ihn zum Vorausfüllen von Formularen verwendest und wie du deine Website noch heute personalisieren kannst!

SCHRITT 1: Um loslegen zu können, musst du entweder ein Abonnement für den JS Object Connector oder eine kostenlose Testversion haben.

Scrolle in der Dealfront-Lobby entweder nach unten zu "Connectors" oder klicke hier, während du eingeloggt bist, um direkt zu unserer Connectors-Seite zu gelangen.

Du solltest sehen, dass der JavaScript Object Connector als aktiv markiert ist. Ist dies nicht der Fall, wende dich bitte an deinen CSM, Account Manager oder das Support-Team, um eine Testphase zu starten oder ein aktives Abonnement zu erhalten.

SCHRITT 2: Wenn du dich mit einem aktiven Abonnement zum JS Object Connector durchklickst, siehst du den folgenden Bildschirm. In diesem Dashboard kannst du festlegen, für welche Ziel-URLs (oder Domains) der Connector die Personalisierung vornehmen soll. Auf jeder der Domains oder Seiten, die du hier eingibst, musst du den Leadfeeder Tracker installiert haben.

In diesem Beispiel richten wir den Connector auf der Test-Website youintechnology.com ein.

SCHRITT 3: Wenn du einen aktiven Dealfront JS Object Connector hast und das Leadfeeder Tracker Skript auf den Ziel-URLs installiert hast, wird das JS Object Connector Skript automatisch geladen.

Du kannst dies zunächst testen, indem du deine Website (eine der Ziel-URLs) besuchst und die Entwicklerkonsole öffnest. Gib dann "discover.meta.status" ein, drücke die Eingabetaste und du solltest eine 200er Antwort sehen.

Bitte beachte: Wenn deine IP-Adresse nicht als zu einer Organisation gehörig identifiziert wird, z.B. weil du das Internet von zu Hause aus ohne VPN nutzt, wird dir ein 404-Status angezeigt.

Um die firmografischen Informationen zu sehen, die über den JS Object Connector in der Entwicklerkonsole verfügbar sind, gib "window.discover.data" ein und drücke die Eingabetaste.

Für dieses Beispiel verwenden wir Demo-Parameter, als ob wir die Test-Website von Amazon besuchen würden. Du findest diese Testparameter weiter unten und kannst sie selbst verwenden, wenn du nicht mit einer IP-Adresse deiner Firma verbunden bist.

SCHRITT 4: Wenn du deine Tests abgeschlossen hast, musst du das Skript auf die Bereiche deiner Website anwenden, in denen du die Personalisierung haben möchtest. Am einfachsten - und von uns empfohlen - geht das mit dem Google Tag Manager (GTM). Das ist die beste Methode, wenn du nur begrenzte Programmierkenntnisse hast oder ein CMS verwendest, bei dem sich der Code bei häufigen Aktualisierungen ändern kann.

GTM ist ein Tool, mit dem du ganz einfach Skripte zu deiner Website hinzufügen kannst. Hier erfährst du mehr über den Tag Manager und seine Verwendung.

Wir nehmen ein einfaches Beispiel: Du hast ein Kontaktformular und möchtest, dass bestimmte Felder vorausgefüllt werden, wenn identifizierbare Website-Besucher auf dieser Seite landen. Dein Endziel würde etwa so aussehen wie unten:

Du kannst überprüfen, ob du GTM auf deiner Website hast, indem du z.B. den Google Tag Assistant in Chrome benutzt.

Mit dem Google Tag Assistant kannst du auch überprüfen, welchen GTM-Container du auf deiner Website hast. Das Skript für den JS Object Connector muss zu dem Container hinzugefügt werden, der auf deiner Website vorhanden ist.

SCHRITT 5: Öffne den Container, den du verwenden möchtest. Zuerst musst du einen neuen Trigger erstellen. Wähle im linken Menü Trigger und dann Neu.

Gib deinem Trigger einen Namen, wir schlagen der Einfachheit halber "discover.loaded" vor.

Klicke in das Feld "Wähle einen Triggertyp, um mit der Einrichtung zu beginnen...", scrolle dann nach unten und klicke auf den Triggertyp Benutzerdefiniertes Ereignis.

Gib den Namen des Ereignisses ein. Dieser muss genau "discover.loaded" lauten, da er mit dem "Emitted event name" in den Dealfront JavaScript Object Connector Einstellungen übereinstimmen muss. Klicke auf Speichern.

SCHRITT 6: Jetzt, wo du deinen Trigger erstellt hast, müssen wir das Tag erstellen. Wähle im linken Menü Tags und dann Neu.

Gib deinem Tag einen Namen, z.B. "Dealfront - Add Company Info to Contact Form", um es einfacher zu machen.

Klicke in das Feld "Wähle einen Tag-Typ, um mit der Einrichtung zu beginnen...", scrolle dann nach unten und klicke auf den Trigger-Typ Custom HTML.

Füge das Skript ein, das angibt, wo die firmenbezogenen Daten erscheinen sollen. Du brauchst die erweiterten Einstellungen nicht zu berühren.

Das Skript, das wir verwendet haben, findest du unten. Hier gibt es zwei Beispiele für Felder:

  1. Das erste sucht nach einem Textfeld im Formular mit der ID wpforms-294-field_3. Wenn dieses Feld gefunden wird und ein Statuscode von 200 vorliegt, der anzeigt, dass der Besuch von einer identifizierten IP-Adresse kommt, werden die Daten zurückgegeben, die wir in diesem Feld angegeben haben. In diesem Fall ist das der Name der Firma.

  2. Das zweite Feld sucht nach der Feld-ID von wpforms-294-field_4, um die Branche der Firma zu ermitteln.

<script>

textarea = document.querySelector("#wpforms-294-field_3")

if (textarea && discover && discover.meta.status === 200) {

textarea.value = discover.data.company.name

};

textarea = document.querySelector("#wpforms-294-field_4")

if (textarea && discover && discover.meta.status === 200) {

textarea.value = discover.data.company.industries.name

</script>

Scrolle nun nach unten, um den soeben erstellten Trigger "discover.loaded" anzuwenden, damit dieser Tag ausgelöst wird.

Du siehst das benutzerdefinierte Ereignis für "discover.loaded" in der Liste. Klicke darauf, um es anzuwenden und dann auf Speichern.

SCHRITT 7: Zu guter Letzt musst du deinen Container absenden und veröffentlichen, damit der neue Tag und der Auslöser auf deiner Website live geschaltet werden.

In der Übersicht deines Arbeitsbereichs unter Tags siehst du dein neues Tag mit dem dazugehörigen Auslöser. Klicke auf Absenden.

Du gelangst dann zu einem Bildschirm, auf dem du deine Änderungen veröffentlichen kannst. Klicke auf Veröffentlichen.

Der Google Tag Manager fordert dich dann auf, eine Beschreibung der Änderungen hinzuzufügen, die du gerade vorgenommen hast. Dies ist eine Routineaufgabe und völlig freiwillig. Wähle aus, ob du sie überspringen oder einige Details eingeben und fortfahren möchtest.

Herzlichen Glückwunsch! Deine Änderungen sollten jetzt live sein!

Bitte beachte: Wenn du keine Veröffentlichungsrechte im Google Tag Manager hast, musst du dich bei deinem GTM-Administrator anmelden, damit die Änderungen aktiviert werden können.

SCHRITT 8: Um zu testen, besuche die Seite, auf der du die Personalisierung sehen willst. Vergewissere dich, dass du entweder unsere Testparameter verwendest oder die Seite von einer IP-Adresse deiner Firma aus besuchst. Du solltest nun sehen, dass die von dir eingestellten Felder automatisch mit den Daten deiner Firma ausgefüllt werden.

Dies ist nur ein einfaches Beispiel, um dir den Einstieg zu erleichtern. Mit dem gleichen Verfahren kannst du viele verschiedene Personalisierungen erstellen. Der Fantasie sind keine Grenzen gesetzt!

Bitte beachte: Die Daten, die du vom JS Object Connector erhältst, können sich gelegentlich von den Daten in deiner Dealfront-Webanwendung unterscheiden, da sie aus unterschiedlichen Datenbanken stammen. Wir empfehlen daher nicht, diese beiden Daten zu vergleichen.

Testparameter

Wir haben einige Testparameter bereitgestellt, die du in den folgenden Branchen verwenden kannst. Füge den Parameter einfach an das Ende deiner Website-URL an, damit es so aussieht, als käme der Besuch aus einer bestimmten Branche:

Für die Branche Internet verwenden: ?_lf_discover_demo=amazon

Für die Branche Bankwesen verwenden: ?_lf_discover_demo=goldmansachs

Für die Branche Versicherung verwenden: ?_lf_discover_demo=lemonade

Bitte teste dies in einem Inkognito-Fenster, da deine Website möglicherweise zwischengespeichert wird und einen 404-Fehler anzeigt.

Bitte beachte: Wir empfehlen Google Optimise nicht mehr, da Google dieses Tool eingestellt hat (Sunset) und es nicht mehr pflegt.

--

Fragen, Kommentare, Feedback? Lass es uns gerne wissen, indem du unseren Support via Chat oder E-Mail an support@dealfront.com kontaktierst.

VERWANDTE ARTIKEL:

Hat dies Ihre Frage beantwortet?