Связать лендинг с Creatio

После того как вы разместили посадочную страницу на вашем сайте, выполните следующие действия:

1. Добавьте новую запись в разделе Лендинги и web-формы. 
2. Настройте страницу переадресации клиентов. 
3. Отредактируйте полученный уникальный HTML-код. 
4. Настройте передачу справочных и нестандартных полей.
5. Разместите уникальный HTML-код в коде посадочной страницы. 
6. Настройте автоматическое заполнение полей лида (или другого объекта системы), которые не заполняются клиентом. 

Добавить новую запись в разделе Лендинги и web-формы 

1. Перейдите в раздел Лендинги и web-формы, нажмите кнопку Добавить и выберите форму объекта, который хотите регистрировать в системе, например, форму регистрации лида (Рис. 1).

   Рис. 1 — Создание нового лендинга

   

2. На открывшейся странице заполните поля:

   1. Название — заголовок лендинга в Creatio.

   2. Домены сайта — URL посадочной страницы. В поле можно указать один или несколько адресов через запятую. Если к URL-адресу в конце добавить "*", то в Creatio будут учитываться все контакты и лиды, зарегистрированные на данном домене, а не только на определенной странице.

      Рис. 2 — Пример заполнения страницы лендинга

      
   3. Описание — дополнительная информация о лендинге.
   4. Создавать контакт — установите этот признак, чтобы при заполнении клиентом формы на посадочной странице в Creatio автоматически создавался не только лид, но и контакт.
   5. Выберите бизнес-процесс для определения контакта в поле Процесс поиска контакта.
   6. Адрес перехода — URL страницы, на которую переходит клиент после регистрации на посадочной странице.

3. Нажмите кнопку Сохранить.

Настроить страницу для переадресации клиентов 

Вы можете выполнить в Creatio настройку, чтобы посетитель вашего сайта после заполнения формы был автоматически перенаправлен на определенную страницу, например, на страницу благодарности. Для этого на вкладке Настройка лендинга в поле Адрес перехода введите ссылку страницы переадресации, например, http://mysite.com/submit/thank-you-page. В результате в HTML-коде, встраиваемом на вашу посадочную страницу, будет использоваться указанный адрес страницы перехода, например:

redirectUrl: “http://mysite.com/submit/thank-you-page”

Отредактировать уникальный HTML-код 

Для корректного заполнения полей лида, созданного после регистрации на посадочной странице, необходимо отредактировать уникальный HTML-код, а затем — разместить его в коде посадочной страницы.

Перечень полей страницы лида, которые заполняются после регистрации клиента на посадочной странице, содержится в блоке “fields” HTML-кода. В этом блоке необходимо настроить соответствие полей веб-формы и страницы лида. Пример такого блока представлен ниже.

fields: {

"Name": "css-selector", // Name of a visitor, submitting the page

"Email": "css-selector", // Visitor's email

"Zip": "css-selector", // Visitor's ZIP code

"MobilePhone": "css-selector", // Visitor's phone number

"Company": "css-selector", // Name of a company (for business landing pages)

"Industry": "css-selector", // Company industry (for business landing pages)

"FullJobTitle": "css-selector", // Visitor's job title (for business landing pages)

"UseEmail": "css-selector" // Logical value: 'true' equals to visitor's opt-in to receive emails 
}

Для корректной регистрации лида, HTML-код на посадочной странице должен содержать хотя бы одно поле из блока “contactFields”. Пример такого блока представлен ниже.

contactFields: {
        "FullName": "css-selector", // Name of a contact
        "Phone": "css-selector", // Contact's mobile phone
        "Email": "css-selector" // Contact's email
}

Выбрать поля для передачи в лид 

Вы можете настроить соответствие полей как для стандартных полей лида, так и для пользовательских. Настройка передачи на страницу лида справочных и нестандартных полей описана в отдельном блоке.

Ниже приведены значения стандартных полей из HTML-кода и соответствующие им поля на странице лида:

• “Name” —> ФИО контакта.
• “Email” —> Email, заполняется электронным адресом клиента.
• “Zip” —> Индекс.
• “MobilePhone” —> Мобильный телефон.
• “Company” —> Название контрагента.
• “Industry” —> Отрасль.
• “FullJobTitle” —> Должность.

• “EventId” —> Мероприятие . Если уникальный идентификатор мероприятия указан в коде страницы, то он будет иметь приоритет перед настроенными в записи лендинга значениями по умолчанию. 

• “UseEmail” —> чек-бокс для подтверждения клиентом согласия на получение маркетинговых материалов.

Поля, которые не используются в веб-форме лендинга, можно удалить из HTML-кода при настройке соответствия полей веб-формы и страницы лида.

Настроить соответствие полей веб-формы и страницы лида 

Для заполнения страницы лида замените выражение “css-selector” на id либо class соответствующего поля в форме лендинга:

1. Скопируйте уникальный HTML-код в любой текстовый редактор.
2. Замените выражение “css-selector” в полученном коде на название селектора, который содержится на посадочной странице. В разных браузерах процедура вызова исходного кода страницы различается. Рассмотрим пример настройки заполнения поля ФИО в браузере Chrome.
   1. Перейдите на посадочную страницу и отобразите исходный код страницы (Рис. 3).
      Рис. 3 — Отображение посадочной страницы с исходным кодом

      
   2. В области исходного кода страницы нажмите на иконку (Рис. 4).
      Рис. 4 — Выбор элемента кода на странице

      
   3. Нажмите на поле ФИО посадочной страницы (Рис. 5).
      Рис. 5 — Выбор элемента для просмотра кода

      

       В области исходного кода страницы выделится часть кода, соответствующая выбранному полю (Рис. 6).

      Рис. 6 — Выделенный фрагмент кода, соответствующий выбранному полю ФИО

      
   4. Скопируйте значение, которое содержится в параметре “id” исходного кода посадочной страницы (Рис. 7).
      Рис. 7 — Копирование значения параметра “id” исходного кода посадочной страницы

      
   5. Замените “css-selector” значения Name в уникальном коде:

      fields: {
      
      "Name": "#edit-ts-form-name", // Name of a visitor, submitting the page
      
      "Email": "css-selector", // Visitor's email
      
      "Zip": "css-selector", // Visitor's ZIP code 
      }

      Важно. Используйте значения параметров id или class для замены “css-selector”. Если для замены “css-selector” используется значение параметра “id”, то перед значением необходимо поставить #. Например, #edit-ts-form-name.

3. Аналогичным образом замените “css-selector” других полей, которые используются в форме.

   На заметку. Если поле, указанное в HTML-коде, не используется на посадочной странице, то удалите его.

Рекомендации по настройке соответствия полей 

• С одним полем формы может быть сопоставлено несколько полей в Creatio. Например, значением, которое клиент укажет в поле “ФИО” вашей формы, могут быть заполнены поля ФИО (данные контакта) и Название (данные контрагента) на странице лида в Creatio.
• Для одного поля лида в Creatio можно настроить соответствие только одному полю вашей формы. Не следует настраивать заполнение поля лида одновременно из двух полей вашей формы, т.к. в этом случае на странице лида данные из одного поля будут перезаписаны данными другого поля.
• Рекомендуем, чтобы сопоставляемые поля формы и страницы лида имели один и тот же тип и формат. Но в случае, если в справочном поле будет найдено значение, введенное клиентом в поле другого формата, поле будет заполнено. Например, если в вашей форме поле “Страна” имеет текстовый формат и клиент ввел значение “Украина”, которое содержится в справочнике стран в Creatio, то справочное поле Страна на странице лида будет заполнено. Кроме того, для заполнения полей лида Страна, Область/штат и Город настроена дополнительная логика: если в Creatio не будут найдены введенные клиентом значения этих полей, то они сохранятся в дополнительных полях текстового формата в объекте лида.
• Рекомендуем при работе со справочными полями передавать в лид уникальный код, поскольку название не идентифицирует запись и может являться не уникальным в рамках системы. Если у пользователя установлен другой язык интерфейса (культура), то в случае передачи названия в системе будет создана новая запись, в большинстве случаев являющаяся дублем существующей.
• Вы можете использовать для справочных полей с локализируемыми названиями радиокнопки или выпадающие списки в качестве элемента взаимодействия пользователя с системой, сохраняя в значениях уникальные коды записей системы (Id). Подробнее: Настроить передачу справочных и нестандартных полей.
• Рекомендуем при работе с полями даты и времени (тип данных “DATETIME”) использовать формат передачи данных с указанием часового пояса. Например, чтобы передать значения в часовом поясе UTC-1, используйте формат 4/12/2008 9:30:00 AM -01:00, а в часовом поясе UTC — 4/12/2008 9:30:00 AM +00:00.

Далее разместите уникальный html-код в коде посадочной страницы.

Настроить передачу справочных и нестандартных полей 

В веб-формах посадочных страниц могут использоваться нестандартные поля, например, радиокнопки либо выпадающие списки с данными из справочников.

Настроить передачу данных, выбранных с помощью радиокнопки 

1. Добавьте в html-разметку посадочной страницы скрытое поле. Значение id данного поля может быть произвольным:

   <input type="hidden" id=" idOfRadiobutton" />

2. В коде лендинга в Creatio в блоке “fields” настройте соответствие полей между нужным полем лида и созданным скрытым полем:

   "UsrField": "#idOfRadiobutton"

3. Значение, выбранное с помощью радиокнопки, необходимо передать в ранее созданное скрытое поле. Добавьте полученное выражение, содержащее это значение, в код лендинга перед фрагментом, вызывающим функцию создания лида — createLead:

   var idOfRadiobutton = $('inputname=name_of_your_radiobutton:checked').val();

4. Сохраните изменения.

Настроить передачу значений, выбранных из выпадающего списка 

1. Добавьте в html-разметку посадочной страницы скрытое поле. Значение id данного поля может быть произвольным:

   <input type="hidden" id="fieldId" />

2. В коде лендинга в блоке “fields” настройте соответствие между нужным полем лида и созданным скрытым полем:

   "UsrField": "#fieldId"

3. Перед вызовом функции по созданию лида необходимо вычислить значение, которое   было выбрано из выпадающего списка и передать это значение в ранее созданное скрытое поле. Затем разместите полученное выражение, содержащее это значение, в код лендинга перед фрагментом, вызывающим функцию createLead:

   var fieldId = $("#name_of_dropdown option:selected").text();

   $("#fieldId").val(fieldId); 

4. Сохраните изменения.

После выполнения приведенных настроек данные, выбранные пользователем с помощью радиокнопки либо из выпадающего списка веб-формы, будут передаваться на страницу лида в Creatio.

Добавить отредактированный HTML-код в код посадочной страницы 

После того как в уникальный HTML-код были внесены все изменения для заполнения страницы лида, разместите его в коде посадочной страницы. Для этого:

1. Полностью скопируйте HTML-код, который вы ранее отредактировали в текстовом редакторе.
2. Разместите исходный код на посадочной странице:
   1. Перейдите в папку на сервере, в которой расположена посадочная страница (Рис. 8).
      Рис. 8 — Расположение посадочной страницы на сервере

      

   2. Откройте лендинг в любом текстовом редакторе.

   3. Вставьте уникальный HTML-код в исходный код посадочной страницы, например, перед закрывающим тегом </body> (Рис. 9).

      Рис. 9 — Внедрение уникального HTML-кода в исходный код посадочной страницы

      

   4. Сохраните изменения.

3. Добавьте событие, которое запускает функцию CreateLead(), в код посадочной страницы. Для этого используется код: onSubmit=”createLead(); return false”. Чтобы разместить событие в коде посадочной страницы:

   1. В коде посадочной страницы перейдите в часть кода “form action”:

      <span class="registration">Регистрация на вебинар</span>
      
                 
      
                 <form action="/webinar-creatio-7-6" method="post" id="ts-form-universal-form" accept-charset="UTF-8">

   2. Добавьте в открывающий тег <form> код OnSubmit=”createLead(); return false”, например:

      <span class="registration">Регистрация на вебинар</span>
      
      <form action="/webinar-creatio-7-6" method="post" id="ts-form-universal-form" accept-charset="UTF-8" onSubmit=”createLead(); return false”>

   3. Сохраните изменения.

После настройки связи лендинга и Creatio перейдите к настройке автозаполнения полей для лидов, полученных с лендинга.