· Pauline · How-to · 11 min read
JavaScript-Bibliothek für Real-time-Marketing-Formulare in Customer Insights
An JavaScript kommst du in Real-time-Marketing-Formularen in Customer Insights kaum vorbei. Ich stelle eine Bibliothek mit Skripten und Use Cases für Marketingformulare zusammen – in der Hoffnung, dass sie unseren Alltag ein bisschen einfacher macht.
Bitte beachten: Der Inhalt ist zum Zeitpunkt der Erstellung korrekt. Es ist möglich, dass Microsoft in der Zwischenzeit Änderungen vorgenommen hat.
An JavaScript kommst du in Real-time-Marketing-Formularen in Customer Insights kaum vorbei. Und ich habe zwar schon ein paar Artikel mit Beispielen geschrieben, aber ich muss trotzdem jedes Mal wieder nach den richtigen Skripten suchen. Das kostet Zeit und Nerven. Genau deshalb stelle ich eine Bibliothek mit Skripten und Use Cases für Marketingformulare zusammen – in der Hoffnung, dass sie unseren Alltag ein bisschen einfacher macht.
Wenn du noch weitere Ideen oder Use Cases hast, die wir ergänzen können, melde dich gern bei mir :)
Ich habe alle Skripte zusätzlich in ein Repository gepackt – feel free to contribute: Github Link
Unterschied zwischen Marketingformular und Preference Center
Das Preference Center und das Real-time-Marketing-Formular in Customer Insights triggern JavaScript unterschiedlich. Was in Preference Centern funktioniert, funktioniert nicht automatisch auch in Marketingformularen!
Damit JavaScript im Preference Center funktioniert, siehst du im folgenden Code zwei Möglichkeiten, wie du die Funktion starten kannst.
<script style="display: none;">
document.addEventListener('DOMContentLoaded', function() {
***add script here***});
</safe-script>
OR
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
***add script here***
});
</script>
Für Real-time-Marketing-Formulare können wir JavaScript so verwenden, wie es in der Microsoft-Dokumentation beschrieben ist: Documentation
Je nachdem, wann das JavaScript laufen soll, kannst du verschiedene EventListener verwenden:
- d365mkt-beforeformload
- d365mkt-afterformload
- d365mkt-formrender
- d365mkt-formsubmit
- d365mkt-afterformsubmit
<script style="display: none;">
document.addEventListener('d365mkt-afterformload', function () { ***add script here***});
</script>Wo gehört das JavaScript hin?
Ab Version 1.1.38813.80 oder neuer kannst du den JavaScript-Code in den <body>-Bereich des HTML einfügen. Wenn du JavaScript in den <head>-Bereich einfügst, wird es automatisch an den Anfang des <body> verschoben.
Das HTML-Formular hat daher folgende Struktur:
<html>
<head>
***meta tags***
<style>
***css styles***
</style>
</head>
<body>
<form>
</form>
</body>
</html>Alle Checkboxen auswählen
Ich habe bereits einen Blogartikel über die „Select all“-Funktion geschrieben. Damit diese Bibliothek vollständig ist, füge ich das JavaScript hier ebenfalls hinzu.
Zuerst baue ich mit HTML eine Select All-Checkbox. Das muss kein „echtes“ Feld vom Kontakt sein. Wenn du die Select All-Checkbox aktivierst, werden auch die beiden Purpose-Felder angehakt.
https://paulinekolde.info/wp-content/uploads/2024/06/SelectAll.mp4
<div class="styled-checkbox">
<div>
<label class="lp-ellipsis container" id="label_selectall" style="font-weight: bold;display: inline- block;padding-top: 0px;padding-right: 0px;padding-bottom: 0px; padding-left: 0px; font-size: 16px;">
Select all:
<input name="selectall" id="selectall" value="1" type="checkbox" style="top: 5px; left: 0px; height: 20px; width: 20px; background-color: rgb(255, 255, 255); border-width: 0.5px; border-style: solid; border-color: rgb(186, 186, 188);">
<span class="checkmark" id="span_selectall"></span>
</label>
</div>
</div>
```xml
<script>
document.addEventListener('d365mkt-afterformload', function () {
const selectAllCheckbox = document.getElementById("selectall");
const consentCheckboxes = document.querySelectorAll('[id^="consent"]');
var l = consentCheckboxes.length;
debugger;
selectAllCheckbox.addEventListener('change', selectAll);
function selectAll() {
if (selectAllCheckbox.checked === true) {
for (var i = 0; i < l; i++) {
consentCheckboxes[i].checked = true;
}
} else {
for (var i = 0; i < l; i++) {
consentCheckboxes[i].checked = false;
}}}
});
</script>Ein Feld anzeigen und ausblenden
Als eines meiner ersten Beispiele hatte ich auch gezeigt, wie du ein Feld ein- und ausblenden kannst. Standardmäßig ist das Feld ausgeblendet und wird erst angezeigt, wenn eine Checkbox aktiviert ist.
In diesem JavaScript definiere ich die Variable customer, die ich über den technischen Namen meines benutzerdefinierten Ja/Nein-Feldes finde. Wenn das Feld angehakt ist, sucht das Skript nach dem Feld customer number – ebenfalls über den technischen Namen.
https://paulinekolde.info/wp-content/uploads/2024/06/ShowHideField.mp4
<script style="display: none;">
document.addEventListener('d365mkt-afterformload', function () {
let customer = document.querySelector('input[name="pk_existingcustomer"]');
document.querySelector('input[name="pk_customernumber"]').style.display = 'none';
customer.addEventListener('change', showCustomerNumber);
function showCustomerNumber() {
if (customer.checked === true) {
document.querySelector('input[name="pk_customernumber"]').style.display = 'block';
}
else {
document.querySelector('input[name="pk_customernumber"]').style.display = 'none';
}
}});
</script>Mehrere Felder anzeigen und ausblenden (Topics)
In diesem Beispiel möchte ich Topics nur dann anzeigen, wenn der Nutzer den entsprechenden Purpose auswählt. Ich habe mehrere Purposes – und zu jedem Purpose mehrere Topics.
In diesem JavaScript definiere ich zuerst die Variablen für die Purpose- und Topic-Checkboxen. Dadurch ist die Funktion danach übersichtlicher. Sobald eine der Purpose-Checkboxen aktiviert wird, läuft eine forEach-Schleife, die die Topics des jeweiligen Purpose ein- oder ausblendet.
https://paulinekolde.info/wp-content/uploads/2024/06/ShowHideToggles.mp4
<script style="display: none;">
document.addEventListener('d365mkt-afterformload', function () {
const purpose1 = document.getElementById('consentCheckbox-1718980818012');
const purpose2 = document.getElementById('consentCheckbox-1718980833715');
const topicCheckboxes1 = document.querySelectorAll('.topicCheckbox1');
const topicCheckboxes2 = document.querySelectorAll('.topicCheckbox2');
// Function to handle the display of topic checkboxes based on purpose1's state
function handleTopicCheckboxes1() {
topicCheckboxes1.forEach(function (checkbox) {
checkbox.style.display = purpose1.checked ? 'block' : 'none';
});
}
// Function to handle the display of topic checkboxes based on purpose2's state
function handleTopicCheckboxes2() {
topicCheckboxes2.forEach(function (checkbox) {
checkbox.style.display = purpose2.checked ? 'block' : 'none';
});
}
// Attach event listeners
purpose1.addEventListener('change', function(event) {
handleTopicCheckboxes1();
});
purpose2.addEventListener('change', function(event) {
handleTopicCheckboxes2();
});
// Initial hiding of all topic checkboxes
handleTopicCheckboxes1();
handleTopicCheckboxes2();
});
</script>Button aktivieren / deaktivieren (ausgrauen)
Statt Pflichtfeldern, die das Absenden eines Formulars verhindern, kannst du auch den Submit-Button ausgrauen, bis der Nutzer alle erforderlichen Felder ausgefüllt hat.
Dafür musst du dem Button zuerst eine passende ID geben und ihn standardmäßig ausgrauen bzw. deaktivieren. Das JavaScript enthält dann die Bedingungen, unter denen der Button wieder aktiviert wird.
https://paulinekolde.info/wp-content/uploads/2024/06/EnableDisableButton.mp4
<script style="display: none;">
document.addEventListener('d365mkt-afterformload', function () {
const purpose1 = document.getElementById('consentCheckbox-1718980818012');
const submit = document.getElementById("submitButton");
purpose1.addEventListener('change', enableButton);
function enableButton() {
if (purpose1.checked === true) {
submit.disabled = false;
submit.style.backgroundColor = 'green';
}
else {
submit.disabled = true;
submit.style.backgroundColor = 'red';
}}});
</script>Felder aktivieren / deaktivieren (ausgrauen)
Das folgende JavaScript zeigt, wie du ein Feld unter bestimmten Bedingungen ausgrauen (deaktivieren) oder wieder beschreibbar machen kannst. In meinem Beispiel darf nur eine der Purpose-Checkboxen ausgewählt werden.
https://paulinekolde.info/wp-content/uploads/2024/06/EnableDisableCheckbox.mp4
<script style="display: none;">
document.addEventListener('d365mkt-afterformload', function() {
const purpose1 = document.getElementById('consentCheckbox-1718980818012');
const purpose2 = document.getElementById('consentCheckbox-1718980833715');
purpose1.addEventListener('change', handleCheckboxChange);
purpose2.addEventListener('change', handleCheckboxChange);
function handleCheckboxChange(event) {
if (purpose1.checked) {
purpose2.disabled = true;
} else {
purpose2.disabled = false;}
if (purpose2.checked) {
purpose1.disabled = true;
} else {
purpose1.disabled = false;}
}
});</script>Option Set in JavaScript
Option Sets kommen im Marketingformular häufiger vor als Lookups. Dieses JavaScript zeigt Felder an, wenn der Nutzer in einem Option Set einen bestimmten Wert auswählt.
P.S. Danke an Jean-Paul und seinen Kollegen Rob für den Impuls und das Grundgerüst für das Skript :)
https://paulinekolde.info/wp-content/uploads/2024/06/OptionSetShowHide.mp4
<script style="display: none;">
document.addEventListener("d365mkt-afterformload", function() {
var feedbackRating = document.querySelector('[data-targetproperty="pk_feedbackrating"] select');
var feedbackReason = document.querySelector('[data-targetproperty="pk_feedbackreason"]');
feedbackReason.style.display = 'none';
//function to hide or show the reason field
function toggleFeedbackReason(display) {
feedbackReason.style.display = display ? 'block' : 'none';
}
//Show reason field only when feedback is satisfied
feedbackRating.addEventListener('change', function() {
toggleFeedbackReason(this.value === '125550000');
})});
</script>Option-Set-Wert per JavaScript füllen
Statt nur auf Änderungen eines Option Sets zu reagieren und Felder ein- oder auszublenden, kann es auch nötig sein, ein Option Set automatisch zu befüllen. In meinem Beispiel möchte ich die Priorität des Kontakts automatisch anhand des Feedbacks ändern. Ist das Feedback negativ, soll die Priorität hoch sein, während positives Feedback keine schnelle Aktion erfordert.
https://paulinekolde.info/wp-content/uploads/2024/06/SetOptionSet.mp4
<script style="display: none;">
document.addEventListener("d365mkt-afterformload", function() {
// Get the feedback rating and priority select elements
var feedbackRatingSelect = document.getElementById("pk_feedbackrating-1719156066672");
var prioritySelect = document.getElementById("pk_priority-1719157920040");
// Function to update the priority based on the feedback rating
function updatePriority() {
var feedbackRating = feedbackRatingSelect.value;
if (feedbackRating === "125550000") { // Satisfied
prioritySelect.value = "0"; // Low
} else if (feedbackRating === "125550001") { // Neutral
prioritySelect.value = "1"; // Medium (Normal)
} else if (feedbackRating === "125550002") { // Dissatisfied
prioritySelect.value = "2"; // High
} else {
prioritySelect.value = ""; // Default
}
}
// Add event listener to feedback rating select element
feedbackRatingSelect.addEventListener("change", updatePriority);
});
</script>Weiterleitung nach dem Absenden des Formulars
Aktuell brauchen wir dieses Script nur für Preference Center. Praktischerweise gibt es im Marketingformular ein Feld, in das du einfach die URL eintragen kannst. Megan Walker hat einen besseren und detaillierteren Artikel zum Thema Redirect geschrieben. Du findest ihn hier.
Am wichtigsten ist das Timing, wann jemand weitergeleitet wird. In meinem Code sind es 1000 Millisekunden. Ich habe aber gemerkt, dass iPhone oder Safari zum Beispiel eine längere Wartezeit brauchen, damit das Formular korrekt abgeschickt wird. Deshalb: unbedingt gut testen!
<script style="display: none;">
document.addEventListener("DOMContentLoaded", function() {
var form = document.querySelector("form");
form.addEventListener("submit", function() {
// Replace the URL with your desired redirect URL
setTimeout(function() {
window.location.href = "https://paulinekolde.info";
}, 1000);
});
});
</script>Feld validieren und Fehlermeldung anzeigen
Dieses JavaScript prüft die Eingabe eines Feldes. Wenn sie nicht passt, wird eine Fehlermeldung angezeigt.
Natürlich gibt es auch die Custom Validation für Felder, die ähnlich funktioniert.
Bitte beachte: Das JavaScript zeigt nur an, dass ein Fehler vorliegt. Es verhindert nicht, dass der Nutzer das Formular trotzdem abschickt. Dafür solltest du am besten zusätzlich die Funktion nutzen, die den Submit-Button deaktiviert bzw. wieder aktiviert.
https://paulinekolde.info/wp-content/uploads/2024/06/ValidateErrorMessage.mp4
Add <div> somewhere to your HTML:
<div id="bonuscode-error" style="color: red; display: none;">Bonus Code must be exactly 5 digits long.</div>
<script style="display: none;">
document.getElementById('pk_bonuscode-1719160391752').addEventListener('input', function() {
const bonusCodeInput = document.getElementById('pk_bonuscode-1719160391752');
const errorDiv = document.getElementById('bonuscode-error');
const bonusCodeValue = bonusCodeInput.value;
// Remove any non-numeric characters
const numericBonusCodeValue = bonusCodeValue.replace(/\D/g, '');
// Update the input field value to only numeric characters
bonusCodeInput.value = numericBonusCodeValue;
// Check if the input is exactly 5 digits long
if (numericBonusCodeValue.length === 5) {
errorDiv.style.display = 'none';
} else {
errorDiv.style.display = 'block';
}
});
</script>Ländervorwahl für Telefonnummer dynamisch ändern
Die Standardfunktionalität für die Ländervorwahl macht die Eingabe der Telefonnummer einfacher. Aber: Der Wert der Ländervorwahl ist statisch. Dabei hat jedes Land seine eigene Vorwahl. Gerade bei internationalen Kunden muss es möglich sein, dass sich die Werte abhängig vom ausgewählten Land ändern.
Dieses JavaScript ändert die Ländervorwahl – abhängig davon, welches Land der Kunde auswählt. Das Länderfeld ist in meinem Beispiel ein Option Set.
Im HTML des Business-Phone-Feldes siehst du, dass es zwei Attribute gibt, die die Ländervorwahl enthalten. Wenn ich nur die Klasse phoneCountryCodeLabel per JavaScript ändere, habe ich das Problem, dass der erstellte oder aktualisierte Kontaktdatensatz im Telefonfeld weiterhin +49 enthält. Das reine Ändern des Labels ist also nur eine Frontend-Änderung: Es sieht korrekt aus, aber der Wert wird nicht korrekt übertragen. Deshalb muss das JavaScript auch data-countrycode passend zum Land anpassen.
https://paulinekolde.info/wp-content/uploads/2024/06/countrycode.mp4
<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');
}
});
});
</script>3 Option-Set-Abhängigkeiten
Im vorherigen Kapitel haben wir gesehen, wie du unterschiedliche Werte basierend auf einem Option Set anzeigen kannst. Jetzt wird es etwas komplexer: Wir haben drei Option Sets, und ihre Werte hängen voneinander ab. Das heißt: Wenn in Option Set 1 ein Wert ausgewählt wird, müssen wir die Werte in Option Set 2 filtern. Und abhängig vom ausgewählten Wert in Option Set 2 filtern wir die Werte in Option Set 3.
Im JavaScript musst du die Abhängigkeiten definieren und festlegen, wie die Option-Set-Werte miteinander zusammenhängen. Das Skript enthält außerdem die Funktion, die Werte in den Option Sets zurückzusetzen, wenn z. B. Option Set 1 geändert wird.
https://paulinekolde.info/wp-content/uploads/2024/06/3-option-sets.mp4
<script style="display: none;">
document.addEventListener("d365mkt-afterformload", function() {
//specify the 3 option sets
var country = document.querySelector('[data-targetproperty="pk_option1"] select');
var industry = document.querySelector('[data-targetproperty="pk_option2"] select');
var product = document.querySelector('[data-targetproperty="pk_option3"] select');
// Store the options for the first option plus their related second options
var industryOptions = {
'125550000': ['125550000', '125550001'], // Germany: Retail, Manufacturing
'125550001': ['125550002', '125550003'], // Belgium: Telecommunication, Books
'125550002': ['125550004', '125550005'] // Finland: Service, IT
};
var productOptions = {
//Store the relations between the second and the third options
'125550000': ['125550000', '125550001'], // Retail, Manufacturing: Product 1, Product 2
'125550001': ['125550000', '125550001'], // Retail, Manufacturing: Product 1, Product 2
'125550002': ['125550002', '125550003'], // Telecommunication, IT: Product 3, Product 4
'125550005': ['125550002', '125550003'], // Telecommunication, IT: Product 3, Product 4
'125550004': ['125550004', '125550005'], // Service, Books: Product 5, Product 6
'125550003': ['125550004', '125550005'] // Service, Books: Product 5, Product 6
};
// Function to update industry options (second option set) based on selected country (first option set)
function updateIndustryOptions(countryValue) {
var allowedIndustries = industryOptions[countryValue] || [];
Array.from(industry.options).forEach(option => {
option.style.display = allowedIndustries.includes(option.value) ? 'block' : 'none';
});
// Reset industry selection (option set 2)
industry.value = '';
}
// Function to update product options (third option set) based on selected industry (second option set)
function updateProductOptions(industryValue) {
var allowedProducts = productOptions[industryValue] || [];
Array.from(product.options).forEach(option => {
option.style.display = allowedProducts.includes(option.value) ? 'block' : 'none';
});
// Reset product selection (third option set)
product.value = '';
}
// Event listeners for changing country and industry (first and second option set)
country.addEventListener('change', function() {
updateIndustryOptions(this.value);
updateProductOptions(''); // Reset products on country change
});
industry.addEventListener('change', function() {
updateProductOptions(this.value);
});
});
</script>Hast du Fragen, Ideen oder Anmerkungen? Meld dich gern.
