Partager via

Étendre les formulaires marketing Customer Insights - Journeys à l’aide de code

  • Article

Note

Dynamics 365 Marketing et Dynamics 365 Customer Insights sont maintenant Customer Insights - Journeys et Customer Insights - Data. Pour plus d’informations, consultez les Dynamics 365 Customer Insights FAQ

Les nouveaux clients Customer Insights - Journeys reçoivent uniquement des fonctionnalités des parcours en temps réel. Pour en savoir plus, consultez Installation de parcours en temps réel par défaut.

Cet article explique comment étendre les formulaires marketing Customer Insights - Journeys pour une personnalisation avancée.

API JavaScript

Les formulaires de marketing Customer Insights - Journeys se composent de deux parties :

  1. Un espace réservé de formulaire, qui ressemble à ceci :
<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. Et un chargeur de formulaire, qui éclaire les espaces réservés du formulaire une fois la page chargée (un événementDOMContentLoaded est déclenché) :
<script src='https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js'></script>

Événements personnalisés

Événement personnalisé Description
d365mkt-beforeformload Déclenché lorsque l’espace réservé du formulaire est reconnu avant que le contenu réel du formulaire ne soit récupéré.
d365mkt-formrender Se déclenche après l’extraction du contenu de formulaire et avant l’injection dans l’espace réservé du formulaire.
d365mkt-afterformload Déclenché après l’injection du formulaire dans l’espace réservé.
d365mkt-formsubmit Déclenché lors de la soumission du formulaire, annulable.
d365mkt-afterformsubmit Se déclenche lorsqu’une formulaire est envoyé

Soumission de formulaire - Propriétés de l’objet de détail d365mkt-formsubmit

Nom  Type Description
Charge utile Object Dictionnaire avec les propriétés du formulaire à envoyer au serveur

Après soumission de formulaire - Propriétés de l’objet de détail d365mkt-afterformsubmit

Nom  Type Description
Opération réussie Entier Indique si le serveur a accepté la soumission ou si la soumission a été rejetée
Charge utile Object Dictionnaire avec les propriétés du formulaire à envoyer au serveur

Vous pouvez associer des événements personnalisés à l’aide des mécanismes d’association d’événements standard :

Exemple de code
<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>

Personnalisation du comportement de formulaire

Vous pouvez personnaliser le comportement du formulaire en incluant un script de configuration avant que le script de chargement ne soit injecté dans une page.

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

Rendu d’un formulaire marketing à l’aide d’une API JavaScript

Attendre DOMContentLoaded peut être gênant, en particulier pour des scénarios tels que le chargement de contenu dynamique. Pour ces cas, vous pouvez utiliser la fonction d’assistant createForm. createForm renvoie immédiatement un élément DOM div, qui déclenche la récupération du contenu du formulaire en arrière-plan (le formulaire est injecté dans un espace réservé au moment où il est récupéré).

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

Vous devez également transmettre l’ID d’événement lisible pour les formulaires d’inscription à l’événement. La syntaxe modifiée est la suivante :

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' })

Injecter un formulaire marketing dans une application React

Vous pouvez utiliser des formulaires marketing dans les applications React. Le chargeur de formulaire expose le composant d365mktforms.FormPlaceholder React, que vous pouvez injecter dans votre application.

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

Vous devez également transmettre l’ID d’événement lisible pour les formulaires d’inscription à l’événement. La syntaxe modifiée (introduite dans la version 6.1 de Marketing) est la suivante :

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

Note

Vous devez remplacer {msdynmkt_marketingformid} par l’identifiant réel de l’entité du formulaire marketing et {organizationid} par l’identifiant réel de votre organisation. {server-} doit pointer vers les points de terminaison de serveur de votre organisation. Le moyen le plus simple de récupérer les informations dont vous avez besoin consiste à utiliser la commande « Obtenir le code Javascript » à partir des options de publication du formulaire.

Attribut du widget Propriété du composant React
data-form-id formId
data-form-api-url formApiBaseUrl
data-cached-form-url formUrl

Note

L’API Javascript est disponible uniquement pour les formulaires hébergés en tant que script. Il n’est pas pris en charge pour l’option d’hébergement iFrame.