Wie können Webformulare mit snapADDY DataQuality integriert werden?

Web2Lead ist das neue Kundengewinnungstool von snapADDY.

Damit werden die Besucher eines Kontaktformulars (z.B. auf der Homepage Ihres Unternehmens) automatisch zu einer Kontaktliste in snapADDY DataQuality hinzugefügt. Einmal in DataQuality gelandet, können die Leads mit Kontaktinformationen und Firmendaten angereichert und schließlich in Ihr CRM-System exportiert werden.

Vorgehensweise

1. Ziel der Datenannahme anlegen

Zunächst benötigen Sie einen Endpunkt, an den Ihr Kontaktformular am Ende die eingegeben Informationen übermitteln kann.

Öffnen Sie, als Administrator im snapADDY Dashboard, zunächst Ihr Profil, und klicken dann unter “Organisation” auf den Menüpunkt “Kontaktformulare”.

Unter “Formular hinzufügen” können Sie dann eine Maske zur Anlage des notwendigen Datenannahme-Endpunkts öffnen.

Einstellung des Endpunkts:

• Vergeben Sie einen aussagekräftigen Namen für den Endpunkt, um dessen Zweck später auch später noch nachvollziehen zu können

• In das Kommentarfeld können optional noch zusätzliche Informationen eingetragen werden

• Ordnen Sie eine geteilte Liste zu, in deren die Kontaktinformationen gespeichert werden sollen

• Stellen Sie sicher, dass der entsprechende Endpunkt aktiviert ist - nur aktive Endpunkte schreiben Kontaktdaten in die geteilte Liste der zugeordneten Benutzer! Inaktive Formulare nehmen keine Daten entgegen, und beantworten entsprechende Übermittlungsversuche

• Legen Sie das Kontaktformular durch Klicken des “Formular erstellen”-Knopfes an

Daraufhin aktualisiert sich ihre Ansicht, und zwei zusätzliche Formularfelder erscheinen.

2. Adresse der Datenannahme kopieren

In der aktualisierten Ansicht finden Sie im “Ziel-URL”-Feld die Internet-Adresse jenes Endpunkts, an den Ihr Formular die eigenen Daten per POST-Request übermitteln muss. Diese kopieren Sie bitte, um sie in den HTML-Quelltext Ihres Formulars zu übernehmen.

3. Optional: Formularvorlage kopieren und anpassen

Sofern Sie noch keinen HTML-Quelltext für ein Formular haben, so können Sie sich aus dem “HTML Code”-Feld eine Vorlage kopieren:

• Klicken Sie auf den “Kopieren”-Knopf am Ende der Zeile

• Öffnen Sie einen Text-Editor

• Fügen Sie die kopierte Vorlage ein

• Speichern Sie die Datei als z.B. “contact-form-template.html”

• Öffnen Sie die gespeicherte Datei in ihrem Browser

In der daraufhin dargestellten Seite sehen Sie die Rohfassung eines HTML-Formulars mit Standardfeldern. Die sichtbaren Eingabefelder können Sie direkt verändern und per “Send”-Button testweise an den ausgewählten Endpunkt übermitteln. Daraufhin öffnet sich in einem neuen Fenster das Ergebnis der Datenübermittlung. Hier können Sie in einer JSON-Darstellung entweder die Details des erstellten Kontakts sehen, oder die eine Fehler-Darstellung, beispielsweise, weil der Endpunkt nicht auf “aktiv” gestellt ist, oder z.B. keine empfangende Benutzer-Liste zugeordnet wurde.

Im HTML-Quelltext der “contact-form-template.html” finden Sie, in einem auskommentierten Quelltext-Block eine beispielhafte Erfassung von Zusatzdaten. Sofern Sie, neben den Standardfeldern noch weitere, eigene Informationen erfragen und speichern möchten, so folgen Sie den im Kommentarblock beschriebenen Anweisungen, sowie nachfolgender Sektion.

In einem neuen Fenster öffnet sich nun das Ergebnis der Datenübermittlung. Hier können Sie in einer JSON-Darstellung entweder die Details des erstellten Kontakts sehen, oder die eine Fehler-Darstellung, beispielsweise, weil der Endpunkt nicht auf “aktiv” gestellt ist, oder z.B. keine empfangende Benutzer-Liste zugeordnet wurde.

4. Optional: Eigene Datentypen anlegen (customFields)

Sofern Ihnen die Standard-Informationsbausteine nicht ausreichen, finden Sie unter “Weiterführenden Verweise” Hilfestellung, um eigene Auswahllisten, Datumsangaben, Freitextangaben und ähnliches zu erfassen.

Weitere Felder, so genannte "customFields" müssen sich dem Mapping Ihrer Organisation wiederfinden. Wenn bei Ihnen das Standard-Mapping hinterlegt ist, also kein individuelles Mapping bei snapADDY beauftragt wurde, können Sie nur mit den Standardfeldern des Webfomulars arbeiten (siehe 3.).

Die Mapping-Einstellung für Ihre Organisation, und damit Ihre customFields, können Sie in den Firmeneinstellungen nachvollziehen, oder fragen Sie einfach Ihren zuständigen snapADDY Ansprechpartner.

Im Zusammenspiel mit den customFields sind ein paar Grundlagen elementar wichtig zu verstehen.

4.a Benennung von customFields und Formular-Elementen

Verwenden Sie stets die id eines customFields als name-Attribut des betreffenden Formular-Elements. Sehen Sie nachfolgend ein Beispiel, wie customFields im Mapping erscheinen:

{ "customFields": [ 
   { 
      "id": "c_description", 
      "label": { 
         "DE": "Beschreibung", 
         "GB": "Description", 
      }, 
      "properties": { 
         "defaultValue": "" 
      }, 
      "type": "INPUT" 
   } 
 ] 
}

In Ihrem HTML Formular müssen Sie die customFields dann wie folgt übersetzen:

<input name="c_description" type="text" id="Beschreibung">

Das name-Attribut ist entscheidend für die Zuordnung der zu speichernden Werte, während das id-Attribut beliebig nutzbar ist.

Kommunikationsdetails

Übermittlungsformate

Die Datenannahme auf Serverseite kann über zwei Formate erfolgen:

• als application/x-www-form-urlencoded, als Standardverhalten von HTML-Formularen ohne weitere enctype-Angabe, welche Daten in

firstName=Max&lastName=Mustermann&email=m.mustermann%40snapaddy.com&organization=snapADDY+GmbH&companySize=1-10

• als JSON-Daten im Body des Requests:

{ 
   "firstName": "Max", 
   "lastName": "Mustermann", 
   "email": "m.mustermann@snapaddy.com", 
   "organization": "snapADDY+GmbH", 
   "companySize": 
   "1-10" 
}

Details zu möglichen Serverantworten, auf die von Formularen übermittelte Kontaktdaten, finden Sie unten, im Verweis auf die Swagger-API, über welche Sie die betreffenden Requests auch direkt ausprobieren können.

Gültigkeitsprüfungen

Um Ihnen fehlerhafte Kontaktinformationen in DataQuality zu ersparen, überprüfen wir

• dass nicht-leere, übermittelte E-Mail-Adressen theoretisch gültig sind

• dass übermittelte Datumsangaben gültig sind, also z.B. nicht auf den 35. Februar 2020 lauten

• dass übermittelte customFields-Werte auch gemäß ihren Vorgaben gültig sind, also z.B. dass für Auswahlmöglichkeiten nichts übermittelt wird, was Sie gar nicht zur Auswahl gestellt haben

Datumsformat

Um Datumsangaben entgegen zu nehmen, gilt es zunächst zu entscheiden, ob...

1. es Ihnen ausreicht, ein simples Datum zu übermitteln: dies kann in Form gängiger <input type='date' ...>- bzw. <input type='datetime-local' ...>-Elemente erfolgen, funktioniert allerdings nur für die Verwendung innerhalb der Zeitzonen UTC-11 bis UTC+11. Diese Übermittlungsformen übernehmen jedoch keine übermittelten Uhrzeiten. Letztere werden stets als “um 12:00 Uhr am Mittag, in der Zeitzone UTC+0” übernommen

2. oder ob Sie ein vollständiges, und zeitzonengestütztes Datum samt Uhrzeit benötigen, wofür Ihr Formular jeodch einen ISO 8601 Zeitstempel in UTC mit Offset 0 übermitteln muss