Поділитися через


Розширити статистику клієнтів - маркетингові форми 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 складаються з двох частин:

  1. Покажчик місця заповнення форми, який виглядає приблизно так:
<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>
  1. І завантажувач форми, який підсвічує заповнювачі форми після завантаження сторінки (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 .