Freigeben über

Customer Insights - Journeys-Marketingformulare mit Code erweitern

  • Artikel

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>
  1. 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. Dieses Ereignis wird ausgelöst, bevor die Seite geladen wird, sodass es in der Entwicklerkonsole nicht sichtbar ist.
d365mkt-formrender Wird ausgelöst, nachdem der Formularinhalt abgerufen wurde und direkt bevor er in den Formularplatzhalter eingefügt wird. Dieses Ereignis wird ausgelöst, bevor die Seite geladen wird, sodass es in der Entwicklerkonsole nicht sichtbar ist.
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.