Розширити статистику клієнтів - маркетингові форми Journeys за допомогою коду
Нотатка
З 1 вересня 2023 року Dynamics 365 Marketing і Dynamics 365 Customer Insights будуть продаватися разом як один SKU продукту під назвою Dynamics 365 Customer Insights. Окремі програми буде перейменовано на Dynamics 365 Customer Insights – шляхи та Dynamics 365 Customer Insights – дані відповідно. Додаткову інформацію див. в статті Поширені запитання про Dynamics 365 Customer Insights
Крім того, з 1 вересня 2023 року роботу нові клієнти Dynamics 365 Marketing зможуть скористатися лише функціями для маркетингу в реальному часі. Додаткову інформацію див. в статті Стандартна процедура інсталяції маркетингу в реальному часі. У багатьох документах зараз описано вихідні функції, які можуть бути недоступні або працювати по-іншому для маркетингу в реальному часі. Документацію буде оновлено у вересні. Зокрема ми зазначимо, до якого типу маркетингу належить функція: маркетингу в реальному часі чи вихідного маркетингу.
У цій статті пояснюється, як розширити можливості розширеного настроювання за допомогою маркетингових форм Customer Insights – Journeys.
JavaScript API
Customer Insights - маркетингові форми Journeys складаються з двох частин:
- Покажчик місця заповнення форми, який виглядає приблизно так:
<div>
data-form-id='{msdynmkt_marketingformid}'
data-form-api-url='https://{server}.dynamics.com/api/v1.0/orgs/{organizationid}/landingpageforms/forms/{msdynmkt_marketingformid}'
data-cached-form-url='https://{server}.dynamics.com/{organizationid}/digitalassets/forms/{msdynmkt_marketingformid}'
</div>
- І завантажувач форми, який підсвічує заповнювачі форми після завантаження сторінки (
DOMContentLoaded
ініціюється подія):
<script src='https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js'></script>
Настроювані події
Настроювана подія | Опис |
---|---|
d365mkt-beforeformload |
Спрацьовує, коли покажчик місця заповнення форми розпізнається перед отриманням фактичного вмісту форми. |
d365mkt-formrender |
Запускається після отримання вмісту форми та безпосередньо перед його введенням у заповнювач форми. |
d365mkt-afterformload |
Спрацьовує після введення форми в заповнювач. |
d365mkt-formsubmit |
Спрацьовує, коли форма відправлена, підлягає скасуванню. |
d365mkt-afterformsubmit |
Активується після надсилання форми |
Форма submit - d365mkt-formsubmit detail object properties
Ім'я | Ввести | Опис |
---|---|---|
Корисні дані | Об'єкт | Словник з властивостями форми, що надсилається на сервер |
Після надсилання форми - d365mkt-afterformsubmit detail object properties
Ім'я | Ввести | Опис |
---|---|---|
Успіх | Boolean | Указує, чи прийняв сервер подання, чи його відхилено |
Корисні дані | Об'єкт | Словник із властивостями форми, як вони були відправлені на сервер |
Ви можете вкладати спеціальні події за допомогою стандартної механіки приєднання подій:
Зразок коду
<script>
document.addEventListener("d365mkt-beforeformload", function() { console.log("d365mkt-beforeformload") });
document.addEventListener("d365mkt-afterformload", function() { console.log("d365mkt-afterformload") });
document.addEventListener("d365mkt-formrender", function() { console.log("d365mkt-formrender") });
document.addEventListener("d365mkt-formsubmit", function(event) {
// example of validation using form submit event - cancelling form submission unless first name is John
if (document.forms[0]["firstname"].value !== "John") {
event.preventDefault();
console.log("blocked mkt-formsubmit");
return;
}
console.log("mkt-formsubmit" + JSON.stringify(event.detail.payload));
});
document.addEventListener("d365mkt-afterformsubmit", function(event) {
console.log("success - " + event.detail.successful);
console.log("payload - " + JSON.stringify(event.detail.payload));
});
</script>
Настроювання поведінки форми
Поведінку форми можна налаштувати, включивши сценарій конфігурації перед введенням сценарію завантажувача на сторінку.
<script>
var d365mkt = {
// disables showing of progress bar during form loading
hideProgressBar: true
};
</script>
Відображення маркетингової форми за допомогою JavaScript API
Очікування DOMContentLoaded
може бути незручним, особливо для таких сценаріїв, як динамічне завантаження вмісту. Для цих ситуацій можна скористатися функцією createForm
помічника. createForm
негайно повертає div
елемент DOM, який запускає вибірку вмісту форми у фоновому режимі (форма вводиться в заповнювач у момент її отримання).
<html>
<body>
<script src="https://cxpiusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js"></script>
<div id="root"></div>
<script>
const root = document.getElementById('root');
root.appendChild(d365mktforms.createForm(
'formId',
'formApiBaseUrl',
'formUrl'));
</script>
</body>
</html>
Введення маркетингової форми в додаток React
Ви можете використовувати маркетингові форми в додатках React. Завантажувач форм виставляє d365mktforms.FormPlaceholder
компонент React, який ви можете ввести у свою програму.
<html>
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(d365mktforms.FormPlaceholder, {
formId:'{msdynmkt_marketingformid}',
formApiBaseUrl:'https://{server-api}/api/v1.0/orgs/{organizationid}/landingpageforms',
formUrl:'https://{server-load}/{organizationid}/digitalassets/forms/{msdynmkt_marketingformid}'
}, null));
</script>
</body>
</html>
Нотатка
Потрібно замінити {msdynmkt_marketingformid}
фактичним ідентифікатором сутності маркетингової форми та {organizationid}
фактичним ідентифікатором організації. {server-}
має вказувати на кінцеві точки сервера вашої організації. Найпростіший спосіб отримати потрібну інформацію - це команда "Отримати код Javascript" з параметрів публікації форми.
віджет атрибут | Властивість компонента React |
---|---|
ідентифікатор форми-даних | formId |
data-form-api-url | formApiBaseUrl |
data-cached-form-url | formUrl |
Нотатка
API Javascript доступний лише для форм, розміщених як скрипт. Він не підтримується для опції хостингу iFrame .