Perluas formulir pemasaran keluar menggunakan kode

Artikel
09/11/2023

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.

Penting

Artikel ini hanya berlaku untuk pemasaran keluar.

Formulir pemasaran menentukan rangkaian bidang input yang diatur ke tata letak formulir. Anda mungkin akan membangun pustaka kecil formulir yang dapat digunakan kembali, yang dapat Anda tempatkan di beragam halaman pemasaran sesuai keperluan. Untuk menambahkan formulir pemasaran ke halaman pemasaran tertentu, gunakan elemen formulir untuk memosisikan formulir, dan pilih pengaturan lokal untuknya, yang hanya berlaku untuk halaman tersebut. Informasi teknis Formulir pemasaran keluar

Formulir pemasaran keluar dapat diperluas menggunakan JavaScript untuk melakukan tindakan bisnis khusus dalam Perjalanan. Dynamics 365 Customer Insights Berikut ini adalah metode yang tersedia untuk memperluas formulir pemasaran keluar.

JavaScript API

Kami menggunakan versi terbaru JavaScript API. Pastikan referensi form-loader.js atau skrip Anda terlihat seperti loader.js atau https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=[version tag]https://mktdplp102cdn.azureedge.net/public/latest/js/loader.js?v=[version tag], masing-masing. Bagian ini ?v=[version tag] dapat dihilangkan. Skrip lama (skrip yang terlihat seperti https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/form-loader.js atau https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/loader.js) sudah usang dan tidak lagi didukung.

Tempatkan kode kustom langsung setelah form-loader.js skrip.

Contoh kode:

<script src="https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=..."></script>
<script>
// correct - the script will attach event handlers right after form loader script
MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function() {});

// wrong - the script will attach event handlers after window has finished loading, form already might have been loaded in the meantime and no events will trigger anymore
// window.onload = function() { MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function() {}); };
</script>

Metode MsCrmMkt.MsCrmFormLoader

Nama Fungsi	Description	Nama Parameter	Jenis parameter	Deskripsi Parameter	Kembali
`.on(eventType,callback)`	Mendaftarkan callback ke jenis peristiwa siklus hidup formulir	`eventType`	`string`, salah satu `"afterFormLoad"`,,,, `"afterFormRender""afterFormSubmit""formLoad"`, `"formRender""formSubmit"`	Jenis acara untuk dihubungkan	`undefined`
`callback`	Fungsi panggilan balik		`Function`
`.off(eventType)`	Batalkan pendaftaran callback dari peristiwa siklus hidup formulir tertentu	`eventType` fakultatif	`string`, salah satu `"afterFormLoad"`,,,, `"afterFormRender""afterFormSubmit""formLoad"`, `"formRender""formSubmit"`	Jenis acara untuk dihubungkan	`undefined`
`.sendFormCaptureToCrm(form)`	Kirim tanggapan formulir ke Dynamics 365 Customer Insights - Perjalanan, hanya didukung untuk skenario pengambilan formulir	`form`	Elemen DOM mewakili formulir atau pemilih JQuery yang mewakili formulir	Bentuk elemen DOM	`Promise<string>`

Bentuk acara

Nama Acara	Dipicu untuk formulir yang diambil	Sintaks	Description
`formLoad`	Ya	`MsCrmMkt.MsCrmFormLoader` `.on("formLoad", function(event) {})`	Pemicu saat tempat penampung formulir dikenali sebelum konten formulir aktual diambil, untuk formulir yang diambil dipicu saat formulir dikenali
`formRender`	No	`MsCrmMkt.MsCrmFormLoader` `.on("formRender", function(event) {})`	Pemicu setelah konten formulir diambil dan sebelum konten formulir disuntikkan ke halaman.
`afterFormRender`	No	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormRender", function(event) {})`	Pemicu setelah konten formulir disuntikkan ke halaman sebelum kait validasi dipasang.
`afterFormLoad`	No	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormLoad", function(event) {})`	Pemicu setelah konten formulir disuntikkan ke halaman dan setelah kait validasi dilampirkan.
`formSubmit`	No	`MsCrmMkt.MsCrmFormLoader` `.on("formSubmit", function(event) {})`	Pemicu pada pengiriman formulir sebelum pengiriman formulir dikirim ke server.
`afterFormSubmit`	Ya	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormSubmit", function(event) {})`	Pemicu pada pengiriman formulir setelah pengiriman formulir dikirim ke server. Ini memicu hanya ketika pengiriman berhasil. Ini memicu sebelum pengalihan atau menampilkan pesan konfirmasi.

Untuk setiap callback acara, metode berikut tersedia:

Nama Metode	Description	Jenis Pengembalian
`.getType()`	Mendapatkan jenis acara	`string`, salah satu `"afterFormLoad"`,,,, `"afterFormRender""afterFormSubmit""formLoad"`, `"formRender""formSubmit"`
`.getFormPageId()`	Mendapatkan ID halaman formulir - ini berkaitan dengan `msdyncrm_formpage` pengidentifikasi unik entitas	`string`
`.getFormPlaceholder()`	Mendapatkan elemen DOM yang mewakili formulir	Elemen DOM
`.preventDefault()`	Membatalkan pengiriman formulir, hanya berlaku untuk jenis formulir `formSubmit`	`undefined`
`.preventFormLoadingProgressBar()`	Menyembunyikan pemintal saat formulir sedang dimuat, hanya berlaku untuk jenis acara `formLoad`	`undefined`
`.setFormNotification(function (n) {})`	Mengganti callback untuk merender notifikasi formulir (seperti pesan pengiriman formulir). Tanpa badan fungsi, tidak ada pemberitahuan yang akan diberikan. Hanya berlaku untuk jenis acara `formLoad` .	`undefined`

Kustomisasi perilaku pengambilan formulir

Pengambilan formulir diarahkan oleh elemen konfigurasi yang terlihat seperti <div class="d365-mkt-config" style="display:none" data-website-id="..." data-hostname="...">. Anda dapat mengubah perilaku pengambilan formulir dengan menambahkan atribut berikut:

Nama atribut	Description
`data-ignore-prevent-default="true"`	Ketika ditentukan, formulir akan diserahkan terlepas dari fakta yang `.preventDefault()` dipanggil pada acara tersebut.
`data-no-submit="true"`	Saat ditentukan, skrip pengambilan formulir tidak akan menangkap peristiwa pengiriman formulir, Anda harus memicu secara `MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form)` eksplisit. Ini berguna untuk kasus-kasus ketika Anda ingin melakukan pengiriman formulir terlebih dahulu dan menyinkronkan ke Dynamics 365 Customer Insights - Perjalanan nanti.

Catatan

API Javascript hanya tersedia untuk formulir yang dihosting sebagai skrip, tidak didukung untuk opsi hosting iframe.

Menambahkan cuplikan kode Anda saat menggunakan portal

Untuk menambahkan kode JavaScript, Anda harus mengikuti langkah-langkah di bawah ini:

Buka aplikasi Customer Insights - Journeys dan buka halaman Pemasaran.
Pilih Baru untuk membuat halaman pemasaran baru.
Seret dan letakkan elemen Formulir dari tab Toolbox ke tab Desainer dan pilih formulir pemasaran yang ingin Anda gunakan.
Beralih ke tab HTML dan cuplikan kode Anda.
Pilih Simpan untuk menyimpan perubahan, lalu pilih Tayangkan.

Tambahkan cuplikan kode Anda saat menggunakan CMS dan hosting formulir Anda sendiri

Untuk menambahkan cuplikan kode, Anda harus mengikuti langkah-langkah di bawah ini:

Buka aplikasi Customer Insights - Journeys dan buka Formulir pemasaran di area pemasaran Keluar
Pilih Baru untuk membuat formulir pemasaran baru.
Pilih Tayangkan.
Pilih tab Hosting formulir dan di bawah domain yang tersedia untuk hosting formulir, pilih domain jika tersedia, atau pilih + Buat domain baru.
Tambahkan domain CMS Anda sendiri dan pilih Simpan.
Di tab Dari hosting , di bawah tab Halaman formulir pemasaran terkait, pilih ... dan + Halaman Formulir Baru untuk menambahkan halaman formulir pemasaran.
Pilih Simpan.
Sekarang pilih halaman formulir yang telah Anda buat dan salin skrip ke clipboard.
Sekarang di CMS Anda, edit halaman tempat Anda ingin menyertakan formulir, tambahkan penyesuaian dan skrip Anda.

Contoh

Validasi sampel - memeriksa apakah kotak teks adalah Fabricam atau Contoso, jika tidak mencegah pengiriman formulir.

MsCrmMkt.MsCrmFormLoader.on('formSubmit', function(event) {
  // sample validation - check if 
  document.getElementById('txt-company-name-message').style.visibility = 'hidden';
  var companyName = document.getElementById('txt-company-name').value;
  if (companyName !== 'Fabricam' && companyName != 'Contoso') 
  {
    document.getElementById('txt-company-name-message').style.visibility = 'visible';
    event.preventDefault();
  }
});

Mengisi parameter string kueri masuk ke bidang tersembunyi.

MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function(event) {
  var self = window.location.toString();
  var queryString = self.split("?");
  var hiddenFields = document.querySelectorAll("input[type=hidden]");
  if (queryString.length > 1) 
  {
    var pairs = queryString[1].split("&");
    for (var pairIndex in pairs) 
    {
      var pair = pairs[pairIndex].split("=");
      if (pair.length !== 2) 
      {
        continue;
      }
      var key = pair[0];
      var value = pair[1];
      if (key && value) 
      {
        for (var i = 0; i < hiddenFields.length; i++) 
        {
          if (hiddenFields[i].id === key) 
          {
            hiddenFields[i].value = value;
          }
        }
      }
    }
  }
});

Melokalkan formulir (daftar pilihan) - Anda dapat menggunakan ekstensibilitas sisi klien untuk melokalkan formulir pemasaran keluar. Pelokalan harus terjadi setelah formulir dimuat (afterFormLoad peristiwa). Di dalam halaman pemasaran (atau di CMS tempat Anda menghosting formulir), tambahkan skrip pelokalan berikut:

<script>
function translatePicklists(lcid) 
{
    var picklists = document.querySelectorAll("select");
    for(var i = 0; i < picklists.length; i++) 
    {
        var picklist = picklists[i];
        var relatedDatalist = document.getElementById("localize-" + picklist.name + "-" + lcid.toString());
        if (relatedDatalist) 
        {
            for(var j = 0; j < picklist.options.length; j++) 
            {
                if (j >= relatedDatalist.options.length) 
                {
                    break;
                }
                picklist.options[j].text = relatedDatalist.options[j].text;
            }
        }
    }
}
MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function(event) { translatePicklists(1029); });
</script>

Dalam formulir pemasaran, pastikan Anda telah menyiapkan terjemahannya. Edit formulir pemasaran di desainer HTML, format (klik kanan di desainer, lalu pilih format), dan tambahkan terjemahan yang diperlukan.

<div data-editorblocktype="Field-dropdown">
    <div class="marketing-field">
        <div class="lp-form-field" data-required-field="false">
            <label for="f7ae1a98-0d83-4592-afe0-272c85ce607d" class="lp-ellipsis" title="">Marital status</label>
            <select id="f7ae1a98-0d83-4592-afe0-272c85ce607d" name="f7ae1a98-0d83-4592-afe0-272c85ce607d" class="lp-form-fieldInput" title="" style="width: 100%; box-sizing: border-box;">
              <option value=""></option>
              <option value="1">Single</option>
              <option value="2">Married</option>
              <option value="3">Divorced</option>
              <option value="4">Widowed</option>
            </select>
        </div>
    </div>
</div>
<!-- format is localize-fieldid-lcid -->
<datalist id="localize-f7ae1a98-0d83-4592-afe0-272c85ce607d-1029">
    <option></option>
    <option>Svobodny(a)</option>
    <option>Zenaty(a)</option>
    <option>Rozvedeny(a)</option>
    <option>Vdovec(vdova)</option>
</datalist>

Bagikan melalui