Perluas Wawasan Pelanggan - Formulir pemasaran Perjalanan menggunakan kode

Catatan

Pada tanggal 1 September 2023, Dynamics 365 Marketing dan Dynamics 365 Customer Insights akan dijual bersama dalam satu SKU produk bernama Dynamics 365 Customer Insights. Aplikasi individual akan diubah namanya menjadi Dynamics 365 Customer Insights - Perjalanan dan Dynamics 365 Customer Insights - Data. Untuk informasi selengkapnya, lihat Tanya Jawab Umum Dynamics 365 Customer Insights

Selain itu, pada 1 September 2023, pelanggan Dynamics 365 Marketing baru hanya akan menerima fitur pemasaran real-time. Untuk informasi selengkapnya, lihat Penginstalan pemasaran real-time default. Banyak halaman dokumentasi saat ini mengacu pada fitur keluar yang mungkin tidak tersedia atau mungkin berfungsi dalam cara yang berbeda dalam pemasaran real-time. Konten dokumentasi akan diperbarui pada bulan September untuk menunjukkan apakah konten tersebut berlaku untuk pemasaran real-time atau pemasaran keluar.

Artikel ini menjelaskan cara memperluas formulir pemasaran Customer Insights - Journeys untuk penyesuaian tingkat lanjut.

JavaScript API

Customer Insights - Formulir pemasaran Journeys terdiri dari dua bagian:

1. Tempat penampung formulir, yang terlihat mirip dengan ini:

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

2. Dan pemuat formulir, yang menyalakan placeholder formulir setelah halaman dimuat (peristiwaDOMContentLoaded dipicu):

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

Aktivitas kustom

Aktivitas kustom	Description
d365mkt-beforeformload	Dipicu saat tempat penampung formulir dikenali sebelum konten formulir aktual diambil.
d365mkt-formrender	Dipicu setelah konten formulir diambil dan langsung sebelum disuntikkan ke tempat penampung formulir.
d365mkt-afterformload	Dipicu setelah formulir disuntikkan ke placeholder.
d365mkt-formsubmit	Dipicu saat formulir dikirimkan, dapat dibatalkan.
d365mkt-afterformsubmit	Dipicu setelah formulir dikirimkan

Form submit - d365mkt-formsubmit detail properti objek

Nama	Tipe	Desripsi
Payload	Objek	Kamus dengan properti formulir untuk dikirim ke server

Setelah pengiriman formulir - d365mkt-afterformsubmit detail properti objek

Nama	Tipe	Desripsi
Sukses	Boolean	Menunjukkan apakah server menerima pengiriman atau jika pengiriman ditolak
Payload	Objek	Kamus dengan properti formulir saat dikirim ke server

Anda dapat melampirkan peristiwa kustom menggunakan mekanisme lampiran peristiwa standar:

Kode Sampel

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

Kustomisasi perilaku formulir

Anda dapat menyesuaikan perilaku formulir dengan menyertakan skrip konfigurasi sebelum skrip loader disuntikkan ke halaman.

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

Merender formulir pemasaran menggunakan API JavaScript

Menunggu DOMContentLoaded bisa merepotkan, terutama untuk skenario seperti pemuatan konten dinamis. Untuk situasi ini, Anda dapat menggunakan createForm fungsi pembantu. createForm segera mengembalikan div elemen DOM, yang memicu pengambilan konten formulir di latar belakang (formulir disuntikkan ke placeholder saat diambil).

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

Menyuntikkan formulir pemasaran ke dalam aplikasi React

Anda dapat menggunakan formulir pemasaran dalam aplikasi React. Form loader mengekspos d365mktforms.FormPlaceholder komponen React, yang dapat Anda suntikkan ke dalam aplikasi Anda.

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

Catatan

Anda harus mengganti {msdynmkt_marketingformid} dengan pengidentifikasi aktual entitas formulir pemasaran dan {organizationid} dengan pengidentifikasi aktual organisasi Anda. {server-} harus menunjuk ke titik akhir server untuk organisasi Anda. Cara termudah untuk mengambil informasi yang Anda butuhkan adalah dengan perintah "Dapatkan Kode Javascript" dari opsi publikasi formulir.

Widget atribut	Properti komponen React
data-formulir-id	formId
data-form-api-url	formApiBaseUrl
data-cached-form-url	formUrl

Catatan

API Javascript hanya tersedia untuk formulir yang dihosting sebagai skrip. Ini tidak didukung untuk iFrame opsi hosting.