Mit dem neuesten Update (1.1.43992.110) in Customer Insights Journeys wurde eine feine Verbesserung für Real-time Marketingformulare eingeführt: Ländercode für Telefonnummern.
Damit können wir die Eingabe der Telefonnummer vereinfachen. Es muss einfach der richtige Ländercode im Formular hinterlegt werden. Und sobald der Code voreingestellt ist, schlagen Formularübermittlungen nicht mehr fehl, wenn ein falsches Telefonnummernformat eingegeben wurde.
Aber: Der Ländercode-Wert ist statisch.
Jedes Land hat aber einen eigenen Ländercode. Und gerade für internationale Kunden muss es die Möglichkeit geben, dass sich die Werte je nach Land des Kundens anpassen.
Da ich gerade im Javascript-Mood bin, habe ich ein weiteres ergänzt, dass den Ländercode ändert – je nach Land, das der Kunde auswählt. Das Land-Feld ist in meinem Beispiel ein Option Set.
Real-time Marketingformular mit Telefonnummer und Ländercode erstellen
Ich setze das Business Phone Feld auf das Real-time Marketingformular in Customer Insights Journeys und ergänze in den Einstellungen nun den Ländercode. Hier kann man schon sehen, dass ich eben nur einen Wert festeintragen kann.
Auf das Formular setzte ich außerdem ein Option Set mit meinen Ländern (Hinweis: Das ist keine vollständige Liste. Knapp 300 Länder einzutragen, war mir nur ein bisschen zu aufwändig für das Beispiel).
Javascript für Real-time Marketingformular erstellen
Im HTML des Business Phones Feldes kann man sehen, dass es zwei Attribute gibt, in denen der Ländercode zu finden ist. Wenn ich nur die class phoneCountryCodeLabel über das Javascript ändere, stoße ich auf das Problem, dass der Kontaktdatensatz, der erstellt wird, trotzdem +49 im Telefonfeld enthält. Nur das Label zu ändern, ist also nur eine Änderung im Frontend, es sieht zwar richtig aus, aber es wird nicht richtig übertragen.
Deswegen muss das Javascript auch den data-countrycode anhand des Landes anpassen.
Anschließend ergänze ich das Javascript. Wenn du mehr Länder hast, musst du diese in der Variable countryPhonePrefixes noch hinzufügen.
document.addEventListener("d365mkt-afterformload", function() {
const countrySelect = document.getElementById('pk_countrycode-1719506023770');
const phonePrefixSpan = document.querySelector('.phoneCountryCodeLabel');
const phoneInputDiv = document.querySelector('.phoneFormFieldBlock');
const countryPhonePrefixes = {
'125550000': '+376', // Andorra
'125550001': '+32', // Belgium
'125550002': '+358', // Finland
'125550005': '+33', // France
'125550003': '+49', // Germany
'125550008': '+39', // Italy
'125550010': '+47', // Norway
'125550007': '+351', // Portugal
'125550006': '+34', // Spain
'125550009': '+46', // Sweden
'125550004': '+44' // UK
};
countrySelect.addEventListener('change', function () {
const selectedValue = countrySelect.value;
if (countryPhonePrefixes.hasOwnProperty(selectedValue)) {
const newPrefix = countryPhonePrefixes[selectedValue];
phonePrefixSpan.textContent = newPrefix;
phoneInputDiv.setAttribute('data-countrycode', newPrefix);
} else {
phonePrefixSpan.textContent = ''; // Default to empty if no match found
phoneInputDiv.removeAttribute('data-countrycode');
}
});
});
Zusammenfassung
Die neue Ländercode-Funktion in Customer Insights Journeys ist eine sehr schöne Ergänzung, ich find sie super. Und sie sieht sogar schon im Standard im Real-time Marketingformular schön aus.
Mit dem Javascript können wir nun auch den Ländercode dynamisch anpassen. Ich hab es mit einem Länder Option Set gemacht, alternativ ist es natürlich auch mit einem Lookup für Länder möglich.
Wenn du noch mehr Javascript für deine Real-time Marketing Formulare brauchst, schau in der Bibliothek vorher: Hier klicken.
***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