Amplíe os formularios de marketing de saída mediante código

Artigo
09/13/2023

Nota

O 1 de setembro de 2023, Dynamics 365 Marketing e Dynamics 365 Customer Insights venderanse xuntos cun único SKU de produto chamado Dynamics 365 Customer Insights. As aplicacións individuais pasarán a chamarse Dynamics 365 Customer Insights - Viaxes e Dynamics 365 Customer Insights - Datos, respectivamente. Para obter máis información, consulte as Preguntas frecuentes de Dynamics 365 Customer Insights

Ademais, o 1 de setembro de 2023, os novos clientes de Dynamics 365 Marketing recibirán só nas funcións de márketing en tempo real. Para obter máis información, consulte Instalación predefinida de márketing en tempo real. Actualmente, moitas páxinas de documentación fan referencia a funcións de saída que poden non estar dispoñibles ou poden funcionar de forma diferente en márketing en tempo real. O contido da documentación actualizarase en setembro para indicar se se aplica a márketing en tempo real ou de saída.

Importante

Este artigo só se aplica ao marketing de saída.

Un formulario de márketing define un conxunto de campos de entrada organizados nun deseño de formulario. Probablemente creará unha pequena biblioteca de formularios reutilizables que se poden poñer en todas as diferentes páxinas de márketing se é necesario. Para engadir un formulario de mercadotecnia a un páxina de márketing específico, use un elemento de formulario para situalo e escolla a configuración local para el, que só se aplica a esa páxina. Máis información Formularios de mercadotecnia de saída

Os formularios de márketing de saída pódense ampliar mediante JavaScript para realizar accións empresariais personalizadas nos Dynamics 365 Customer Insights - Journeys. A continuación móstranse os métodos dispoñibles para estender os formularios de marketing de saída.

API de JavaScript

Estamos consumindo a última versión da API de JavaScript. Asegúrate de que as túas referencias ao guión form-loader.js ou loader.js sexan como 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], respectivamente. A sección ?v=[version tag] pódese omitir. Os scripts máis antigos (scripts que parecen https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/form-loader.js ou https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/loader.js) están obsoletos e xa non se admiten.

Coloca o código personalizado directamente despois do guión form-loader.js .

Exemplo de código:

<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étodos MsCrmMkt.MsCrmFormLoader

Nome da función	Descripción	Nome do parámetro	Tipo de parámetro	Descrición do parámetro	Devolucións
`.on(eventType,callback)`	Rexistra unha devolución de chamada a un tipo de evento do ciclo de vida do formulario	`eventType`	`string`, un de `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`	Tipo de evento para conectar	`undefined`
`callback`	Función de devolución de chamada		`Function`
`.off(eventType)`	Anular o rexistro dunha devolución de chamada dun evento de ciclo de vida de formulario determinado	`eventType` opcional	`string`, un de `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`	Tipo de evento para conectar	`undefined`
`.sendFormCaptureToCrm(form)`	Enviar un formulario a Dynamics 365 Customer Insights - Journeys, só compatible co escenario de captura de formularios	`form`	Elemento DOM que representa o formulario ou selector JQuery que representa o formulario	Forma elemento DOM	`Promise<string>`

Forma eventos

Nome do evento	Activado para formularios capturados	Sintaxe	Descripción
`formLoad`	Si	`MsCrmMkt.MsCrmFormLoader` `.on("formLoad", function(event) {})`	Activa cando se recoñece o marcador de posición do formulario antes de obter o contido real do formulario, para os formularios capturados desenvólvese cando se recoñece o formulario
`formRender`	No	`MsCrmMkt.MsCrmFormLoader` `.on("formRender", function(event) {})`	Desencadea despois de obter o contido do formulario e antes de que o contido do formulario se inxecte nunha páxina.
`afterFormRender`	No	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormRender", function(event) {})`	Dispara despois de que o contido do formulario se inxecte nunha páxina antes de que se acheguen os ganchos de validación.
`afterFormLoad`	No	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormLoad", function(event) {})`	Desencadena despois de que o contido do formulario se inxecte nunha páxina e despois de que os ganchos de validación sexan anexados.
`formSubmit`	No	`MsCrmMkt.MsCrmFormLoader` `.on("formSubmit", function(event) {})`	Activa o envío do formulario antes de enviar o envío ao servidor.
`afterFormSubmit`	Si	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormSubmit", function(event) {})`	Activa o envío do formulario despois de que o envío do formulario sexa enviado ao servidor. Só se activa cando o envío é exitoso. Activa antes da redirección ou mostra a mensaxe de confirmación.

Para cada devolución de chamada de evento están dispoñibles os seguintes métodos:

Nome do método	Descripción	Tipo de devolución
`.getType()`	Obtén o tipo de evento	`string`, un de `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`
`.getFormPageId()`	Obtén o ID da páxina do formulario; isto está relacionado co `msdyncrm_formpage` identificador único da entidade	`string`
`.getFormPlaceholder()`	Obtén o elemento DOM que representa o formulario	Elemento da DOM
`.preventDefault()`	Cancela o envío do formulario, válido só para eventos de tipo `formSubmit`	`undefined`
`.preventFormLoadingProgressBar()`	Oculta o xirator mentres se carga o formulario, válido só para o tipo de evento `formLoad`	`undefined`
`.setFormNotification(function (n) {})`	Anula unha devolución de chamada para renderizar a notificación de formulario (como unha mensaxe de envío de formulario). Sen un corpo de función, non se mostrarán notificacións. Válido só para un evento de tipo `formLoad` .	`undefined`

Personalización do comportamento de captura de formularios

A captura do formulario está dirixida polo elemento de configuración que se parece a <div class="d365-mkt-config" style="display:none" data-website-id="..." data-hostname="...">. Pode cambiar o comportamento da captura de formularios engadindo os seguintes atributos:

Nome do atributo	Descripción
`data-ignore-prevent-default="true"`	Cando se especifique, o formulario enviarase independentemente de que `.preventDefault()` se invocou no evento.
`data-no-submit="true"`	Cando se especifique, o script de captura do formulario non capturará o evento de envío do formulario, debes activar o `MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form)` explícitamente. Isto é útil para os casos nos que queres enviar primeiro o teu formulario e sincronizar con Dynamics 365 Customer Insights - Viaxes máis tarde.

Nota

A API de Javascript só está dispoñible para formularios aloxados como script, non é compatible coa opción de hospedaxe iframe.

Engade o teu fragmento de código mentres usas Portais

Para engadir o código JavaScript, debes seguir os seguintes pasos:

Navega á aplicación Customer Insights - Journeys e vai a Páxinas de marketing.
Escolle Novo para crear un novo páxina de márketing.
Arrastre e solte o elemento Formulario desde a pestana Caixa de ferramentas na Deseñador e seleccione o formulario de mercadotecnia que quere utilizar.
Cambia á pestana HTML e á túa fragmento de código.
Seleccione Gardar para gardar os cambios e, a continuación, seleccione Activar.

Engade o teu fragmento de código cando esteas a usar o teu propio CMS e aloxamento de formularios

Para engadir o fragmento de código, debes seguir os seguintes pasos:

Navega á aplicación Customer Insights - Journeys e vai a Formularios de marketing no Área de márketing outbound
Escolle Novo para crear un novo formulario de marketing.
Seleccione Activar.
Seleccione a pestana Aloxamento de formularios e baixo a Dominios dispoñibles para aloxamento de formularios, seleccione o dominio se está dispoñible. ou selecciona + Crear novo dominio.
Engade o teu propio dominio CMS e selecciona Gardar.
Na pestana De aloxamento , na pestana Páxinas de formularios de márketing relacionadas , seleccione ... e + Nova páxina de formulario para engadir unha páxina de formulario de mercadotecnia.
Seleccione Gardar.
Agora seleccione a páxina do formulario que creou e copie o script no portapapeis.
Agora no teu CMS, edita a páxina onde queres incluír o formulario, engade as túas personalizacións e o script.

Exemplos

Validación de mostra: comproba se a caixa de texto é Fabricam ou Contoso; se non, impide o envío do formulario.

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

Enchendo os parámetros da cadea de consulta entrante nos campos ocultos.

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

Localizar o formulario (lista de selección): pode utilizar a extensibilidade do cliente para localizar os formularios de mercadotecnia de saída. A localización debe producirse despois de cargar o formulario (afterFormLoad evento). Dentro do páxina de márketing (ou no CMS onde aloxa o formulario), engade o seguinte script de localización:

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

No formulario de marketing, asegúrate de preparar as traducións. Edita o formulario de márketing no deseñador HTML, formatao (faga clic co botón dereito no deseñador e, a continuación, escolla formato) e engada as traducións necesarias.

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