Кодты пайдаланып шығыс маркетинг пішіндерін кеңейтіңіз

Мақала
09/11/2023

Ескертпе

2023 жылдың 1 қыркүйегінде Dynamics 365 Marketing және Dynamics 365 Customer Insights бір өнім SKU деп аталатын бірге сатылады Dynamics 365 Customer Insights. Жеке қолданбалардың атауы тиісінше Dynamics 365 Customer Insights - Саяхаттар және Dynamics 365 Customer Insights - Деректер деп өзгертіледі. Қосымша ақпаратты Dynamics 365 Customer Insights ЖҚС қараңыз

Сонымен қатар, 2023 жылдың 1 қыркүйегінде жаңа Dynamics 365 Marketing тұтынушылары нақты уақыттағы маркетинг мүмкіндіктерін ғана алады. Қосымша ақпарат алу үшін Әдепкі нақты уақыттағы маркетинг орнатуын қараңыз. Көптеген құжаттама беттері қазіргі уақытта қол жетімді болмауы мүмкін немесе нақты уақыттағы маркетингте басқаша жұмыс істеуі мүмкін шығыс мүмкіндіктерге сілтеме жасайды. Құжаттама мазмұны оның нақты уақыттағы немесе шығыс маркетингке қатысты екенін ескеру үшін қыркүйек айында жаңартылады.

Маңызды

Бұл мақала тек шығыс маркетингіне қатысты.

Маркетинг пішіні пішін орналасуына реттелген енгізу өрістерінің жинағын анықтайды. Қажет болған жағдайда барлық түрлі маркетингтік беттеріңізге орналастыруға болатын қайта пайдалануға болатын пішіндердің шағын кітапханасын жасауыңыз мүмкін. Арнайы маркетинг беті ішіне маркетинг пішінін қосу үшін пішінді орналастыру үшін пішін элементін пайдаланыңыз және оған тек сол бетке қолданылатын жергілікті параметрлерді таңдаңыз. Қосымша ақпарат Шығыс маркетинг формалары

Шығыс маркетинг пішіндерін Dynamics 365 Customer Insights - Саяхаттарда реттелетін іскери әрекеттерді орындау үшін JavaScript арқылы кеңейтуге болады. Төменде шығыс маркетинг формаларын кеңейту үшін қолжетімді әдістер берілген.

JavaScript API

Біз JavaScript API соңғы нұсқасын қолданып жатырмыз. form-loader.js немесе loader.js скриптке сілтемелеріңіз сәйкесінше 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] сияқты көрінетініне көз жеткізіңіз. ?v=[version tag] бөлімін өткізіп жіберуге болады. Ескі сценарийлер ( https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/form-loader.js немесе https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/loader.js ұқсайтын сценарийлер) ескірген және оларға енді қолдау көрсетілмейді.

Теңшелетін кодты тікелей form-loader.js скрипттен кейін орналастырыңыз.

Код үлгісі:

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

MsCrmMkt.MsCrmFormLoader әдістері

Функция атауы	Сипаттама	Параметр атауы	Параметр түрі	Параметр сипаттамасы	Қайтару
`.on(eventType,callback)`	Пішіннің өмірлік циклінің оқиғасының түріне кері қоңырауды тіркейді	`eventType`	`string`, бірі `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`	Байланысқан оқиға түрі	`undefined`
`callback`	Кері шақыру функциясы		`Function`
`.off(eventType)`	Берілген пішіннің өмірлік циклінің оқиғасының кері шақыруларын тіркеуден шығарыңыз	`eventType` міндетті емес	`string`, бірі `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`	Байланысқан оқиға түрі	`undefined`
`.sendFormCaptureToCrm(form)`	Пішін жіберуді Dynamics 365 Customer Insights - Саяхаттарға жіберу, тек пішінді түсіру сценарийі үшін қолдау көрсетіледі.	`form`	Пішінді білдіретін DOM элементі немесе пішінді көрсететін JQuery селекторы	Пішін DOM элементі	`Promise<string>`

Оқиғаларды қалыптастыру

Оқиға атауы	Түсірілген пішіндер үшін іске қосылған	Синтаксис	Сипаттама
`formLoad`	Иә	`MsCrmMkt.MsCrmFormLoader` `.on("formLoad", function(event) {})`	Пішін толтырғышы нақты пішін мазмұны алынбай тұрып танылған кезде іске қосады, түсірілген пішіндер үшін пішін танылған кезде триггерлер
`formRender`	No	`MsCrmMkt.MsCrmFormLoader` `.on("formRender", function(event) {})`	Пішін мазмұны алынғаннан кейін және пішін мазмұны бетке енгізілгенге дейін триггерлер.
`afterFormRender`	No	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormRender", function(event) {})`	Тексеру ілмектері тіркелгенге дейін пішін мазмұны бетке енгізілгеннен кейін триггерлер.
`afterFormLoad`	No	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormLoad", function(event) {})`	Пішін мазмұны бетке енгізілгеннен кейін және тексеру ілмектері тіркелгеннен кейін триггерлер.
`formSubmit`	No	`MsCrmMkt.MsCrmFormLoader` `.on("formSubmit", function(event) {})`	Пішіндегі триггерлер пішін жіберу серверге жіберілмес бұрын жіберіледі.
`afterFormSubmit`	Иә	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormSubmit", function(event) {})`	Пішіндегі триггерлер пішін жіберу серверге жіберілгеннен кейін жіберіледі. Ол жіберу сәтті болған кезде ғана іске қосылады. Ол қайта бағыттау немесе растау хабарын көрсету алдында іске қосылады.

Әрбір оқиғаға кері қоңырау шалу үшін келесі әдістер қолжетімді:

Әдіс атауы	Сипаттама	Қайтару түрі
`.getType()`	Оқиға түрін алады	`string`, бірі `"afterFormLoad"`, `"afterFormRender"`, `"afterFormSubmit"`, `"formLoad"`, `"formRender"`, `"formSubmit"`
`.getFormPageId()`	Пішін бетінің идентификаторын алады - бұл `msdyncrm_formpage` нысанның бірегей идентификаторына қатысты	`string`
`.getFormPlaceholder()`	Пішінді білдіретін DOM элементін алады	DOM элементі
`.preventDefault()`	Тек `formSubmit` түріндегі оқиға үшін жарамды пішінді жіберуден бас тартады	`undefined`
`.preventFormLoadingProgressBar()`	Пішін жүктеліп жатқанда спиннерді жасырады, тек `formLoad` түрі үшін жарамды	`undefined`
`.setFormNotification(function (n) {})`	Пішін хабарландыруын көрсету үшін кері қоңырауды қайта анықтайды (пішінді жіберу хабары сияқты). Функция денесі болмаса, ешқандай хабарландырулар көрсетілмейді. Тек `formLoad` түріндегі оқиға үшін жарамды.	`undefined`

Пішін түсіру әрекетін теңшеу

Пішін түсіру <div class="d365-mkt-config" style="display:none" data-website-id="..." data-hostname="..."> сияқты көрінетін конфигурация элементі арқылы басқарылады. Келесі атрибуттарды қосу арқылы пішінді түсіру әрекетін өзгертуге болады:

Атрибут атауы Сипаттама

data-ignore-prevent-default="true" Көрсетілген кезде, пішін оқиғада .preventDefault() шақырылғанына қарамастан жіберіледі.

data-no-submit="true" Көрсетілген кезде, пішінді түсіру сценарийі пішінді жіберу оқиғасын түсірмейді, сіз MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form) нақты түрде іске қосуыңыз керек. Бұл алдымен пішінді жіберуді және Dynamics 365 Customer Insights - Саяхаттарды кейінірек синхрондауды қажет ететін жағдайларда пайдалы.

Атрибут атауы	Сипаттама
`data-ignore-prevent-default="true"`	Көрсетілген кезде, пішін оқиғада `.preventDefault()` шақырылғанына қарамастан жіберіледі.
`data-no-submit="true"`	Көрсетілген кезде, пішінді түсіру сценарийі пішінді жіберу оқиғасын түсірмейді, сіз `MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form)` нақты түрде іске қосуыңыз керек. Бұл алдымен пішінді жіберуді және Dynamics 365 Customer Insights - Саяхаттарды кейінірек синхрондауды қажет ететін жағдайларда пайдалы.

Ескертпе

Javascript API тек сценарий ретінде орналастырылған пішіндер үшін қол жетімді, оған iframe хостинг опциясы үшін қолдау көрсетілмейді.

Порталдарды пайдалану кезінде код үзіндісі қосыңыз

JavaScript кодын қосу үшін төмендегі қадамдарды орындау керек:

Customer Insights - Journeys қолданбасына өтіп, Маркетинг беттеріне өтіңіз.
Жаңа маркетинг беті жасау үшін Жаңа пәрменін таңдаңыз.
Пішін элементін Құралдар жинағы қойындысынан Дизайншы ішіне сүйреп апарыңыз. қойындысын ашып, пайдаланғыңыз келетін маркетинг пішінін таңдаңыз.
HTML қойындысына және код үзіндісі файлына ауысыңыз.
Өзгерістерді сақтау үшін Сақтау , содан кейін Тікелей эфирге өту опциясын таңдаңыз.

Жеке CMS және пішін хостингін пайдаланған кезде код үзіндісі қосыңыз

код үзіндісі қосу үшін төмендегі қадамдарды орындау керек:

Customer Insights - Journeys қолданбасына өтіп, ішіндегі Маркетинг пішіндері тармағына өтіңіз. Шығыс маркетинг аймақ
Жаңа маркетинг пішінін жасау үшін Жаңа пәрменін таңдаңыз.
Тікелей эфирге өту таңдаңыз.
Пішін хостингі қойындысын таңдаңыз және Пішін хостингіне арналған қолжетімді домендер астында домен бар болса, таңдаңыз, немесе + Жаңа домен жасау таңдаңыз.
Жеке CMS доменін қосыңыз және Сақтау таңдаңыз.
Хостингтен қойындысындағы Қатысты маркетинг пішіні беттері қойындысынан таңдаңыз. ... және + Жаңа пішін беті маркетингтік пішін бетін қосу үшін.
Сақтау опциясын таңдаңыз.
Енді сіз жасаған пішін бетін таңдап, сценарийді алмасу буферіне көшіріңіз.
Енді CMS жүйесінде пішінді қосқыңыз келетін бетті өңдеңіз, теңшеулер мен сценарийді қосыңыз.

Мысалдар

Үлгіні тексеру - мәтіндік жәшіктің Fabricam немесе Contoso екенін тексереді, әйтпесе пішінді жіберуді болдырмайды.

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

Жасырын өрістерге кіріс сұрау жолының параметрлерін толтыру.

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

Пішінді локализациялау (таңдау тізімі) - Шығыс маркетинг пішіндерін локализациялау үшін клиенттік кеңейтімді пайдалануға болады. Локализация пішін жүктелгеннен кейін болуы керек (afterFormLoad оқиға). маркетинг беті ішіне (немесе пішінді орналастыратын CMS жүйесінде) келесі локализация сценарийін қосыңыз:

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

Маркетингтік формада аудармаларды дайындағаныңызға көз жеткізіңіз. HTML дизайнеріндегі маркетинг пішінін өңдеңіз, оны пішімдеңіз (дизайнерде тінтуірдің оң жақ түймешігімен басыңыз, содан кейін пішім таңдаңыз) және қажетті аудармаларды қосыңыз.

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

Бөлісу құралы: