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.
<script style="display: none;">
document.addEventListener('DOMContentLoaded', function() {
***add script here***});
</script>
ODER
<script data-minify="1" src="https://paulinekolde.info/wp-content/cache/min/1/jquery-1.9.1.min.js?ver=1732131574" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {
$( document ).ready(function() {
***add script here***
});
});</script>
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
<script style="display: none;">
document.addEventListener('d365mkt-afterformload', function () { ***add script here***});
</script>
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:
<html>
<head>
***meta tags***
<style>
***css styles***
</style>
</head>
<body>
<form>
<script>
***add your script here***
</script>
</form>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/paulinekolde.info\/wp-admin\/admin-ajax.php","nonce":"f1bf0cd9a6","url":"https:\/\/paulinekolde.info\/de\/javascript-bibliothek-fur-realtime-marketing-formular-in-customer-insights","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://paulinekolde.info/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
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.
<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>
<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 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.
<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 (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.
<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)
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.
<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 definiert, wie man ein Feld bei bestimmten Bedingung ausgraut oder wieder beschreibbar macht. In meinem Beispiel darf man nur eine der Purpose-Checkboxen anhaken.
<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 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:)
<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 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.
<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>
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!
<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>
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!
<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>
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.
<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>
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.
<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>
***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
