Customer Insights - Journeys-Marketingformulare mit Code erweitern

Anmerkung

Dynamics 365 Marketing und Dynamics 365 Customer Insights sind jetzt Customer Insights - Journeys und Customer Insights - Data. Weitere Informationen finden Sie in den FAQs zu Dynamics 365 Customer Insights

Neue Kunden von Customer Insights - Journeys erhalten ausschließlich Echtzeitmarketingfunktionen. Zusätzliche Informationen finden Sie in Echtzeitkontaktverläufe – Standardinstallation.

In diesem Artikel wird erläutert, wie Sie Customer Insights - Journeys-Marketingformulare für eine erweiterte Anpassung erweitern.

JavaScript-API

Customer Insights - Journeys-Marketingformulare bestehen aus zwei Teilen:

1. Ein Formularplatzhalter, der so ähnlich aussieht:

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

2. Und ein Formularlader, der die Platzhalter des Formulars beleuchtet, sobald die Seite geladen ist (ein DOMContentLoaded-Ereignis wird ausgelöst):

<script src='https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js'></script>

Benutzerdefinierte Ereignisse

Benutzerdefiniertes Ereignis	Beschreibung
d365mkt-beforeformload	Wird ausgelöst, wenn der Formularplatzhalter erkannt wird, bevor der eigentliche Formularinhalt abgerufen wird.
d365mkt-formrender	Wird ausgelöst, nachdem der Formularinhalt abgerufen wurde und direkt bevor er in den Formularplatzhalter eingefügt wird.
d365mkt-afterformload	Wird ausgelöst, nachdem das Formular in den Platzhalter eingefügt wurde.
d365mkt-formsubmit	Wird beim Absenden des Formulars ausgelöst, stornierbar.
d365mkt-afterformsubmit	Wird ausgelöst, nachdem ein Formular gesendet wird

Formularübermittlung – d365mkt-formsubmit-Detailobjekteigenschaften

Name des Dataflows	Type	Beschreibung
Nutzdaten	Object	Wörterbuch mit Formulareigenschaften, die an den Server gesendet werden sollen

Nach Formularübermittlung – d365mkt-afterformsubmit-Detailobjekteigenschaften

Name des Dataflows	Type	Beschreibung
Erfolg	Boolesch	Gibt an, ob der Server die Übermittlung akzeptiert hat oder ob die Übermittlung abgelehnt wurde
Nutzdaten	Object	Wörterbuch mit Formulareigenschaften, wie sie an den Server gesendet wurden

Sie können benutzerdefinierte Ereignisse mit der Standardmechanik zum Anhängen von Ereignissen anhängen:

Beispielcode

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

Anpassung des Formularverhaltens

Sie können das Formularverhalten anpassen, indem Sie ein Konfigurationsskript einfügen, bevor das Ladeskript in eine Seite eingefügt wird.

<script>
var d365mkt = {
  // disables showing of progress bar during form loading
  hideProgressBar: true
};
</script>

Ein Marketingformular mit einer JavaScript-API rendern

Es kann unpraktisch sein, auf DOMContentLoaded zu warten, insbesondere bei Szenarien wie dem dynamischen Laden von Inhalten. Für diese Situationen können Sie die createForm Hilfsfunktion verwenden. createForm gibt sofort ein div-DOM-Element zurück, das das Abrufen von Formularinhalten im Hintergrund auslöst (das Formular wird in einen Platzhalter eingefügt, sobald es abgerufen wird).

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

Sie müssen auch die lesbare Ereignis-ID für die Ereignisregistrierungsformulare übergeben. Die geänderte Syntax lautet wie folgt:

d365mktforms.createForm(
  'formId',
  'https://{server-api}/api/v1.0/orgs/{organizationid}/eventmanagement',
  'https://{server-load}/{organizationid}/digitalassets/forms/{msdynmkt_marketingformid}',
  { 'data-readable-event-id': 'My_Test_Event_123_replace_with_actual_readable_event_id' })

Ein Marketingformular in eine React-Anwendung einfügen

Sie können Marketingformulare in React-Anwendungen verwenden. Das Formularladeprogramm stellt die d365mktforms.FormPlaceholder-React-Komponente bereit, die Sie in Ihre Anwendung einfügen können.

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

Sie müssen auch die lesbare Ereignis-ID für die Ereignisregistrierungsformulare übergeben. Die geänderte Syntax (eingeführt in Marketing Version 6.1) lautet wie folgt:

      root.render(React.createElement(d365mktforms.FormPlaceholder, {
        formId:'{msdynmkt_marketingformid}',
        formApiBaseUrl:'https://{server-api}/api/v1.0/orgs/{organizationid}/eventmanagement',
        formUrl:'https://{server-load}/{organizationid}/digitalassets/forms/{msdynmkt_marketingformid}',
        readableEventId:'My_Test_Event_123_replace_with_actual_readable_event_id'
      }, null));

Anmerkung

Sie müssen {msdynmkt_marketingformid} durch die tatsächliche Kennung der Marketingformularentität und {organizationid} durch die tatsächliche Kennung Ihrer Organisation ersetzen. {server-} sollte auf die Serverendpunkte für Ihre Organisation verweisen. Der einfachste Weg, die benötigten Informationen abzurufen, ist der Befehl „JavaScript-Code abrufen“ aus den Veröffentlichungsoptionen des Formulars.

Widgetattribut	React-Komponenteneigenschaft
data-form-id	formId
data-form-api-url	formApiBaseUrl
data-cached-form-url	formUrl

Anmerkung

Die Javascript-API ist nur für Formulare verfügbar, die als Skript gehostet werden. Für die iFrame-Hosting-Option wird sie nicht unterstützt.