Ampliar formularios de marketing de Customer Insights - Journeys mediante código

En este artículo se explica cómo ampliar formularios de marketing de Customer Insights- Journeys con personalización avanzada.

API de JavaScript

Los formularios de marketing de Customer Insights - Journeys constan de dos partes:

Marcador de posición de formulario. Este es un ejemplo:

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

Y un cargador de formularios, que aligera los marcadores de posición del formulario una vez que se carga la página (se desencadena un evento DOMContentLoaded):

<script src='https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js'></script>

Eventos personalizados

Evento personalizado	Descripción
`d365mkt-beforeformload`	Se desencadena cuando se reconoce el marcador de posición del formulario antes de capturar el contenido del formulario. Este evento se desencadena antes de que se cargue la página, por lo que no es visible en la consola del desarrollador.
`d365mkt-formrender`	Se desencadena después de capturar el contenido del formulario y justo antes de insertarlo en el marcador de posición del formulario. Este evento se desencadena antes de que se cargue la página, por lo que no es visible en la consola del desarrollador.
`d365mkt-afterformload`	Se desencadena después de insertar el formulario en el marcador de posición.
`d365mkt-formsubmit`	Se desencadena cuando se envía el formulario. Este evento es cancelable.
`d365mkt-afterformsubmit`	Se activa después de enviar el formulario.

Envío de formulario: propiedades de objeto detalladas de d365mkt-formsubmit

Nombre	Tipo	Descripción
Carga	Objeto	Diccionario con propiedades de formulario para enviar al servidor

Después del envío del formulario: propiedades detalladas del objeto d365mkt-afterformsubmit

Nombre	Tipo	Descripción
Éxito	Booleano	Indica si el servidor aceptó el envío o si el envío fue rechazado
Carga	Objeto	Diccionario con propiedades de formulario tal y como fueron enviados al servidor

Adjunte eventos personalizados mediante los métodos estándar de adjuntar eventos.

Código de ejemplo

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

Personalización de comportamiento de formularios

Puede personalizar algunas características del formulario agregando scripts personalizados, mientras que puede modificar otras inyectando datos adicionales en el marcador de posición del formulario.

Deshabilitar la barra de progreso de carga de formularios

Incluya un script de configuración antes del script del cargador para personalizar el comportamiento del formulario. Por ejemplo, oculte la barra de progreso de carga del formulario.

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

Deshabilitar la interfaz de usuario de comentarios predeterminada

Para mostrar una interfaz de usuario personalizada después del envío del formulario, deshabilite los mensajes correctos o de error predeterminados agregando data-preventsubmissionui="true" al marcador de posición del formulario.

Ejemplo:

<div>
  data-preventsubmissionui="true"
  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>

Representación de un formulario de marketing mediante una API de JavaScript

Esperar DOMContentLoaded puede ser inconveniente, especialmente al cargar contenido dinámico. En estos casos, use la createForm función auxiliar. createForm devuelve un div elemento DOM y desencadena la captura del contenido del formulario en segundo plano. El formulario se inserta en un marcador de posición tan pronto como se captura.

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

Pase el identificador de evento legible para los formularios de registro de eventos. Esta es la sintaxis modificada:

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

Inyectar un formulario de marketing en una aplicación React

Puede utilizar formularios de marketing dentro de las aplicaciones de React. El cargador de formularios expone el componente d365mktforms.FormPlaceholder React, que puede inyectar en su aplicación.

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

Pase también el identificador de evento legible para los formularios de registro de eventos. Esta es la sintaxis modificada:

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

Reemplace {msdynmkt_marketingformid} por el identificador real de la entidad de formulario de marketing y {organizationid} por el identificador real de su organización. {server-} debe apuntar a los puntos de conexión del servidor para su organización. La manera más fácil de obtener esta información es usar el comando "Obtener código Javascript" desde las opciones de publicación del formulario.

Atributo de widget Propiedad de componente React

data-form-id formId

data-form-api-url formApiBaseUrl

data-cached-form-url formUrl

Atributo de widget	Propiedad de componente React
data-form-id	formId
data-form-api-url	formApiBaseUrl
data-cached-form-url	formUrl

Nota:

La API de JavaScript está disponible solo para formularios hospedados como script. No admite la opción de hospedaje de iFrame.

Selección de un valor de campo de búsqueda mediante JavaScript

Puede usar la API de JavaScript para realizar una búsqueda en segundo plano y rellenar automáticamente un campo de búsqueda con elementos que coincidan con un término de búsqueda específico. Por ejemplo, después de cargar el formulario, puede buscar todos los elementos que contengan la palabra "dólar" y mostrarlos en el campo de búsqueda:

    <script>
      document.addEventListener("d365mkt-afterformload", (event) => {
        const form = event.target.querySelector("form");
        d365mktforms
          .fillLookupFromSearch(
            form,
            "transactioncurrencyid", // field logical name
            "dollar"                 // search term
          )
          .then(function (r) {
            console.log("Success performing search", r);
          })
          .catch(function (e) {
            console.log("Error performing search", e);
          });
      });
    </script>

Last updated on 2026-03-27