Outbound-Marketing-Formulare mithilfe von Code erweitern

Artikel
12/13/2023

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.

Wichtig

Dieser Artikel gilt nur für Outbound-Marketing.

Ein Marketingformular definiert einen Satz von Eingabefeldern, die in einem Formularlayout angeordnet werden. Sie werden sicherlich eine kleine Sammlung an wiederverwendbaren Formularen aufbauen, die Sie nach Bedarf auf den verschiedenen Marketingseiten platzieren können. Um einer bestimmten Marketingseite ein Marketingformular hinzuzufügen, verwenden Sie ein Formularelement zur Positionierung des Formulars und legen die lokalen Einstellungen dafür fest, die dann nur für diese Seite gültig sind. Weitere Informationen Outbound-Marketingformulare

Outbound-Marketingformulare können mithilfe von JavaScript erweitert werden, um benutzerdefinierte Geschäftsaktionen in Dynamics 365 Customer Insights - Journeys auszuführen. Im Folgenden finden Sie die Methoden, die zum Erweitern von Outbound-Marketingformularen verfügbar sind.

JavaScript-API

Wir verwenden die aktuelle Version der JavaScript-API. Stellen Sie sicher, dass Ihre Verweise auf das Skript form-loader.js oder loader.js wie https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=[version tag] bzw. https://mktdplp102cdn.azureedge.net/public/latest/js/loader.js?v=[version tag] aussehen. Der ?v=[version tag]-Abschnitt kann weggelassen werden. Ältere Skripte (Skripte, die wie https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/form-loader.js oder https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/loader.js aussehen) sind veraltet und werden nicht mehr unterstützt.

Platzieren Sie den benutzerdefinierten Code direkt nach dem form-loader.js Skript.

Beispielcode:

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

MsCrmMkt.MsCrmFormLoader-Methoden

Funktionsname	Beschreibung	Parametername	Parametertyp	Parameterbeschreibung	Rückgaben
`.on(eventType,callback)`	Registriert einen Rückruf eine Art von Formularlebenszyklusereignis	`eventType`	`string`, einer von `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`	Ereignistyp zu Hook	`undefined`
`callback`	Rückruffunktion		`Function`
`.off(eventType)`	Registrierung von Rückrufen eines bestimmten Formularlebenszyklusereignisses aufheben	`eventType` optional	`string`, einer von `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`	Ereignistyp zu Hook	`undefined`
`.sendFormCaptureToCrm(form)`	Eine Formularübermittlung an Dynamics 365 Customer Insights - Journeys senden, wird nur für Formularerfassungsszenarien unterstützt	`form`	DOM-Element, das für das Formular steht, oder JQuery-Auswahl, die für das Formular steht	Element „Formular-DOM“	`Promise<string>`

Formularereignisse

Ereignisname	Für erfasste Formulare ausgelöst	Syntax	Beschreibung
`formLoad`	Ja	`MsCrmMkt.MsCrmFormLoader` `.on("formLoad", function(event) {})`	Wird ausgelöst, wenn der Formularplatzhalter erkannt wird, bevor der tatsächliche Formularinhalt abgerufen wird, bei erfassten Formularen wird es ausgelöst, wenn das Formular erkannt wird
`formRender`	Nein	`MsCrmMkt.MsCrmFormLoader` `.on("formRender", function(event) {})`	Wird ausgelöst, nachdem der Formularinhalt abgerufen wird und bevor der Formularinhalt auf eine Seite eingefügt wird.
`afterFormRender`	Nein	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormRender", function(event) {})`	Wird ausgelöst, nachdem der Formularinhalt auf eine Seite eingefügt wird und bevor die Überprüfungshooks angefügt werden.
`afterFormLoad`	Nein	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormLoad", function(event) {})`	Wird ausgelöst, nachdem der Formularinhalt auf eine Seite eingefügt wird und nachdem die Überprüfungshooks angefügt werden.
`formSubmit`	Nein	`MsCrmMkt.MsCrmFormLoader` `.on("formSubmit", function(event) {})`	Wird bei der Formularübermittlung ausgelöst, bevor die Formularübermittlung an den Server gesendet wird.
`afterFormSubmit`	Ja	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormSubmit", function(event) {})`	Wird bei der Formularübermittlung ausgelöst, nachdem die Formularübermittlung an den Server gesendet wurde. Dies wird nur ausgelöst, wenn die Übermittlung erfolgreich war. Dies wird vor der Umleitung oder dem Anzeigen der Bestätigungsmeldung ausgelöst.

Für jeden Ereignisrückruf stehen folgende Methoden zur Verfügung:

Methodenname	Beschreibung	Rückgabetyp
`.getType()`	Ruft den Ereignistyp ab	`string`, einer von `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`
`.getFormPageId()`	Ruft die Formularseiten-ID ab – diese bezieht sich auf den eindeutigen Bezeichner der Entität `msdyncrm_formpage`	`string`
`.getFormPlaceholder()`	Ruft das DOM-Element ab, das für das Formular steht	DOM-Element
`.preventDefault()`	Bricht die Formularübermittlung ab, gilt nur für den Ereignistyp `formSubmit`	`undefined`
`.preventFormLoadingProgressBar()`	Blendet das Drehfeld aus, wenn das Formular geladen wird, gilt nur für den Ereignistyp `formLoad`	`undefined`
`.setFormNotification(function (n) {})`	Überschreibt einen Rückruf zum Rendern der Formularbenachrichtigung (wie eine Formularübermittlungsnachricht). Ohne einen Funktionskörper werden keine Benachrichtigungen gerendert. Gültig nur für eine Veranstaltung des Typs `formLoad`.	`undefined`

Formular zur Erfassung der Verhaltensanpassung

Die Formularerfassung wird von dem Konfigurationselement kontrolliert, das wie folgt aussieht: <div class="d365-mkt-config" style="display:none" data-website-id="..." data-hostname="..."> Sie können das Verhalten der Formularerfassung ändern, indem Sie die folgenden Attribute hinzufügen:

Attributname	Beschreibung
`data-ignore-prevent-default="true"`	Falls angegeben, wird das Formular unabhängig von der Tatsache gesendet, dass `.preventDefault()` für das Ereignis ausgeführt wurde.
`data-no-submit="true"`	Wenn angegeben, erfasst das Formularerfassungsskript nicht das Formularsende-Ereignis, was bedeutet, dass Sie `MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form)` manuell auslösen müssen. Dies ist für Fälle hilfreich, in denen Sie zunächst die Formularübermittlung vornehmen und erst später Dynamics 365 Customer Insights - Journeys synchronisieren möchten.

Anmerkung

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

Fügen Sie Ihren Codeausschnitt beim Verwenden der Portale hinzu

Um JavaScript-Code hinzuzufügen, müssen Sie den Anweisungen unten folgen:

Navigieren Sie zur Customer Insights - Journeys-App, und gehen Sie zu Marketingseiten.
Wählen Sie Neu aus, um ein neues Marketingseite zu erstellen.
Formular Drop und Drag Element der Registerkarte Toolbox in die Registerkarte Designer und wählen Sie das Marketing-Formular aus, das Sie verwenden möchten.
Wechseln Sir zur Registerkarte HTML und Ihre Codeausschnitt.
Wählen Sie Speichern aus, um die Änderungen zu speichern und wählen Sie dann Live gehen aus.

Weisen Sie Ihre Codeausschnitt hinzu, wenn Sie Ihre eigene CMS- und Formularhosting verwenden

Um den Codausschnitt hinzuzufügen, müssen Sie den Anweisungen unten folgen:

Navigieren Sie zur Customer Insights - Journeys-App, und gehen Sie zu Marketingformulare im Bereich Outbound-Marketing.
Wählen Sie Neu aus, um ein neues Marketingformular zu erstellen.
Wählen Sie Live schalten aus.
Wählen Sie die Registerkarte Formularhosting und unter der Option Verfügbare Domänden für das Formularhosting, wählen Sie die Domäne aus, falls verfügbar, oder wählen Sie + Neue Domäne erstellen aus.
Fügen Sie Ihre eigene CMS Domäne hinzu und wählen Sie Speichern aus.
Auf der Registerkarte Vom Hosting auf der Registerkarte Zugehörige Marketing-Formularseiten wählen Sie ... und + Neue Formular-Seite hinzufügen aus, um eine Marketings-Formularseite hinzuzufügen.
Wählen Sie Speichern aus.
Wählen Sie nun die Formularseite aus, die Sie erstellt haben und kopieren Sie das Skript die Zwischenablage.
In Ihrem CMS bearbeiten Sie die Seite, auf der Sie das Formular einschließen möchten und fügen Sie die Anpassungen und das Skript hinzu.

Beispiele

Beispielüberprüfung – Dabei wird überprüft, ob es sich entweder um ein Fabricam- oder Contoso-Textfeld handelt und ansonsten dafür gesorgt, dass das Formular nicht übermittelt wird.

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

Einfügen der eingehenden Abfragezeichenfolgenparameter in ausgeblendete Felder.

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

Lokalisieren des Formulars (Auswahlliste) – Sie können die clientseitige Erweiterbarkeit verwenden, um Outbound-Marketingformulare zu lokalisieren. Die Lokalisierung muss nach dem Laden des Formulars erfolgen (afterFormLoad Ereignis). Fügen Sie auf der Marketingseite (oder im CMS, in dem Sie das Formular hosten) das folgende Lokalisierungsskript hinzu:

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

Stellen Sie im Marketingformular sicher, dass Sie die Übersetzungen vorbereitet haben. Bearbeiten Sie das Marketingformular im HTML-Designer, formatieren Sie es (klicken Sie mit der rechten Maustaste in den Designer und wählen Sie dann Format) und fügen Sie die erforderlichen Übersetzungen hinzu.

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

Freigeben über