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

Продукты
Все продукты

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

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

На заметку. Действия по настройке лендингов выполняются web-разработчиком сайта.

Важно. В базовой конфигурации Creatio поддерживается интеграция с CMS, которые позволяют добавление пользовательского кода на языках HTML и JavaScript. Для интеграции с другими CMS, например, WordPress, необходим дополнительный коннектор. Больше информации вы найдете на сайтах Creatio Community и Creatio Marketplace.

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

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

    Рис. 1 — Создание нового лендинга
    scr_landings_new_landing.png
  2. На открывшейся странице заполните поля:

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

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

      Рис. 2 — Пример заполнения страницы лендинга
      connect_your_website_landing_page_to_Creatio.png
    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-кода со страницы лендинга Creatio в код вашей посадочной страницы. Если на вашем сайте уже настроена переадресация с посадочной страницы, то поле Адрес перехода можно оставить пустым.

Отредактировать уникальный 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 — Отображение посадочной страницы с исходным кодом
      scr_landings_page_with_code1.png
    2. В области исходного кода страницы нажмите на иконку btn_lendings_code.png (Рис. 4).
      Рис. 4 — Выбор элемента кода на странице
      scr_landings_choose_element.png
    3. Нажмите на поле ФИО посадочной страницы (Рис. 5).
      Рис. 5 — Выбор элемента для просмотра кода
      scr_landings_choose_field.png

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

      Рис. 6 — Выделенный фрагмент кода, соответствующий выбранному полю ФИО
      scr_landings_code_fragment.png
    4. Скопируйте значение, которое содержится в параметре “id” исходного кода посадочной страницы (Рис. 7).
      Рис. 7 — Копирование значения параметра “id” исходного кода посадочной страницы
      scr_landings_copy_id.png
    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 — Расположение посадочной страницы на сервере
      scr_landings_server.png
    2. Откройте лендинг в любом текстовом редакторе.

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

      Рис. 9 — Внедрение уникального HTML-кода в исходный код посадочной страницы
      scr_landings_edit_code_notepad+.png
    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 перейдите к настройке автозаполнения полей для лидов, полученных с лендинга.