บันทึกภาพฟอร์มใน Customer Insights - Journeys

การบันทึกแบบฟอร์มจะนำไปใช้ในการนำส่งแบบฟอร์มที่มีอยู่ที่ไม่ได้ถูกสร้างโดยใช้โปรแกรมแก้ไขแบบฟอร์ม Customer Insights - Journeys แนะนำให้ใช้การบันทึกแบบฟอร์มในกรณีที่แบบฟอร์มของคุณที่มีอยู่ได้นำส่งเข้าสู่ระบบอื่นนอกเหนือจาก Dynamics 365 หรือแบบฟอร์มที่มีอยู่มีตรรกะที่ซับซ้อนจนไม่สามารถสร้างซ้ำในโปรแกรมแก้ไขแบบฟอร์ม Customer Insights - Journeys ได้ หากสามารถสร้างแบบฟอร์มที่มีอยู่ซ้ำได้โยการใช้โปรแกรมแก้ไขแบบฟอร์ม Customer Insights - Journeys การบันทึกแบบฟอร์มจะ ไม่ ถูกแนะนำให้ใช้

การบันทึกภาพฟอร์มใช้ API เดียวกันกับฟอร์มมาตรฐานในการประมวลผลการส่ง ประกาศด้านความปลอดภัย เดียวกันนี้ใช้กับการบันทึกภาพฟอร์ม

สำคัญ

การบันทึกแบบฟอร์มต้องการความช่วยเหลือจากนักพัฒนา การสร้างฟอร์มโดยใช้ตัวแก้ไขฟอร์ม Customer Insights - Journeys และฝังลงในเพจที่คุณมีอยู่นั้นจะง่ายกว่าเสมอ

สำคัญ

การบันทึกฟอร์มต้องใช้โซลูชัน DynamicsMKT_Forms เวอร์ชัน 1.1.35355 หรือสูงกว่า ในการเตรียมใช้งานอินสแตนซ์รุ่นทดลองใช้ คุณจะไม่ได้รับเวอร์ชันล่าสุดโดยอัตโนมัติเสมอไป ตรวจสอบให้แน่ใจว่าคุณได้อัปเดต Customer Insights - Journeys ก่อนที่จะพยายามบันทึกฟอร์ม

เปิดใช้งานการบันทึกภาพฟอร์ม

คุณลักษณะการบันทึกภาพฟอร์มถูกปิดใช้งานโดยค่าเริ่มต้น คุณสามารถเปิดใช้งานการสลับ การบันทึกภาพฟอร์ม ได้ใน การตั้งค่า>สวิตช์คุณลักษณะ>ฟอร์ม

การบันทึกแบบฟอร์มทำงานอย่างไร

การบันทึกแบบฟอร์มเลียนแบบการนำส่งแบบฟอร์มของแบบฟอร์มมาตรฐานของ Customer Insights - Journeys คุณต้องสร้างแบบฟอร์มโดยใช้โปรแกรมแก้ไขแบบฟอร์ม Customer Insights - Journeys เพื่อเชื่อมต่อการนำส่งแบบฟอร์มที่มีอยู่ของคุณเข้ากับ Customer Insights - Journeys เมื่อคุณทำการเผยแพร่แบบฟอร์ม คุณจะได้รับสคริปต์การบันทึกแบบฟอร์ม ซึ่งจำเป็นต้องฝังลงในหน้าเว็บที่มีแบบฟอร์มที่มีอยู่ของคุณ สคริปต์จะประกอบด้วยคำจำกัดความของแมปปิ้งฟิลด์แบบฟอร์มที่มีอยู่กับคุณลักษณะของลูกค้าเป้าหมายหรือเอนทิตีผู้ติดต่อ คุณสามารถดูได้ทั้งการนำส่งและการวิเคราะห์เชิงลึกของ Customer Insights - Journeys คุณยังสามารถใช้แบบฟอร์มนี้ในการเตรียมการเดินทางด้วยทริกเกอร์ Marketing Form Submitted การนำส่งแบบฟอร์มนี้ยังสามารถสร้างหรืออัปเดตการยินยอมให้การติดต่อและวัตถุประสงค์หรือหัวข้อที่เกี่ยวข้องด้วย

คำแนะนำการบันทึกฟอร์มทีละขั้นตอน

สร้างการบันทึกแบบฟอร์มในโปรแกรมแก้ไขแบบฟอร์ม Customer Insights - Journeys

1. ไปที่ Customer Insights - Journeys>ช่องทาง>แบบฟอร์ม และเลือก สร้างใหม่ บนแถบคำสั่ง เพื่อสร้างสคริปต์การบันทึกแบบฟอร์มใหม่

2. ตั้งชื่อแบบฟอร์มและเลือกสิทธิ์ของผู้เข้าชม ตัวเลือกของผู้เข้าชมเป้าหมายเป็นสิ่งสำคัญ ฟิลด์สคริปต์การบันทึกแบบฟอร์ม->การแมปคุณลักษณะใช้ได้เฉพาะกับคุณลักษณะของผู้เข้าชมเป้าหมายที่เลือก (เอนทิตี) เท่านั้น

3. เพิ่มฟิลด์ทั้งหมดที่คุณต้องการแมปกับฟิลด์ฟอร์มที่มีอยู่ของคุณ ขั้นตอนนี้ไม่บังคับ การแมป ฟิลด์ > แอตทริบิวต์ กำหนดไว้ในโค้ดการบันทึกภาพฟอร์ม การเพิ่มฟิลด์สิทธิ์ลงในแบบฟอร์มจะสร้างพื้นที่ที่สำรองไว้สำหรับการแมปคุณลักษณะในสคริปต์การบันทึกแบบฟอร์ม ซึ่งทำให้คำจำกัดความของการแมปง่ายขึ้น

4. เพิ่มองค์ประกอบการให้ความยินยอม เช่น วัตถุประสงค์หรือหัวข้อเพื่อสร้างและกำหนดค่า เรียนรู้เพิ่มเติมเกี่ยวกับวิธี จัดการความยินยอมสำหรับอีเมลและข้อความใน Customer Insights - Journeys

   สำคัญ

   คำนิยามของการให้ความยินยอมต้องสร้างในโปรแกรมแก้ไขแบบฟอร์ม การเปลี่ยนแปลงการตั้งค่าการให้ความยินยอมที่ทำในข้อมูลโค้ดการบันทึกแบบฟอร์มจะถูกละเว้น

5. เพิ่มปุ่ม นำส่ง จำเป็นต้องมีปุ่มส่ง เพื่อยืนยันฟอร์มให้สำเร็จก่อนที่จะเผยแพร่

6. เผยแพร่แบบฟอร์มโดยใช้ปุ่ม เผยแพร่ ที่มุมบนขวาของหน้าจอ คัดลอกส่วนย่อยของโค้ดการจับฟอร์มและฝังส่วนย่อยของโค้ดลงในหน้าเว็บของคุณด้วยฟอร์มที่มีอยู่ หรือส่งมอบส่วนย่อยของโค้ดให้กับนักพัฒนาของคุณ ส่วนย่อยของโค้ดมีลิงก์ที่สามารถไปยังคู่มือเพื่อนำทางให้นักพัฒนาของคุณอยู่แล้ว

   

   สำคัญ

   ชื่อโดเมนที่โฮสต์แบบฟอร์มที่มีอยู่ของคุณต้องเปิดใช้งานสำหรับการโฮสต์แบบฟอร์มภายนอก มิฉะนั้นการนำส่งแบบฟอร์มจะไม่ถูกบันทึก เรียนรู้เพิ่มเติมเกี่ยวกับ การตั้งค่าการรับรองความถูกต้องของโดเมน

การฝังสคริปต์การบันทึกลงในหน้าเพจและคำจำกัดความการแมป

ส่วนย่อยของโค้ดที่คัดลอกในขั้นตอนก่อนหน้าคือ เทมเพลต และต้องปรับให้เหมาะกับกรณีและปัญหาการใช้งานแต่ละแบบ คุณต้องใส่ข้อมูลองค์ประกอบทั้งหมดที่ทำเครื่องหมายเป็น ***Please fill*** ในเทมเพลตที่สร้างขึ้น และปรับตรรกะให้เหมาะกับสถานการณ์ของคุณ

การส่งแบบฟอร์มที่มีอยู่ของคุณจะถูกส่งไปยัง Customer Insights - Journeys โดยใช้ JavaScript API ที่กำหนดไว้ในแฟ้ม FormCapture.bundle.js และที่รวมอยู่ในส่วนย่อย

กระบวนการติดตั้งการบันทึกแบบฟอร์มประกอบด้วยขั้นตอนเหล่านี้

1. รับการการอ้างอิงขององค์ประกอบของแบบฟอร์มบนหน้าเพจ
2. กำหนดแมปของฟิลด์แบบฟอร์มบนฟิลด์ (คุณลักษณะของเอนทิตี้) ใน Customer Insights - Journeys
3. กำหนดการแมปของฟิลด์คำยินยอมบนรูปแบบคำยินยอมใน Customer Insights - Journeys
4. ส่งการนำส่งแบบฟอร์มไปยัง Customer Insights - Journeys

1. รับการอ้างอิงขององค์ประกอบของแบบฟอร์ม

เพื่อรับการอ้างอิงขององค์ประกอบของแบบฟอร์ม คุณสามารถใช้ฟังก์ชั่นช่วยเหลือ waitForElement ได้ นอกจากนี้ยังใช้งานได้กับองค์ประกอบที่แสดงผลแบบไดนามิก และส่งคืนสัญญาที่ได้รับการแก้ไขเมื่อพบว่ามีองค์ประกอบที่มีตัวเลือกที่กำหนดบนเพจ สำหรับการอ้างอิงของตัวเลือก CSS ดูได้ที่ เอกสารประกอบ

ตัวอย่าง:

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

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

2. กําหนดแมปของฟิลด์รูปแบบ

ฟิลด์ในแบบฟอร์มจะต้องแมปกับฟิลด์ที่เกี่ยวข้อง (คุณลักษณะของเอนทิตี้) ใน Customer Insights - Journeys การมแมปจะถูกกำหนดไว้ในฟังก์ชั่น d365mktformcapture.serializeForm(form, mappings)

ตัวอย่าง:

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

พารามิเตอร์ form จะถูกดึงข้อมูลโดยฟังก์ชั่น waitForElement ที่อธิบายไว้ในส่วนก่อนหน้า พารามิเตอร์ mappings เป็นองค์ประกอบอาร์เรย์ของโครงสร้างต่อไปนี้

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
}

ฟังก์ชันเป็นแบบซิงโครนัสและส่งกลับผลลัพธ์การจัดเรียงแบบอนุกรมพร้อมกับสัญญาต่อไปนี้

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
}

ตรวจสอบให้แน่ใจว่าคุณจัดการกับข้อผิดพลาดทั้งหมดที่ส่งกลับโดย FormFieldMappingResults คุณสามารถกำหนดปริมาณให้กับ Customer Insights - Journeys โดยเรียกใช้ serializedForm.SerializedForm.build()

2.1 การแมปฟิลด์ชุดตัวเลือก

สำหรับฟิลด์ OptionSet คุณต้องกำหนดการแมปกับค่าที่เกี่ยวข้องที่ควรเก็บไว้ใน Customer Insights - Journeys คุณสามารถแมปค่าฟิลด์ชุดตัวเลือของแบบฟอร์มที่มีอยู่ของคุณได้ในคุณสมบัติ DataverseFieldValue

ตัวอย่าง:

<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 การแมปฟิลด์การค้นหาข้อมูล

ตั้งค่าเริ่มต้นสำหรับฟิลด์การค้นหา

คุณสามารถใช้ค่าคงที่ (เริ่มต้น) ในตรรกะการแมปสำหรับฟิลด์การค้นหาได้ คุณต้องกำหนดชื่อของฟิลด์กับค่าที่เกี่ยวข้องที่ควรเก็บไว้ใน Customer Insights - Journeys

ตัวอย่าง:

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

<script>
  ...
  const mappings = [
    {
        DataverseFieldName: "currency",
        DataverseFieldValue: "{\"Id\":\"ffffd6c1-b32d-ee11-bdf3-6045bded6105\",\"LogicalName\":\"transactioncurrency\"}"
    },
  ];
  ...
</script>

แมปค่าของฟิลด์การค้นหากับฟิลด์ในฟอร์มของคุณ

คุณยังสามารถแมปค่าฟิลด์การค้นหากับค่าที่เกี่ยวข้องในฟิลด์ฟอร์มที่คุณมีอยู่ได้

ตัวอย่าง:

<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 การแมปค่าฟิลด์แบบเลือกหลายรายการ

สำหรับฟิลด์ multi-select คุณต้องกำหนดการแมปกับค่าที่เกี่ยวข้องที่ควรเก็บไว้ใน Customer Insights - Journeys คุณสามารถแมปค่าฟิลด์แบบเลือกหลายรายการของฟอร์มที่มีอยู่ในคุณสมบัติ DataverseFieldValue ได้

ตัวอย่าง:

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

3. กำหนดการแมปฟิลด์ความยินยอม

ฟิลด์การให้ความยินยอมต้องได้รับการกำหนดค่าในโปรแกรมแก้ไขแบบฟอร์มใน Customer Insights - Journeys การแมป DataverseFieldName และ DataverseFieldValue จะถูกสร้างโดยอัตโนมัติตามนั้น

ตัวอย่าง:

<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. ส่งการนำส่งแบบฟอร์มไปยัง Customer Insights - Journeys

เมื่อคุณได้รับการอ้างอิงไปยังแบบฟอร์ม ให้กำหนดการแมป และทำให้แบบฟอร์มเป็นอนุกรม คุณสามารถเพิ่มผู้ฟังเหตุการณ์ให้กับเหตุการณ์ submit และส่งโดยใช้ฟังก์ชั่น d365mktformcapture.submitForm(captureConfig, payload) สิ่งนี้เรียกว่าการส่งคืนคำสัญญา และข้อผิดพลาดจะได้รับการจัดการในตรรกะ catch

สำคัญ

หากคุณได้ตรวจสอบความถูกต้องแบบกำหนดเองหรือ Captcha ตรวจสอบให้แน่ใจว่าคุณนำส่งแบบฟอร์มไปที่ Customer Insights - Journeys เฉพาะในกรณีที่การตรวจสอบความถูกต้องสำเร็จ (ตัวอย่างเช่น ตรวจสอบ isDefaultPrevented ในเหตุการณ์ submit หรือเรียก submitForm อย่างชัดเจนหลังจากผ่านการตรวจสอบความถูกต้องแล้วเท่านั้น)

ตัวอย่าง:

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

กำลังแก้ไขปัญหา

การเรียกไปยังการนำส่งปลายทางล้มเหลวจากข้อผิดพลาด CORS

การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด (CORS) อาจทำให้การบันทึกการส่งแบบฟอร์มล้มเหลว เปิดการใช้งานโดเมนของคุณเพื่อโฮสต์แบบฟอร์มภายนอก เรียนรู้เพิ่มเติมเกี่ยวกับ การตั้งค่าการรับรองความถูกต้องของโดเมน

ค่าการให้ความยินยอมไม่ได้รับการอัปเดตอย่างถูกต้อง

ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าฟิลด์คำยินยอมที่เกี่ยวข้องใน ตัวแก้ไขฟอร์ม (ดู การสร้างการบันทึกฟอร์มในตัวแก้ไขฟอร์ม Customer Insights - Journeys) และคุณได้ใช้การแมปที่ถูกต้องแล้วสำหรับการสร้างในกระบวนการเผยแพร่