So ganz kommt man um Javascript im Realtime Marketing Formular in Customer Insights nicht rum. Und ich habe bereits ein paar Artikel mit Beispielen geschrieben, aber trotzdem suche ich jedes Mal aufs Neue nach den passenden Skripten. Das kostet Zeit und Nerven. Daher stelle ich hier eine Bibliothek mit Skripten und Anwendungsbeispielen für Marketingformulare zusammen, in der Hoffnung, dass sie uns allen den Alltag etwas erleichtert.
Falls du weitere Ideen oder Anwendungsfälle hast, die wir ergänzen können, melde dich gerne bei mir 🙂
Ich hab alle Skripte in ein Repository hinzugefügt: Github Link
Inhalt
Unterschied Realtime Marketing Formular und Preference Center
Javascript für das Preference Center und das Realtime Marketing Formular in Customer Insights werden unterschiedlich getriggert. Was in Preference Centern funktioniert, funktioniert nicht unbedingt in Marketing Formularen!
Damit das Javascript im Preference Center funktioniert, sieht du unten im Code zwei Möglichkeiten, wie du die Funktion einleiten kannst.
ODER
Für Realtime Marketing Formulare können wir die Javascript so nutzen, wie sie in der Dokumentation von Microsoft beschrieben sind: Dokumentation
Je nachdem wann das Javascript laufe soll, kann man verschiedene EventListener verwenden:
- d365mkt-beforeformload
- d365mkt-afterformload
- d365mkt-formrender
- d365mkt-formsubmit
- d365mkt-afterformsubmit
Wo gehört das Javascript hin?
Ab der Version 1.1.38813.80 oder neuer kannst du den JavaScript-Code in den <body>-Abschnitt des HTML einfügen. Wenn du das Javascript in den <head>-Abschnitt einfügen, wird es automatisch an den Anfang des <body>-Abschnitts verschoben.
Das Formular HTML hat also folgenden Aufbau:
***meta tags***
Alle Checkboxen auswählen
Über die Funktion Alle Auswählen habe ich bereits einen Blogartikel geschrieben. Der Vollständigkeit ergänze ich dieses Javascript hier auch.
Zuerst baue ich mit HTML eine Select All Checkbox. Diese muss ja kein „echtes“ Feld vom Kontakt sein. Wenn die Checkbox angehakt wird, sollen die beiden Purpose-Felder angehakt werden.
Ein Feld ein- und ausblenden
Als einer meiner ersten Artikel hatte ich ein Beispiel wie man ein Feld ein und ausblendet. Standardmäßig wird das Feld versteckt und nur eingeblendet, wenn eine Checkbox angehakt wird.
In diesem Javascript definiere ich die Variable customer, die ich über den Namen meines Custom Ja/Nein-Felds finden kann. Und wenn das Feld angehakt ist, sucht das Skript nach dem Kundennummer-Feld, ebenfalls über den technischen Namen. Ich könnte stattdessen auch vor der Funktion eine Variable für das Kundennummer definieren. Das zeige ich in dem nächsten Skript.
Mehrere Felder (Topics) ein- und ausblenden
In diesem Beispiel möchte ich die Topics nur anzeigen, wenn der zugehörige Purpose angehakt wurde. Ich habe mehrere Purposes mit jeweils mehreren Topics.
In diesem Javascript definiere ich zuerst die Variablen für die Purpose und Topic Checkboxen. Das macht die Funktion anschließend übersichtlicher. Immer wenn eins der Purpose Checkboxen angehakt wird, läuft eine forEach Schleife, die die Topics, des jeweilien Purposes anzeigt oder versteckt.
Button aktivieren / deaktivieren (ausgrauen)
Anstelle von Pflichtfeldern, die verhindern, dass man ein Formular abschicken kann, kann man auch den Submit-Button ausgrauen, bis alle erforderlichen Felder ausgefüllt sind.
Dafür musst du zuerst dem Button eine passende id geben und standardmäßig ausgrauen bzw. deakvieren. Im Javascript können dann die Bedingungen eingefügt werden, die den Button wieder aktivieren.
Felder aktivieren / deaktivieren (ausgrauen)
Das folgende Javascript definiert, wie man ein Feld bei bestimmten Bedingung ausgraut oder wieder beschreibbar macht. In meinem Beispiel darf man nur eine der Purpose-Checkboxen anhaken.
Option Set im Javascript
Häufiger als Lookups kommen Option Sets im Marketing Formular vor. Dieses Javascript blendet Felder ein, wenn ein bestimmter Wert im Option Set ausgewählt wird.
P.S. Danke an Jean-Paul und seinen Kollegen Rob für den Anstoß und das Grundgerüst für das Javascript:)
Option Set Wert im Javascript ausfüllen
Anstelle auf die Änderung eines Option Sets zu reagieren und Felder ein- und auszublenden, kann es auch notwendig sein einen Option Set werden automatisch auszufüllen. In meinem Beispiel möchte ich die Priorätit des Kontakts automatisch auf Basis seines Feedbacks ändern. Wenn das Feedback negativ ist, soll die Priorität hoch sein, wohingegen positiv Feedback keine schnelle Handlung erfordert.
Redirect nach Formularübermitlung
Dieses Skript benötigen wir momentan nur für Preference Center. Im Marketing Formular gibt es zum Glück ein Feld, in dem man einfach die URL eintragen kann. Megan Walker hat einen besseren und ausführlicheren Artikel zu Redirect geschrieben. Den findet ihr hier.
Wichtig ist vorallem die Zeit, wann jemand weitergeleitet wird. In meinem Code sind es 1000 Millisekunden. Mir ist aber aufgefallen, dass z.B. Iphone oder Safari eine längere Wartezeit braucht, damit auch das Formular richtig übermittelt wird. Also am besten gut testen!
Redirect nach Formularübermitlung
Dieses Skript benötigen wir momentan nur für Preference Center. Im Marketing Formular gibt es zum Glück ein Feld, in dem man einfach die URL eintragen kann. Megan Walker hat einen besseren und ausführlicheren Artikel zu Redirect geschrieben. Den findet ihr hier.
Wichtig ist vorallem die Zeit, wann jemand weitergeleitet wird. In meinem Code sind es 1000 Millisekunden. Mir ist aber aufgefallen, dass z.B. Iphone oder Safari eine längere Wartezeit braucht, damit auch das Formular richtig übermittelt wird. Also am besten gut testen!
Ländervorwahl für Telefonnummern dynamisch ändern
Die Standardfunktionalität für die Landesvorwahl vereinfacht die Eingabe der Rufnummer. Aber: Der Wert der Landesvorwahl ist statisch. Jedes Land hat aber eine eigene Landesvorwahl. Und gerade für internationale Kunden muss es möglich sein, dass sich die Werte je nach Land des Kunden ändern.
Dieses Javascript ändert den Ländercode – je nachdem, welches Land der Kunde auswählt. Das Länderfeld in meinem Beispiel ist ein Optionssatz.
Im HTML des Feldes „Business Phones“ können Sie sehen, dass es zwei Attribute gibt, die den Ländercode enthalten. Wenn ich nur die Klasse phoneCountryCodeLabel über das Javascript ändere, habe ich das Problem, dass der erstellte oder aktualisierte Kontaktdatensatz immer noch +49 im Telefonfeld enthält. Wenn ich also nur das Label ändere, ist das nur eine Änderung im Frontend, es sieht zwar korrekt aus, aber der Wert wird nicht korrekt übertragen. Aus diesem Grund muss das Javascript auch den data-countrycode auf Basis des Landes anpassen.
Abhängigkeiten von 3 Option Sets
In einem vorherigen Kapitel haben wir gesehen, wie man verschiedene Werte auf der Grundlage eines Optionssatzes anzeigen kann. Hier ist das Ganze etwas komplexer. Wir haben drei Optionssätze. Und deren Werte sind voneinander abhängig. Wenn also in Optionssatz 1 ein Wert ausgewählt wird, müssen wir die Werte in Optionssatz 2 filtern. Und je nach gewählten Wert in Optionssatz 2 filtern wir die Werte in Optionssatz 3.
Im Javascript müssen wir die Abhängigkeiten angeben und wie die Werte der Optionssätze miteinander verbunden sind. Das Skript enthält auch die Funktion zum Zurücksetzen der Werte im Optionssatz, wenn z. B. Optionssatz 1 geändert wird.
***Hinweis: Der Inhalt ist zum Zeitpunkt der Erstellung korrekt. Microsoft mag in der Zwischenzeit Änderungen vorgenommen haben.***
Schau dir auch die FAQs in meinem Blog an: Kurze Fragen – schnelle Antworten! Zu den FAQs