Ländercode für Telefonnummer im Real-time Marketing Formular dynamisch ändern

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).

Form realtime marketing

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.

HTML for phone and country code

Anschließend ergänze ich das Javascript. Wenn du mehr Länder hast, musst du diese in der Variable countryPhonePrefixes noch hinzufügen.

				
					<safe-script style="display: none;">
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');
        }
    });
});

    </safe-script>
				
			

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

Denkst du, dass dieser Beitrag auch anderen helfen kann? Teile ihn auf LinkedIn:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress Cookie Hinweis von Real Cookie Banner