Comparteix a través de

Capturar formularis al Customer Insights - Journeys

  • Article

La captura de formularis s'utilitza per obtenir enviaments de formularis existents que no s'han creat amb el Customer Insights - Journeys editor de formularis. La captura de formularis es recomana si el formulari existent també envia enviaments a sistemes diferents del Dynamics 365 o si el formulari existent conté lògica complexa que no es pot tornar a crear fàcilment al Customer Insights - Journeys editor de formularis. Si el formulari existent es pot tornar a crear mitjançant Customer Insights - Journeys editor de formularis, no es recomana utilitzar la funció de captura de formularis.

La captura de formularis utilitza la mateixa API que els formularis estàndard per processar els enviaments. El mateix avís de seguretat s'aplica per a la captura de formularis.

Important

La captura de formularis requereix ajuda per a desenvolupadors. Sempre és més fàcil crear un formulari amb el Customer Insights - Journeys editor de formularis i incrustar-lo a la pàgina existent.

Important

La captura de formularis requereix DynamicsMKT_Forms solució versió 1.1.35355 o superior. Quan proporcioneu una instància de prova, no sempre tindreu la versió més recent automàticament. Assegureu-vos que hàgiu actualitzat Customer Insights - Journeys abans de provar de capturar formularis.

Habilita la captura de formularis

La característica de captura de formularis està desactivada per defecte. Podeu habilitar el commutador Captura de formularis a Configuració, Canvis>de característiques,>Formularis.

Habiliteu la captura de formularis als commutadors de característiques.

Com funciona la captura de formularis

La captura de formularis imita la presentació d'un formulari normalitzat Customer Insights - Journeys . Per enllaçar els enviaments del formulari Customer Insights - Journeys existent, heu de crear un formulari mitjançant el Customer Insights - Journeys editor de formularis. Un cop publiqueu aquest formulari, podeu obtenir un script de captura de formulari, que s'ha d'incrustar a la pàgina web que conté el formulari existent. L'script inclou la definició de l'assignació de camps de formulari existents als atributs de l'entitat client potencial o contacte. Podeu veure tots els enviaments i analítiques a l'interior Customer Insights - Journeys. També podeu utilitzar aquest formulari en l'orquestració del viatge amb l'activador de formulari de màrqueting enviat . L'enviament d'aquest formulari també pot crear o actualitzar el consentiment del punt de contacte i les finalitats o temes relacionats.

Captura de formularis de la guia pas a pas

Creació de la captura del formulari a la Customer Insights - Journeys editor de formularis

  1. Per crear un script de formulari de captura nou, aneu a Customer Insights - Journeys>Formularis>de canals i seleccioneu Nou a la barra d'ordres.

  2. Poseu un nom al formulari i trieu el públic adequat. L'elecció del públic objectiu és important. L'assignació de camp d'atributs de script> de captura de formularis només està disponible per als atributs del públic objectiu escollit (entitat).

  3. Afegiu tots els camps que vulgueu assignar als camps de formulari existents. Aquest pas no és obligatori; L'assignació d'atributs > de camp es defineix al codi de captura de formulari. L'addició dels camps adequats al formulari genera marcadors de posició per a l'assignació d'atributs a l'script de captura de formulari, cosa que facilita la definició de l'assignació.

  4. Afegiu elements de consentiment com ara Finalitat o Tema per formar-los i configurar-los. Obteniu més informació sobre com podeu gestionar el consentiment per als missatges de correu electrònic i de Customer Insights - Journeys text.

    Important

    La definició del consentiment s'ha de fer al editor de formularis. Els canvis realitzats en la configuració de consentiment realitzats en el fragment de codi de captura de formularis seran ignorats.

  5. Afegiu un botó Envia . El botó d'enviament és necessari per validar correctament el formulari abans de publicar-lo.

  6. Publiqui el formulari mitjançant el botó Publicar situat a la cantonada superior dreta de la pantalla. Copieu el formulari, captureu-fragment de codi i inseriu el fragment de codi a la vostra pàgina web amb el formulari existent o lliureu-lo fragment de codi al desenvolupador. El fragment de codi ja inclou un enllaç a la documentació per orientar el desenvolupador.

    Afegiu un element de consentiment al formulari.

    Important

    El nom de domini on està allotjat el formulari existent ha d'estar habilitat per a l'allotjament de formularis externs, en cas contrari, l'enviament del formulari no es capturarà. Obteniu més informació sobre l'autenticació del domini.

Incrustar l'script de captura a la definició de pàgina i mapatge

El fragment de codi copiat en el pas anterior és una plantilla i s'ha d'ajustar al cas d'ús específic. Heu de substituir tots els elements marcats com ***Please fill*** a la plantilla generada i ajustar la lògica al vostre escenari.

L'enviament del formulari existent s'envia mitjançant Customer Insights - Journeys una API JavaScript, definida al fitxer FormCapture.bundle.js i inclosa al fragment.

La configuració de captura de formularis consta d'aquests passos:

  1. Obteniu la referència a l'element de formulari de la pàgina.
  2. Definiu l'assignació de camps de formulari als camps (atributs d'entitat) en Customer Insights - Journeys.
  3. Definir el mapatge dels camps de consentiment en el model de consentiment en Customer Insights - Journeys.
  4. Enviar el formulari a Customer Insights - Journeys.

1. Obteniu una referència a l'element del formulari

Per obtenir una referència a l'element del formulari, podeu utilitzar la waitForElement funció auxiliar. També funciona amb elements renderitzats dinàmicament i retorna una promesa que es resol un cop trobat l'element amb el selector donat a la pàgina. Per a una referència dels CSS selectors, vegeu aquesta documentació.

Exemple:

<form id="form1">
...
</form>

<script>
d365mktformcapture.waitForElement("#form1").then(form => {
  ...
});
</script>

2. Definiu l'assignació de camps de formulari

Els camps del formulari s'han d'assignar als camps respectius (atributs d'entitat Customer Insights - Journeys). El mapatge es defineix en la funció d365mktformcapture.serializeForm(form, mappings).

Exemple:

<form id="form1">
  <p>FirstName: <input type="text" name="firstName"/></p>
</form>

<script>
d365mktformcapture.waitForElement("#form1").then(form => {
  const mappings = [
    {
      FormFieldName: "firstName",
      DataverseFieldName: "firstname",
    },
  ];

  ...
  
  const serializedForm = d365mktformcapture.serializeForm(form, mappings);
  // console.log(JSON.stringify(serializedForm)); // NOTE: enable for debugging
  const payload = serializedForm.SerializedForm.build();
});
</script>

El paràmetre form es recupera mitjançant la waitForElement funció descrita a la secció anterior. El paràmetre mappings és una matriu amb elements de la següent estructura:

export interface IFormFieldMapping {
    FormFieldName?: string; // name of form field
    DataverseFieldName: string; // name of field on Dynamics 365 side
    DataverseFieldValue?: string | IFormValueMapping[]; // optional - either a fixed value or a value mapping
}

export interface IFormValueMapping {
    FormValue: string; // form field value
    DataverseValue: string; // mapped value for that form field value that will be sent to Dynamics 365
}

La funció és síncrona i retorna el resultat de la serialització amb el següent contracte:

export interface IFormSerializationResult {
    FormFieldMappingResults: IFormFieldMappingResult[]; // Status for each of the defined mappings
    SerializedForm: IFormSerializationBuilder; // The serialized form
}

export interface IFormFieldMappingResult {
    Mapping: IFormFieldMapping; // The defined mapping
    FormFieldMappingStatus: FormFieldMappingStatus; // Status of the mapping (see below for status values)
    Message: string; // Optional - an error/warning message for the mapping
}

export enum FormFieldMappingStatus {
    Success = 0,
    NotFound = 1,
    Error = 2
}

Assegureu-vos de gestionar tots els errors retornats per la FormFieldMappingResults. Podeu crear la càrrega útil a Customer Insights - Journeys trucant serializedForm.SerializedForm.build().

2.1 Assignació de camps OptionSet

Per OptionSet als camps, heu de definir l'assignació al valor respectiu en què s'ha d'emmagatzemar Customer Insights - Journeys. Podeu assignar els valors dels camps OptionSet del formulari existent a la DataverseFieldValue propietat.

Exemple:

<form id="form1">
  <p>Radio: <input type="radio" name="radioInput" value="option1"/><input type="radio" name="radioInput" value="option2"/></p>
</form>

<script>
  ...
  const mappings = [
    {
        FormFieldName: "radioInput",
        DataverseFieldName: "dvradioInput",
        DataverseFieldValue: [ 
            { FormValue: "option1", DataverseValue: "1" }, 
            { FormValue: "option2", DataverseValue: "2" },
        ]
    },
  ];
  ...
</script>
2.2 Assignació de camps de cerca
Definiu el valor per defecte per al camp de cerca

Podeu utilitzar valors estàtics (per defecte) a la lògica d'assignació per als camps de cerca. Heu de definir el nom del camp i el valor en què s'ha d'emmagatzemar Customer Insights - Journeys.

Exemple:

<form id="form1">
  ...
</form>

<script>
  ...
  const mappings = [
    {
        DataverseFieldName: "currency",
        DataverseFieldValue: "{\"Id\":\"ffffd6c1-b32d-ee11-bdf3-6045bded6105\",\"LogicalName\":\"transactioncurrency\"}"
    },
  ];
  ...
</script>
Assigneu el valor del camp de cerca a un camp del formulari

També podeu assignar el valor del camp de cerca a un valor corresponent al camp de formulari existent.

Exemple:

<form id="form1">
  <p>Radio: <input type="radio" name="currency" value="usd"/><input type="radio" name="currency" value="eur"/></p>
</form>

<script>
  ...
  const mappings = [
    {
        FormFieldName: "currency",
        DataverseFieldName: "transactioncurrencyid",
        DataverseFieldValue: [ 
              { FormValue: "usd", DataverseValue: "{\"Id\":\"cd2cff48-08a3-ea11-a813-000d3a0a82b4\",\"LogicalName\":\"transactioncurrency\"}", }, 
              { FormValue: "eur", DataverseValue: "{\"Id\":\"91f1a052-259c-4719-a3ae-3a1d2987a3ed\",\"LogicalName\":\"transactioncurrency\"}", }, 
        ]
    },
  ];
  ...
</script>
2.3 Assignació de valors de camps de selecció múltiple

Per multi-select als camps, heu de definir l'assignació al valor respectiu en què s'ha d'emmagatzemar Customer Insights - Journeys. Podeu assignar els valors de camp de selecció múltiple del formulari existents a la DataverseFieldValue propietat.

Exemple:

  <form id="form1">
    <p>Fieldset: <fieldset name="multiOptionInput">
      <input type="checkbox" name="multiOptionInput" value="100000000">0</input>
      <input type="checkbox" name="multiOptionInput" value="100000001">1</input>
      <input type="checkbox" name="multiOptionInput" value="100000002">2</input>
    </fieldset></p>
  </form>
 
<script>
...
const mappings = [
  {
    FormFieldName: "multiOptionInput",
    DataverseFieldName: "dvmultiOptionInput",
    DataverseFieldValue: [
      { FormValue: "100000000", DataverseValue: "0" },
      { FormValue: "100000001", DataverseValue: "1" },
      { FormValue: "100000002", DataverseValue: "2" },
    ]
  },
];
...
</script>

Els camps de consentiment s'han de configurar al editor de formularis en Customer Insights - Journeys. Les DataverseFieldName assignacions i DataverseFieldValue es generen automàticament en conseqüència.

Exemple:

<form id="form1">
  <p>Consent: <input type="checkbox" name="consentField"/></p>
</form>

<script>
  ...
  const mappings = [
    {
        FormFieldName: "consentField",
        DataverseFieldName: "msdynmkt_purposeid;channels;optinwhenchecked",
        DataverseFieldValue: "10000000-0000-0000-0000-000000000004;Email;true",
    },
  ];
  ...
</script>

4. Enviar el formulari a Customer Insights - Journeys

Un cop obtingueu una referència al formulari, definiu les assignacions i serialitzeu el formulari, podeu afegir un detector d'esdeveniments a l'esdeveniment submit i enviar-lo mitjançant la d365mktformcapture.submitForm(captureConfig, payload) funció. Aquesta crida retorna una promesa i els errors es poden gestionar en la catch lògica.

Important

Si teniu una validació personalitzada o una comprovació de Captcha, assegureu-vos d'enviar el formulari només Customer Insights - Journeys en cas que la validació tingui èxit (per exemple, comproveu l'esdeveniment isDefaultPreventedsubmit o truqueu submitForm explícitament només després que passi la validació)

Exemple:

<form id="form1">
  <p>FirstName: <input type="text" name="firstName"/></p>
</form>

<script>
d365mktformcapture.waitForElement("#form1").then(form => {
  const mappings = [
    {
      FormFieldName: "firstName",
      DataverseFieldName: "firstname",
    },
  ];

  form.addEventListener("submit", (e) => {
    const serializedForm = d365mktformcapture.serializeForm(form, mappings);
    // console.log(JSON.stringify(serializedForm)); // NOTE: enable for debugging
    const payload = serializedForm.SerializedForm.build();

    const captureConfig = {
      FormId: "...", // the form id on Dynamics 365 side
      FormApiUrl: "..." // the API url of the Dynamics 365 backend service where the form will be submitted to
    }
    d365mktformcapture.submitForm(captureConfig, payload)
    .catch(e => {
      // error handling
    });
  }, true);
});
</script>

Solució de problemes

La crida al punt final de presentació falla amb un error CORS

L'intercanvi de recursos entre orígens (CORS) pot fer que la captura d'enviament de formularis falli. Habiliteu el vostre domini per allotjar formularis externs. Obteniu més informació sobre l'autenticació del domini.

Assegureu-vos que heu configurat els camps de consentiment respectius al editor de formularis (vegeu Creació de la captura del formulari en Customer Insights - Journeys editor de formularis) i que heu utilitzat les assignacions correctes generades en el procés de publicació.