Partager via

Étendre les formulaires marketing sortant à 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.

Important

Cet article ne s’applique qu’au marketing sortant, qui sera supprimé du produit le 30 juin 2025. Pour éviter les interruptions, passez aux parcours en temps réel avant cette date. Plus d’informations, voir Vue d’ensemble des transitions

Un formulaire marketing définit un ensemble de champs de saisie organisés selon une mise en page de formulaire. Vous allez probablement générer une petite bibliothèque de formulaires réutilisables que vous pouvez placer sur différentes pages marketing, si nécessaire. Pour ajouter un formulaire marketing à une page marketing spécifique, utilisez un élément de formulaire pour positionner le formulaire et choisir les paramètres locaux qui s’appliquent uniquement à cette page. Pour plus d’informations : Formulaires de marketing sortant

Les formulaires marketing sortant peuvent être étendus à l’aide de JavaScript pour effectuer des actions métier personnalisées dans Dynamics 365 Customer Insights - Journeys. Voici les méthodes disponibles pour étendre les formulaires marketing sortant.

API JavaScript

Nous utilisons la dernière version de l’API JavaScript. Vérifiez que les références au script form-loader.js ou loader.js ressemblent à https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=[version tag] ou https://mktdplp102cdn.azureedge.net/public/latest/js/loader.js?v=[version tag], respectivement. La section ?v=[version tag] peut être omise. Les scripts plus anciens (scripts qui ressemblent à https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/form-loader.js ou à https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/loader.js) sont obsolètes et ne sont plus pris en charge.

Placez le code personnalisé directement après le script form-loader.js.

Exemple de code :

<script src="https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=..."></script>
<script>
// correct - the script will attach event handlers right after form loader script
MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function() {});

// wrong - the script will attach event handlers after window has finished loading, form already might have been loaded in the meantime and no events will trigger anymore
// window.onload = function() { MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function() {}); };
</script>

Méthodes MsCrmMkt.MsCrmFormLoader

Nom de la fonction Description Nom du paramètre Type de paramètre Description du paramètre Retours
.on(eventType,callback) Enregistre un rappel à un type d’événements de cycle de vie de formulaire eventType string, l’une de ces valeurs "afterFormLoad", "afterFormRender", "afterFormSubmit", "formLoad", "formRender", "formSubmit" Type d’événement à accrocher undefined
callback Fonction de rappel Function
.off(eventType) Annuler l’enregistrement d’un ou de plusieurs rappels à un événement de cycle de vie de formulaire donné eventType facultatif string, l’une de ces valeurs "afterFormLoad", "afterFormRender", "afterFormSubmit", "formLoad", "formRender", "formSubmit" Type d’événement à accrocher undefined
.sendFormCaptureToCrm(form) Soumettre un formulaire dans Dynamics 365 Customer Insights - Journeys, pris en charge uniquement pour le scénario de capture de formulaire form Élément DOM représentant le formulaire ou sélecteur de JQuery représentant le formulaire Élément DOM du formulaire Promise<string>

Événements de formulaire

Nom de l’événement Déclenché pour les formulaires capturés Syntaxe Description
formLoad Oui MsCrmMkt.MsCrmFormLoader
.on("formLoad", function(event) {})		 Se déclenche quand l’espace réservé du formulaire est reconnu avant que le contenu réel du formulaire soit extrait, pour les déclencheurs de formulaires capturés lorsque le formulaire est reconnu
formRender Non MsCrmMkt.MsCrmFormLoader
.on("formRender", function(event) {})		 Se déclenche après l’extraction du contenu de formulaire et avant l’injection du contenu du formulaire dans une page.
afterFormRender Non MsCrmMkt.MsCrmFormLoader
.on("afterFormRender", function(event) {})		 Se déclenche après l’injection du contenu de formulaire dans une page et avant que les crochets de validation ne soient attachés.
afterFormLoad Non MsCrmMkt.MsCrmFormLoader
.on("afterFormLoad", function(event) {})		 Se déclenche après l’injection du contenu de formulaire dans une page et après que les crochets de validation ont été attachés.
formSubmit Non MsCrmMkt.MsCrmFormLoader
.on("formSubmit", function(event) {})		 Se déclenche à l’envoi du formulaire avant que cette soumission ne soit envoyée au serveur.
afterFormSubmit Oui MsCrmMkt.MsCrmFormLoader
.on("afterFormSubmit", function(event) {})		 Se déclenche à l’envoi du formulaire après que cette soumission a été envoyée au serveur. Se déclenche uniquement que si l’envoi est réussi. Il se déclenche avant la redirection ou l’affichage du message de confirmation.

Pour tous les événements, les méthodes de rappel suivantes sont disponibles :

Nom de la méthode Description Type renvoyé
.getType() Obtient le type d’événement string, l’une de ces valeurs "afterFormLoad", "afterFormRender", "afterFormSubmit", "formLoad", "formRender", "formSubmit"
.getFormPageId() Obtient l’ID de page de formulaire, cela fait référence à l’identificateur unique d’entité msdyncrm_formpage string
.getFormPlaceholder() Obtient l’élément DOM représentant le formulaire Élément DOM
.preventDefault() Annule l’envoi de formulaire, valide uniquement pour l’événement de type formSubmit undefined
.preventFormLoadingProgressBar() Masque la toupie pendant le chargement du formulaire, valide uniquement pour le type d’événement formLoad undefined
.setFormNotification(function (n) {}) Remplace un rappel pour affiche la notification de formulaire (comme un message d’envoi du formulaire). Sans corps de fonction, aucune notification ne s’affiche. Valable uniquement pour un événement de type formLoad. undefined

Personnalisation du comportement de capture de formulaire

La capture de formulaire est dirigée par l’élément de configuration qui ressemble à <div class="d365-mkt-config" style="display:none" data-website-id="..." data-hostname="...">. Vous pouvez modifier le comportement de la capture de formulaire en ajoutant les attributs suivants :

Nom de l’attribut Description
data-ignore-prevent-default="true" Lorsque cet élément est spécifié, le formulaire est envoyé indépendamment du fait que .preventDefault() a été appelé sur l’événement.
data-no-submit="true" Lorsque cet élément est spécifié, le script de capture du formulaire ne capturera pas l’événement d’envoi du formulaire, vous devez déclencher MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form) explicitement. Cette fonction est utile si vous souhaitez soumettre votre formulaire en premier et synchroniser Dynamics 365 Customer Insights - Journeys ultérieurement.

Note

L’API Javascript n’est disponible que pour les formulaires hébergés sous forme de script. Elle n’est pas prise en charge pour l’option d’hébergement iFrame.

Ajoutez votre extrait de code pendant l’utilisation de Portals

Pour ajouter du code JavaScript, vous devez suivre les étapes ci-dessous :

  1. Accédez à l’application Customer Insights - Journeys et accédez à Pages marketing.

  2. Sélectionnez Nouveau pour créer un page marketing.

  3. Faites glisser et déplacer l’élément Formulaire de l’onglet Boîte à outils dans l’onglet Concepteur et sélectionnez le formulaire de marketing que vous souhaitez utiliser.

    Ajoutez une nouvelle page de formulaire.

  4. Affichez l’onglet HTML et votre extrait de code.

    Ajoutez du code dans l’onglet HTML.

  5. Sélectionnez Enregistrer pour enregistrer vos modifications, puis sélectionnez Mettre en service.

Ajoutez votre extrait de code lorsque vous utilisez votre propre CMS et hébergement de formulaire

Pour ajouter l’extrait de code, vous devez suivre les étapes ci-dessous :

  1. Accédez à l’application Customer Insights - Journeys et accédez aux formulaires marketing dans la zone marketing sortant

  2. Sélectionnez Nouveau pour créer un formulaire marketing.

  3. Sélectionnez Mettre en service.

  4. Sélectionnez l’onglet Hébergement de formulaire et sous Domaines disponibles pour l’hébergement des formulaires, sélectionnez le domaine s’il est disponible ou cliquez sur + Créer un domaine.

    Onglet Hébergement de formulaire

  5. Ajoutez votre propre domaine CMS et sélectionnez Enregistrer.

  6. Dans l’onglet À partir de l’hébergement, sous l’onglet Pages de formulaire marketing associées, cliquez sur ..., puis + Nouvelle page de formulaire pour ajouter une page de formulaire marketing.

    Pages de formulaire Customer Insights - Journeys associées.

  7. Cliquez sur Enregistrer.

  8. Sélectionnez à présent la page de formulaire que vous avez créée et copiez le script dans le Presse-papiers.

    Ajoutez un extrait de code.

  9. À présent dans votre CMS, modifiez la page où vous souhaitez inclure le formulaire, ajoutez vos personnalisations et script.

    Ajoutez les personnalisations au CMS.

Examples

  1. Validation de l’exemple : vérifie si la zone de texte contient Fabricam ou Contoso. Dans le cas contraire, empêche l’envoi du formulaire.

    MsCrmMkt.MsCrmFormLoader.on('formSubmit', function(event) {
  // sample validation - check if 
  document.getElementById('txt-company-name-message').style.visibility = 'hidden';
  var companyName = document.getElementById('txt-company-name').value;
  if (companyName !== 'Fabricam' && companyName != 'Contoso') 
  {
    document.getElementById('txt-company-name-message').style.visibility = 'visible';
    event.preventDefault();
  }
});

  2. Remplissage des paramètres de la chaîne de requête entrante dans les champs masqués.

    MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function(event) {
  var self = window.location.toString();
  var queryString = self.split("?");
  var hiddenFields = document.querySelectorAll("input[type=hidden]");
  if (queryString.length > 1) 
  {
    var pairs = queryString[1].split("&");
    for (var pairIndex in pairs) 
    {
      var pair = pairs[pairIndex].split("=");
      if (pair.length !== 2) 
      {
        continue;
      }
      var key = pair[0];
      var value = pair[1];
      if (key && value) 
      {
        for (var i = 0; i < hiddenFields.length; i++) 
        {
          if (hiddenFields[i].id === key) 
          {
            hiddenFields[i].value = value;
          }
        }
      }
    }
  }
});

  3. Localiser le formulaire (liste de sélection) - Vous pouvez utiliser l’extensibilité côté client pour localiser les formulaires marketing sortant. La localisation doit avoir lieu après le chargement du formulaire (événement afterFormLoad). Dans la page marketing (ou dans le CMS où vous hébergez le formulaire), ajoutez le script de localisation suivant :

    <script>
function translatePicklists(lcid) 
{
    var picklists = document.querySelectorAll("select");
    for(var i = 0; i < picklists.length; i++) 
    {
        var picklist = picklists[i];
        var relatedDatalist = document.getElementById("localize-" + picklist.name + "-" + lcid.toString());
        if (relatedDatalist) 
        {
            for(var j = 0; j < picklist.options.length; j++) 
            {
                if (j >= relatedDatalist.options.length) 
                {
                    break;
                }
                picklist.options[j].text = relatedDatalist.options[j].text;
            }
        }
    }
}
MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function(event) { translatePicklists(1029); });
</script>

    Dans le formulaire marketing, assurez-vous que vous avez préparé les traductions. Modifiez le formulaire marketing dans le concepteur HTML, mettez-le en forme (cliquez avec le bouton droit de la souris dans le concepteur, puis choisissez Mettre en forme) et ajoutez les traductions nécessaires.

    <div data-editorblocktype="Field-dropdown">
    <div class="marketing-field">
        <div class="lp-form-field" data-required-field="false">
            <label for="f7ae1a98-0d83-4592-afe0-272c85ce607d" class="lp-ellipsis" title="">Marital status</label>
            <select id="f7ae1a98-0d83-4592-afe0-272c85ce607d" name="f7ae1a98-0d83-4592-afe0-272c85ce607d" class="lp-form-fieldInput" title="" style="width: 100%; box-sizing: border-box;">
              <option value=""></option>
              <option value="1">Single</option>
              <option value="2">Married</option>
              <option value="3">Divorced</option>
              <option value="4">Widowed</option>
            </select>
        </div>
    </div>
</div>
<!-- format is localize-fieldid-lcid -->
<datalist id="localize-f7ae1a98-0d83-4592-afe0-272c85ce607d-1029">
    <option></option>
    <option>Svobodny(a)</option>
    <option>Zenaty(a)</option>
    <option>Rozvedeny(a)</option>
    <option>Vdovec(vdova)</option>
</datalist>