Compartir a través de

Ampliar formularios de marketing saliente mediante código

  • Artículo

Nota

Dynamics 365 Marketing y Dynamics 365 Customer Insights son ahora Customer Insights - Journeys y Customer Insights - Data. Para obtener más información, consulte Preguntas frecuentes de Dynamics 365 Customer Insights

Los nuevos clientes de Customer Insights - Journeys solo reciben características de recorridos en tiempo real. Para obtener más información, consulte Instalación de recorridos en tiempo real predeterminada.

Importante

Este artículo solo se aplica al marketing saliente, que se eliminará del producto el 30 de junio de 2025. Para evitar interrupciones, realice la transición a recorridos en tiempo real antes de esta fecha. Más información: Información general sobre la transición

Un formulario de marketing define un conjunto de campos de entrada organizados en formato de formulario. Probablemente, creará una pequeña biblioteca de formularios reutilizables que puede incorporar a todas sus páginas de marketing según sea necesario. Para agregar un formulario de marketing a una página de marketing específica, use un elemento de formulario para colocarlo y elija la configuración local, que se aplica solo a esa página. Más información: Formularios de marketing saliente

Los formularios de marketing saliente se pueden ampliar mediante JavaScript para realizar acciones de negocio personalizadas en Dynamics 365 Customer Insights - Journeys. A continuación se describen los métodos disponibles para ampliar los formularios de marketing saliente.

API de JavaScript

Estamos consumiendo la versión más reciente de la API de JavaScript. Asegúrese de que las referencias al script form-loader.js o loader.js sean como https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=[version tag] o https://mktdplp102cdn.azureedge.net/public/latest/js/loader.js?v=[version tag], respectivamente. La sección ?v=[version tag] se puede omitir. Los scripts más antiguos (scripts que se parecen a https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/form-loader.js o https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/loader.js) están obsoletos y ya no se admiten.

Coloque el código personalizado directamente después del script form-loader.js.

Muestra 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 de MsCrmMkt.MsCrmFormLoader

Nombre de función Descripción Nombre del parámetro Tipo de parámetro Descripción de parámetros Devuelve
.on(eventType,callback) Registra una devolución de llamada a un tipo de evento del ciclo de vida de formulario eventType string, uno de "afterFormLoad", "afterFormRender", "afterFormSubmit", "formLoad", "formRender", "formSubmit" Tipo de evento al que se vincula undefined
callback Función de devolución de llamada Function
.off(eventType) Anula el registro de una devolución de llamada a un tipo de evento del ciclo de vida de formulario eventType opcional string, uno de "afterFormLoad", "afterFormRender", "afterFormSubmit", "formLoad", "formRender", "formSubmit" Tipo de evento al que se vincula undefined
.sendFormCaptureToCrm(form) El envío de formulario a Dynamics 365 Customer Insights - Journeys solo se admite para un escenario de captura de formulario form Elemento DOM que representa el formulario o el selector de JQuery que representa el formulario Elemento DOM de formulario Promise<string>

Eventos de formulario

Nombre del evento Desencadenado para formularios capturados Sintaxis Descripción
formLoad Sí MsCrmMkt.MsCrmFormLoader
.on("formLoad", function(event) {})		 Se desencadena cuando se reconoce el marcador del formulario antes de que se capture el contenido real del formulario, para los formularios capturados se desencadena cuando se reconoce el formulario
formRender No MsCrmMkt.MsCrmFormLoader
.on("formRender", function(event) {})		 Se desencadena después de capturarse el contenido del formularios y antes de que se inserte el contenido del formulario en una página.
afterFormRender No MsCrmMkt.MsCrmFormLoader
.on("afterFormRender", function(event) {})		 Se desencadena después de que se inserte el contenido del formulario en una página antes de asociarse los enlaces de validación.
afterFormLoad No MsCrmMkt.MsCrmFormLoader
.on("afterFormLoad", function(event) {})		 Se desencadena después de que se inserte el contenido del formulario en una página y después de asociarse los enlaces de validación.
formSubmit No MsCrmMkt.MsCrmFormLoader
.on("formSubmit", function(event) {})		 Se desencadena al enviarse el formulario antes de que el envío del formulario se envíe al servidor.
afterFormSubmit Sí MsCrmMkt.MsCrmFormLoader
.on("afterFormSubmit", function(event) {})		 Se desencadena al enviarse el formulario después de que el envío del formulario se envíe al servidor. Solo se desencadena cuando el envío se realiza correctamente. Se desencadena antes de la redirección o la presentación del mensaje de confirmación.

Para cada devolución de llamada de evento, los siguientes métodos están disponibles:

Nombre del método Descripción Tipo devuelto
.getType() Obtiene tipo de evento string, uno de "afterFormLoad", "afterFormRender", "afterFormSubmit", "formLoad", "formRender", "formSubmit"
.getFormPageId() Obtiene el Id. de la página del formulario; esto se relaciona con el identificador único de entidad msdyncrm_formpage string
.getFormPlaceholder() Obtiene el elemento DOM que representa el formulario Elemento de la DOM
.preventDefault() Cancela el envío de formulario, válido solo para el evento de tipo formSubmit undefined
.preventFormLoadingProgressBar() Oculta al control de giro mientras el formulario se carga, válido solo para tipo de evento formLoad undefined
.setFormNotification(function (n) {}) Anula una devolución de llamada para presentar notificaciones de formulario (como un mensaje de envío de formulario). Sin un cuerpo de función, no se procesarán notificaciones. Válido solo para un evento de tipo formLoad. undefined

Personalización del comportamiento de captura de formulario

El capturar de formularios es guiado por el elemento de configuración parecido a <div class="d365-mkt-config" style="display:none" data-website-id="..." data-hostname="...">. Puede cambiar el comportamiento de la captura de formulario agregando los atributos siguientes:

Nombre de atributo Descripción
data-ignore-prevent-default="true" Cuando se especifica, el formulario se enviará, independientemente del hecho de que .preventDefault() se haya invocado en el evento.
data-no-submit="true" Cuando se especifica, el script de captura de formulario no capturará el evento de envío de formulario. Debe desencadenar MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form) de forma explícita. Esto resulta útil para los casos en que desea enviar su formulario primero y sincronizar con Dynamics 365 Customer Insights - Journeys más adelante.

Nota

La API de JavaScript está disponible solo para formularios hospedados como un script, no es compatible con la opción de hospedaje de iframe.

Agregue su fragmento de código cuando use Portals

Para agregar el código JavaScript, necesita seguir los pasos que se describen a continuación:

  1. Vaya a la aplicación Customer Insights - Journeys y a Páginas de marketing.

  2. Elija Nuevo para crear una página de marketing nueva.

  3. Arrastre y coloque el elemento Formulario de la pestaña Cuadro de herramientas en la pestaña Diseñador y seleccione el formulario de marketing que desee usar.

    Agregar nueva página de formulario.

  4. Pase a la pestaña HTML y al fragmento de código.

    Pestaña Agregar código en HTML.

  5. Seleccione Guardar para guardar los cambios y haga clic en Puesta en marcha.

Agregue su fragmento de código cuando usa su propio CMS y hospedaje de formulario

Para agregar el fragmento de código, necesita seguir los pasos que se describen a continuación:

  1. Vaya a la aplicación Customer Insights - Journeys y vaya a Formularios de marketing en el área Marketing saliente

  2. Elija Nuevo para crear un nuevo formulario de marketing.

  3. Seleccione Poner en marcha.

  4. Seleccione la pestaña Hospedaje de formularios y en Dominios disponibles para hospedaje de formularios, seleccione el dominio si está disponible, o seleccione + Crear nuevo dominio.

    Pestaña Hospedaje del formulario.

  5. Agregue su propio dominio CMS y seleccione Guardar.

  6. En la pestaña De hospedaje, bajo la pestaña Páginas del formulario relacionadas de marketing, seleccione ... y + Nueva página del formulario para agregar una página del formulario de marketing.

    Páginas de formulario de Customer Insights - Journeys relacionadas.

  7. Seleccione Guardar.

  8. Ahora seleccione la página del formulario que ha creado y copie el script en el Portapapeles.

    Agregar fragmento de código.

  9. Ahora en su CMS, edite la página donde desea incluir el formulario, agregando las personalizaciones y script.

    Agregar personalizaciones al CMS..

Ejemplos

  1. Validación de ejemplo: comprueba si el cuadro de texto es Fabricam o Contoso; de lo contrario, impide el envío del 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();
  }
});

  2. Rellenar los parámetros de la cadena de consulta de entrada para ocultar campos.

    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. Localizar el formulario (lista de selección): puede utilizar la extensibilidad del lado del cliente para localizar formularios de marketing saliente. La localización debe ocurrir después de que se cargue el formulario (evento afterFormLoad). Dentro de la página de marketing (o en el CMS donde aloje el formulario), agregue el siguiente 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>

    En el formulario de marketing, asegúrese de haber preparado las traducciones. Edite el formulario de marketing en el diseñador HTML, formatéelo (haga clic con el botón derecho en el diseñador y seleccione formato) y agregue las traducciones 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>