Compartir a través de

Ampliar formularios de marketing de Customer Insights - Journeys 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.

Este artículo explica cómo ampliar los formularios de marketing Customer Insights - Journeys para una personalización avanzada.

API de JavaScript

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

  1. Un marcador de posición de formulario, que se parece a esto:
<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>
  1. Y un cargador de formularios, que ilumina los marcadores de posición del formulario una vez que se carga la página (se activa 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 activa cuando se reconoce el marcador de posición del formulario antes de que se obtenga el contenido real del formulario.
d365mkt-formrender Se activa después de que se obtiene el contenido del formulario y directamente antes de que se inyecte en el marcador de posición del formulario.
d365mkt-afterformload Se activa después de inyectar el formulario en el marcador de posición.
d365mkt-formsubmit Activado cuando se envía el formulario, cancelable.
d365mkt-afterformsubmit Se desencadena después de que se envía un formulario

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

Name Type Descripción
Carga útil Objecto Diccionario con propiedades de formulario para enviar al servidor

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

Name Type Descripción
Correcto Booleana Indica si el servidor aceptó el envío o si el envío fue rechazado
Carga útil Objecto Diccionario con propiedades de formulario tal y como fueron enviados al servidor

Puede adjuntar eventos personalizados utilizando la mecánica de adjuntar eventos estándar:

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 el comportamiento del formulario incluyendo una secuencia de comandos de configuración antes de que la secuencia de comandos del cargador se inyecte en una página.

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

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

Esperar por DOMContentLoaded puede ser un inconveniente, especialmente en escenarios como la carga dinámica de contenido. Para estas situaciones, puede utilizar la función auxiliar createForm. createForm devuelve inmediatamente un elemento DOM de div, que activa la obtención del contenido del formulario en segundo plano (el formulario se inyecta en un marcador de posición en el momento en que se obtiene).

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

También debe pasar el identificador de evento legible para los formularios de registro de eventos. La sintaxis modificada es la siguiente:

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>

También debe pasar el identificador de evento legible para los formularios de registro de eventos. La sintaxis modificada (introducida en la versión 6.1 de Marketing) es la siguiente:

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

Nota

Debe reemplazar {msdynmkt_marketingformid} con el identificador real de la entidad del formulario de marketing y {organizationid} con el identificador real de su organización. {server-} debe apuntar a los puntos finales del servidor para su organización. La forma más fácil de obtener la información que necesita es con el comando "Obtener código Javascript" de 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

Nota

La API de Javascript está disponible solo para formularios alojados como script. No es compatible con la opción de hospedaje iFrame.