Rozšírte odchádzajúce marketingové formuláre pomocou kódu

Článok
09/12/2023

Poznámka

Od 1. septembra 2023 sa aplikácie Dynamics 365 Marketing a Dynamics 365 Customer Insights budú predávať spoločne v rámci jednej skladovej jednotky produktu s názvom Dynamics 365 Customer Insights. Jednotlivé aplikácie sa premenujú na Dynamics 365 Customer Insights – Činnosti a Dynamics 365 Customer Insights – Údaje (v tomto poradí). Ďalšie informácie nájdete v časti Najčastejšie otázky týkajúce sa aplikácie Dynamics 365 Customer Insights

Okrem toho 1. septembra 2023 noví zákazníci využívajúci aplikáciu Dynamics 365 Marketing získajú iba funkcie marketingu v reálnom čase. Ďalšie informácie nájdete v časti Predvolená inštalácia marketingu v reálnom čase. Mnohé stránky s dokumentáciou v súčasnosti odkazujú na funkcie odchádzajúceho marketingu, ktoré nemusia byť dostupné alebo môžu v marketingu v reálnom čase fungovať inak. Obsah dokumentácie bude aktualizovaný v septembri a bude informovať o tom, či sa vzťahuje na marketing v reálnom čase alebo odchádzajúci marketing.

Dôležité

Tento článok sa týka iba outbound marketingu.

Marketingový formulár definuje súbor vstupných polí usporiadaných podľa rozloženia formulára. Pravdepodobne si vybudujete malú knižnicu formulárov na opakované používanie, ktoré budete môcť podľa potreby umiestniť na všetky vaše rôzne marketingové stránky. Ak chcete pridať marketingový formulár do konkrétneho marketingová stránka, použite prvok formulára na umiestnenie formulára a vyberte preň miestne nastavenia, ktoré sa vzťahujú iba na túto stránku. Viac informácií Formuláre outbound marketingu

Odchádzajúce marketingové formuláre môžu byť rozšírené pomocou JavaScriptu na vykonávanie vlastných obchodných akcií v Dynamics 365 Customer Insights - Journeys. Nasledujú metódy, ktoré sú k dispozícii na rozšírenie foriem odchádzajúceho marketingu.

JavaScript API

Používame najnovšiu verziu rozhrania JavaScript API. Uistite sa, že vaše odkazy na skript form-loader.js alebo loader.js vyzerajú ako https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=[version tag] alebo https://mktdplp102cdn.azureedge.net/public/latest/js/loader.js?v=[version tag]. Sekciu ?v=[version tag] možno vynechať. Staršie skripty (skripty, ktoré vyzerajú ako https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/form-loader.js alebo https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/loader.js) sú zastarané a už nie sú podporované.

Umiestnite vlastný kód priamo za skript form-loader.js .

Ukážka kódu:

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

Metódy MsCrmMkt.MsCrmFormLoader

Názov funkcie	Description	Názov parametra	Typ parametra	Popis parametra	Návraty
`.on(eventType,callback)`	Registruje spätné volanie na typ udalosti životného cyklu formulára	`eventType`	`string`, jeden z `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`	Typ udalosti na pripojenie	`undefined`
`callback`	Funkcia spätného volania		`Function`
`.off(eventType)`	Zrušte registráciu spätných volaní danej udalosti životného cyklu formulára	`eventType` voliteľné	`string`, jeden z `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`	Typ udalosti na pripojenie	`undefined`
`.sendFormCaptureToCrm(form)`	Odoslať odoslanie formulára na Dynamics 365 Customer Insights – Cesty, podporované iba pre scenár zachytávania formulárov	`form`	Element DOM predstavujúci formulár alebo selektor JQuery predstavujúci formulár	Element formulára DOM	`Promise<string>`

Udalosti formulárov

Názov udalosti	Spúšťa sa pre zachytené formuláre	Syntax	Description
`formLoad`	Áno	`MsCrmMkt.MsCrmFormLoader` `.on("formLoad", function(event) {})`	Spúšťa sa, keď je zástupný symbol formulára rozpoznaný pred načítaním skutočného obsahu formulára, pre zachytené formuláre sa spúšťa pri rozpoznaní formulára
`formRender`	No	`MsCrmMkt.MsCrmFormLoader` `.on("formRender", function(event) {})`	Spustí sa po načítaní obsahu formulára a pred vložením obsahu formulára na stránku.
`afterFormRender`	No	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormRender", function(event) {})`	Spúšťa sa po vložení obsahu formulára na stránku pred pripojením overovacích háčikov.
`afterFormLoad`	No	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormLoad", function(event) {})`	Spustí sa po vložení obsahu formulára na stránku a po pripojení overovacích háčikov.
`formSubmit`	No	`MsCrmMkt.MsCrmFormLoader` `.on("formSubmit", function(event) {})`	Spúšťa sa pri odoslaní formulára pred odoslaním formulára na server.
`afterFormSubmit`	Áno	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormSubmit", function(event) {})`	Spúšťa sa pri odoslaní formulára po odoslaní formulára na server. Spustí sa iba vtedy, keď je odoslanie úspešné. Spustí sa pred presmerovaním alebo zobrazením potvrdzujúcej správy.

Pre každú udalosť sú k dispozícii nasledujúce metódy:

Názov metódy	Description	Typ vrátenia
`.getType()`	Získa typ udalosti	`string`, jeden z `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`
`.getFormPageId()`	Získa ID stránky formulára – súvisí s `msdyncrm_formpage` jedinečným identifikátorom entity	`string`
`.getFormPlaceholder()`	Získa prvok DOM predstavujúci formulár	Prvok štruktúry DOM
`.preventDefault()`	Zruší odoslanie formulára, platí len pre udalosť typu `formSubmit`	`undefined`
`.preventFormLoadingProgressBar()`	Skryje číselník počas načítavania formulára, platí len pre typ udalosti `formLoad`	`undefined`
`.setFormNotification(function (n) {})`	Prepíše spätné volanie na vykreslenie oznámenia o formulári (ako správa o odoslaní formulára). Bez tela funkcie sa nebudú zobrazovať žiadne upozornenia. Platí len pre udalosť typu `formLoad` .	`undefined`

Formulár zachytávajúci prispôsobenie správania

Snímanie formulára je riadené konfiguračným prvkom, ktorý vyzerá ako <div class="d365-mkt-config" style="display:none" data-website-id="..." data-hostname="...">. Správanie zachytávania formulára môžete zmeniť pridaním nasledujúcich atribútov:

Attribute name	Description
`data-ignore-prevent-default="true"`	Po zadaní bude formulár odoslaný bez ohľadu na skutočnosť, že `.preventDefault()` bol pri udalosti vyvolaný.
`data-no-submit="true"`	Keď je zadaný, skript na zachytávanie formulára nezachytí udalosť odoslania formulára, mali by ste spustiť `MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form)` explicitne. Je to užitočné v prípadoch, keď chcete najskôr odoslať formulár a neskôr synchronizovať s Dynamics 365 Customer Insights - Cesty.

Poznámka

Rozhranie Javascript API je dostupné iba pre formuláre hostené ako skript, nie je podporované pre možnosť hostenia iframe.

Pri používaní portálov pridajte svoj úryvok kódu

Ak chcete pridať kód JavaScript, musíte postupovať podľa nasledujúcich krokov:

Prejdite do aplikácie Customer Insights – Journeys a prejdite na Marketingové stránky.
Vyberte Nové a vytvorte nový marketingová stránka.
Presuňte prvok Formulár z karty Súbor s nástrojmi do Návrhára a vyberte marketingový formulár, ktorý chcete použiť.
Prepnite na kartu HTML a svoj úryvok kódu.
Vyberte Uložiť na uloženie zmien a potom vyberte Vysielať naživo.

Pridajte svoj úryvok kódu, keď používate svoj vlastný CMS a hosting formulárov

Ak chcete pridať úryvok kódu, musíte postupovať podľa nasledujúcich krokov:

Prejdite do aplikácie Customer Insights – Journeys a prejdite na Marketingové formuláre v Outbound marketing oblasť
Ak chcete vytvoriť nový marketingový formulár, vyberte možnosť Nový .
Vyberte Vysielať naživo.
Vyberte kartu Hostenie formulára a v časti Dostupné domény pre hosťovanie formulára vyberte doménu, ak je k dispozícii, alebo vyberte + Vytvoriť novú doménu.
Pridajte svoju vlastnú doménu CMS a vyberte Uložiť.
Na karte Od hosťovania na karte Súvisiace stránky marketingových formulárov vyberte ... a + Nová stránka formulára na pridanie stránky marketingového formulára.
Vyberte položku Uložiť.
Teraz vyberte stránku formulára, ktorú ste vytvorili, a skopírujte skript do schránky.
Teraz vo svojom CMS upravte stránku, na ktorú chcete vložiť formulár, pridajte svoje prispôsobenia a skript.

Príklady

Overenie vzorky – skontroluje, či je textové pole buď Fabricam alebo Contoso, inak zabráni odoslaniu formulára.

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

Vyplnenie parametrov vstupného reťazca dotazu do skrytých polí.

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

Lokalizácia formulára (výberový zoznam) – Na lokalizáciu formulárov odchádzajúceho marketingu môžete použiť rozšíriteľnosť na strane klienta. Lokalizácia musí nastať po načítaní formulára (afterFormLoad udalosť). Do marketingová stránka (alebo do CMS, kde hosťujete formulár) pridajte nasledujúci lokalizačný skript:

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

V marketingovom formulári sa uistite, že máte pripravené preklady. Upravte marketingový formulár v návrhárovi HTML, naformátujte ho (kliknite pravým tlačidlom myši v návrhárovi, vyberte formát) a pridajte potrebné preklady.

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

Zdieľať cez