Перейти к содержанию

Интеграция Roistat с LPgenerator

С помощью решения от Roistat, вы сможете сделать автоматическую отправку лидов в следующие CRM: AmoCRM, Bitrix24, Мегаплан, Мой Склад, retailCRM, Pipedrive, U-ON.Travel.

Это позволит получать информацию о каждой сделке в системе Roistat и возможность проводить аналитику, основываясь на данных продажах.

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

Как работает интеграция

  1. Клиент оставляет заявку в форме LPgenerator.
  2. В зависимости от установленных настроек информация передается в Roistat.
  3. Если в проекте Roistat настроена интеграция с CRM, Roistat отправляет созданную заявку в подключенную CRM.

Установка счетчика

  1. Перейдите в раздел Страницы и в меню своего лендинга нажмите Действия затем Редактировать.

1.png

2. В редакторе нажмите на кнопку Скрипты, в открывшимся окне нажмите Добавить скрипт. Установите счетчик, код которого размещен в проекте Roistat в разделе Настройки → Код счетчика.

2.png

Настройка форм

  1. В настройках каждой формы на лендинге (для вызова окна нужно кликнуть по ней 2 раза) перейдите во вкладку Настройки поля и выберите нужное поле.
  2. В пункте mapping укажите название поля на английском для передачи параметра. Для поля Имя это может быть name, для электронной почты - mail, для телефона - phone и так далее.

3.png

3. В этом же окне перейдите во вкладку Настройки формы и выберите:

  • Действие: Страница благодарности.
  • Страница: Ваша созданная страница благодарности в LPgenerator.
  • Передать поля формы: Да.

4.png

Данные действия проделайте для всех форм на вашем лендинге.

Настройка страницы благодарности

  1. Создайте страницу благодарности по инструкции.
  2. В редакторе страницы благодарности (Действия → Редактировать) выберите инструмент "Скрипты". 5.jpg

  3. Добавьте скрипт отправки лида в CRM, отредактируйте его и сохраните изменения. 6.jpg

    7.jpg

  4. Откройте редактор страницы с формой, после заполнения которой должна показываться страница благодарности.

  5. Укажите созданную страницу благодарности в настройках формы. 8.jpg
  6. Сохраните изменения.

Настройка скрипта отправки лида в CRM

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

Перед использованием скрипта необходимо внести в него изменения:

  1. В строке '&projectId=' + '1111' замените 1111 на номер вашего проекта в Roistat, который можно увидеть в адресной строке браузера (например, http://cloud.roistat.com/project/1288, где 1288 - ваш номер проекта).
  2. Если в поле Mapping в настройках формы вы указывали другие значения, замените их в скрипте. Например, если Mapping для поля Имя у вас называется imya, то в скрипте должно быть'&name=' + urlData.imya +.
  3. Параметр title является названием вашей новой сделки в CRM.
  4. Параметр text является комментарием к сделке.
  5. Все дополнительные параметры (например &Источник) будут добавлены в комментарий к сделке.
  6. Вы можете передавать в CRM значения дополнительных полей сделки. Для этого в скрипте после $('body').append( '' ); добавьте строку в формате '&key=' +'value'+, где key - идентификатор поля, value - переменная, в которую передается значение поля, или +'&key=<значение поля>'+, если значение поля известно.\ Например, '&responsible_user_id=' +'userId '+ или +'&responsible_user_id=1484254 '+. \

Внимание!

В качестве идентификатора дополнительного поля нельзя указывать name, text, email, title, phone, roistat, lead_id, secret, projectId, is_need_callback.

<script>
    jq_144(function($) {
        if (window.location.search) {
            var getCookie     = function (name) {
                var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
                return matches ? decodeURIComponent(matches[1]) : undefined
            }
            var getMarker     = function () {
                var roistatMarker = getCookie('roistat_marker');
                if (!roistatMarker) {
                    roistatMarker = 'прямой заход';
                }
                return roistatMarker;
            }
            var validateEmail = function (email) {
                return /^[^\s]+[@][^\s]+$/g.test(email) ? email : null;
            }
            var validatePhone = function (phone) {
                return /^(8|[\+]7)?(\d){10}$/g.test(phone) ? phone : null;
            }
            var paramsStr     = decodeURIComponent(window.location.search.substring(1).replace(/\+/g, ' '));
            var params        = paramsStr.split('&');
            var urlData       = {};
            for (var i = 0; i < params.length; i++) {
                var param          = params[i];
                var paramName      = param.split('=')[0];
                var paramValue     = param.split('=')[1];
                urlData[paramName] = paramValue.length > 0 ? paramValue : null;
            }
            var projectId   = '1111';
            var name        = urlData.name;
            var phone       = validatePhone(urlData.phone);
            var mail        = validateEmail(urlData.mail);
            var title       = 'Новая сделка';
            var text        = 'Текст комментария';
            var source      = getMarker();
            var visit       = getCookie('roistat_visit');
            var leadId      = urlData.lead_id;
            var hasContacts = phone !== null || mail !== null;
        }
        $(document).ready(function() {
            if (urlData && leadId && hasContacts) {
                $('body').append( '<img src="http://cloud.roistat.com/site-api/0.2/integration/lpgenerator?secret=qwyhdg762ds' +
                    '&projectId=' + projectId +
                    '&name=' + name +
                    '&email=' + mail +
                    '&phone=' + phone +
                    '&title=' + title +
                    '&text='  + text +
                    '&Источник=' + source +
                    '&roistat=' + visit +
                    '&lead_id=' + leadId +
                    '" width="0" height="0" />' );
            }
        });
    });
</script>

В popUP формах не поддерживается опция mapping, поэтому значения полей необходимо будет получить  вручную, для этого нужны минимальные значения HTML и JavaScript.

Внимание!

После отправки контактов через Popup-форму не должно происходить переадресации на другие страницы, в том числе на страницу благодарности. Нужно настроить результат форм на действие Показать сообщение.

Перейдите на сайт, кликните правой кнопкой мыши, в открывшемся меню выберите пункт "Просмотр кода страницы".

Через поиск (Ctrl+F) по словам в форме найдите код формы, например:

<div class="widget popup">
    <a class="close"></a>
    <form method="post" target="iframe-block-new19">

        <div  class=" line text b1424442147398">Заказать звонок
</div>

        <div  class=" line input b1424442147400"><input  class=" " placeholder="Ваше имя*" type="text" rel="name" data-required="data-required"></input></div>

        <div  class=" line input b1424442147401"><input  class=" " placeholder="Ваш телефон*" type="text" rel="phone" data-required="data-required"></input></div>

        <div  class=" line submit b1424442147402">
    <input  class=" " disabled="disabled" type="submit" value="Позвоните мне!"></input>
</div>

    </form>
    <div class="confirmation">Спасибо за информацию!</div>
</div>

В атрибуте class есть несколько значений, нам необходим уникальный идентификатор поля, у поля "Ваше имя" идентификатор b1424442147400. У поля "Ваш телефон" идентификатор b1424442147401. Кнопке для отправки формы присвоен идентификатор b1424442147402. Теперь по примеру нижеприведенного скрипта получите значения полей и укажите в какое поле, какое значение отправлять. Не забудьте про идентификатор кнопки:

<script>
    jq_144(function($) {
        $('.b1424442147402').click(function() {
            var getCookie     = function (name) {
                var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
                return matches ? decodeURIComponent(matches[1]) : undefined
            }
            var getMarker     = function () {
                var roistatMarker = getCookie('roistat_marker');
                if (!roistatMarker) {
                    roistatMarker = 'прямой заход';
                }
                return roistatMarker;
            }
            var getFieldValue = function (fieldPath) {
                var fields = $(fieldPath);
                for (var i = 0; fields.length > i; i++) {
                    var value = $(fields[i]).val();
                    if (value.length > 0) {
                        return value;
                    }
                }
                return null;
            }
            var validateEmail = function (email) {
                return /^[^\s]+[@][^\s]+$/g.test(email) ? email : null;
            }
            var validatePhone = function (phone) {
                return /^(8|[\+]7)?(\d){10}$/g.test(phone) ? phone : null;
            }
            var username      = getFieldValue('.b1424442147400 > input');
            var phone         = validatePhone(getFieldValue('.b1424442147401 > input'));
            var email         = validateEmail(getFieldValue('.b1424442147412 > input'));
            var hasContacts   = phone.length > 0 || email.length > 0;
            if (hasContacts) {
                $('body').append( '<img src="http://cloud.roistat.com/site-api/0.2/integration/lpgenerator?secret=qwyhdg762ds' +
                    '&projectId=' + '2018' +
                    '&name=' + username +
                    '&email=' + email +
                    '&phone=' + phone +
                    '&title=' + 'Новая сделка c LPgenerator' +
                    '&text=' + 'Текст комментария' +
                    '&Источник=' + getMarker() +
                    '&roistat=' + getCookie('roistat_visit') +
                    '" width="0" height="0" />' );
            }
        });
    });
</script>

Пример того, как редактировать и размещать JS-скрипт, смотрите выше.

В случае, если у вас на странице несколько одинаковых форм (идентичный id), то вам подойдет следующий скрипт:

<script>
    jq_144(function($) {
        $('.b1446825814586').click(function() {
            var getCookie     = function (name) {
                var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
                return matches ? decodeURIComponent(matches[1]) : undefined
            }
            var getMarker     = function () {
                var roistatMarker = getCookie('roistat_marker');
                if (!roistatMarker) {
                    roistatMarker = 'прямой заход';
                }
                return roistatMarker;
            }
            var getFieldValue = function (fieldPath) {
                var fields = $(fieldPath);
                for (var i = 0; fields.length > i; i++) {
                    var value = $(fields[i]).val();
                    if (value.length > 0) {
                        return value;
                    }
                }
                return null;
            }
            var validateEmail = function (email) {
                return /^[^\s]+[@][^\s]+$/g.test(email) ? email : null;
            }
            var validatePhone = function (phone) {
                return /^(8|[\+]7)?(\d){10}$/g.test(phone) ? phone : null;
            }
            var username      = getFieldValue('.b1446825814584 > input');
            var phone         = validatePhone(getFieldValue('.b1446825814585 > input'));
            var email         = validateEmail(getFieldValue('.b1424442147412 > input'));
            var city          = getFieldValue('.b1460097003021 > input');
            var hasContacts   = phone.length > 0 || email.length > 0;
            if (hasContacts) {
                $('body').append('<img src="http://cloud.roistat.com/site-api/0.2/integration/lpgenerator?secret=qwyhdg762ds' +
                    '&projectId=' + '14621' +
                    '&name=' + username +
                    '&email=' + email +
                    '&phone=' + phone +
                    '&title=' + 'Новая сделка c LPgenerator' +
                    '&text=' + 'Текст комментария' +
                    '&Источник=' + getMarker() +
                    '&roistat=' + getCookie('roistat_visit') +
                    '&Город=' + city +
                    '" width="0" height="0" />');
            }
        });
    });
</script>

Теперь для отправки лидов осталось создать поле roistat в CRM, настроить интеграцию со сделками в roistat и распределить статусы.

Если при отправке формы необходимо инициировать обратный звонок, то необходимо так же добавить параметр 'is_need_callback' = 1. Будет совершён обратный звонок, на номер, указанный в настройке обратного звонка Ловца Лидов. Если нужно совершить звонок на другой номер, то добавьте параметр 'callback_phone' = 79991234567 , передав в него номер телефона менеджера.

Добавление поля roistat

Информацию о том, как создать поле roistat в CRM, вы сможете на этой странице: Интеграция с CRM. Выберите статью, соответствующую CRM, которую вы используете.

Распределение статусов

В Roistat зайдите в пункт меню Настройки → Интеграция со сделками, выберите свою CRM и укажите необходимые данные. После нажатия на кнопку Сохранить загрузятся статусы из CRM, которые необходимо распределить:

  • Не учитываются  - мусорные лиды, дублирующие сделки. Чтобы статистика была максимально корректна - не удаляйте сделки. Их лучше перемещать в специально отведенный статус (например, «Мусор»).
  • В работе - сделки, по которым идет работа (например, новые переговоры или комплектация товара).
  • Оплаченные  - сделки, по которым Вы уже получили деньги или «вот-вот» получите.
  • Отмененные - сделки, от которых клиент отказался или делает возврат.

Просто перетащите статус в нужный блок.

9.png

На основе этой группировки Roistat сможет отслеживать фактически достигнутые показатели (используя группу «Оплаченные») и прогноз показателей, которые возможно достичь (объединение статусов «В работе» и «Оплаченные»).

Проверка работы

После отправки формы должна создаваться новая сделка с заполненным полем roistat в выбранной вами CRM из пункта меню Настройки → Интеграция со сделками.

Настройка внешнего вида Ловца Лидов

Изменить внешний вид формы Ловца Лидов можно при помощи CSS. Для этого откройте редактор своей страницы в LPgenerator:

10.jpg

Выберите инструмент "Скрипты" в панели инструментов:

11.jpg

Добавьте новый скрипт, вставьте код и сохраните изменения:

12.jpg

Сохраните проект, после чего изменения будут применены:

13.jpg

Решение проблем

Если возникли проблемы с подменой на сайте, измените расположение счетчика: установите его внизу страниц.

14.png