Блог

Подключаем лендинги к CRM с помощью Daemon Collector

Необычное применение привычной технологии
Валерия Марченко 11 февраля 2016 года

Почти год назад мы представляли пользователям собственную специализированную технологию Daemon Collector. Разработка позволяет в режиме реального времени видеть в retailCRM клиентов, находящихся online на сайте, а также инициировать автоматическое появление форм захвата для тех пользователей, которые хотят покинуть страницу интернет-магазина.

Однако это только часть из того, что на самом деле умеет Daemon Collector. Например, с помощью него вы можете привязать retailCRM к любому лендингу — самописному или созданному на основе готовых шаблонов. И собирать заказы с форм лендинга прямо в CRM-систему.

Мы покажем в наглядном и максимально доступном виде все этапы такой интеграции лендингов с retailCRM, чтобы Вы смогли провести настройки подручными средствами, не прибегая к составлению сложных алгоритмов и поиску каких-либо особых инструментов.

Как это настроить:

Интегрируем с retailCRM самописный лендинг.

Вам понадобятся:

  • готовый, написанный Вами или Вашими программистами, лендинг
  • аккаунт retailCRM (в качестве эксперимента Вы можете просто воспользоваться демо-версией системы, это бесплатно)
  • немного кода или помощи ближайшего к Вам программиста :)

Зайдите в панель администрирования retailCRM и создайте новый магазин под лендинг, если такого ещё нет.

Заполните все необходимые поля и сохраните результат.

Перейдите во вкладку «Интеграция» и выберите подпункт «Collector».

В списке магазинов найдите недавно созданный и поставьте напротив него галочку.

После нажатия на кнопку «Сохранить» напротив нужного магазина появится ключ. Этот ключ необходимо будет вставить в код Daemon Collector.

Через FTP-клиент получите доступ к исходникам лендинга и найдите в корневой папке основной файл с кодом лендинга (в нашем примере он называется index.php). Откройте его для редактирования.

Здесь мы будем вставлять код, который инициирует подключение Daemon Collector к лендингу. Вставлять его нужно перед закрывающим тэгом HEAD. Сам код можно найти в документации (внимание, для лендингов параметр customerId указывать не нужно). Или скопировать его ниже, подставив созданный ранее ключ :

<script>
  (function(_,r,e,t,a,i,l){_['retailCRMObject']=a;_[a]=_[a]||function(){(_[a].q=_[a].q||[]).push(arguments)};_[a].l=1*new Date();l=r.getElementsByTagName(e)[0];i=r.createElement(e);i.async=!0;i.src=t;l.parentNode.insertBefore(i,l)})(window,document,'script','https://collector.retailcrm.pro/w.js','_rc');
  _rc('create', 'ключ-сайта');
  _rc('send', 'pageView');
</script>

Пока что мы только подключили Daemon Collector к лендингу.

Однако нам нужно, чтобы заявки со встроенной формы лендинга уходили в CRM. Поэтому идём дальше.

Теперь нужно найти в исходниках лендинга код, который отвечает за отправку формы. Чаще всего это обработчик события submit самой формы:

$('селектор-формы').submit (...)

Или обработчик события click кнопки «Отправить»

$('селектор-кнопки-отправить').click (...)

Подробнее о селекторах Вы можете найти здесь.

Обработчики события в нашем примере располагаются в файле script.js. Внутри функции обработчика формы мы должны получить значения полей. Код может выглядеть примерно так:

var имя_поля = $('селектор-поля_ввода').val()

В нашем случае код выглядит так:

var phone = $('#orderForm input[name="phone"]').val();

Теперь передадим полученные данные в retailCRM. Это можно сделать c помощью метода

_rc('send', 'order', {...})

Так, чтобы передать в CRM номер телефона клиента с формы «Заказать обратный звонок», нужно задать в методе такие параметры:

_rc('send', 'order', {
  'phone': phone,
  'orderMethod' : 'callback'
});

(можно передавать и другие параметры, полный список смотрите в документации)

Конечная версия кода для нашего лендинга выглядит так

index.php:

<script>
  (function(_,r,e,t,a,i,l){_['retailCRMObject']=a;_[a]=_[a]||function(){(_[a].q=_[a].q||[]).push(arguments)};_[a].l=1*new Date();l=r.getElementsByTagName(e)[0];i=r.createElement(e);i.async=!0;i.src=t;l.parentNode.insertBefore(i,l)})(window,document,'script','https://collector.retailcrm.pro/w.js','_rc');
  _rc('create', 'ключ-сайта');
  _rc('send', 'pageView');
</script>

script.js:

$('#placeorder_final').click(function() {
  var phone = $('#orderForm input[name="phone"]').val();
  _rc('send', 'order', {
    'phone': phone,
    'orderMethod' : 'callback'
  });
});

Сохраняем, и готово! Вы настроили отправку данных в CRM :)

Интегрируем с retailCRM готовый лендинг, созданный в конструкторе.

Вам понадобятся:

  • лендинг, созданный в конструкторе (в нашем примере это LPGenerator)
  • аккаунт retailCRM
  • ещё немного кода :)

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

Зайдите в панель администрирования retailCRM и создайте новый магазин под лендинг, если такого ещё нет.

Заполните все необходимые поля и сохраните результат.

Перейдите во вкладку «Интеграция» и выберите подпункт «Collector».

В списке магазинов найдите недавно созданный и поставьте напротив него галочку.

После нажатия на кнопку «Сохранить» напротив нужного магазина появится ключ. Этот ключ необходимо будет вставить в код Daemon Collector.

Зайдите в Ваш личный кабинет на том сервисе, где Вы создавали лендинг (в нашем случае это LPGenerator). Выберите опцию редактирования лендинга.

В окне редактирования найдите кнопку, которая позволяет добавлять на лендинг собственные скрипты (например, в нашем случае она выглядит так).

Сам скрипт мы будем вставлять после тэга BODY

Вставьте такой код:

<script>
  (function(_,r,e,t,a,i,l){_['retailCRMObject']=a;_[a]=_[a]||function(){(_[a].q=_[a].q||[]).push(arguments)};_[a].l=1*new Date();l=r.getElementsByTagName(e)[0];i=r.createElement(e);i.async=!0;i.src=t;l.parentNode.insertBefore(i,l)})(window,document,'script','https://collector.retailcrm.pro/w.js','_rc');
  _rc('create', 'ключ-сайта');
  _rc('send', 'pageView');

  _rc('require', 'capture-form', {
    'fields': {
      'email' : {'label': 'Ваша почта' },
      'phone': { required: true },
      'name' : {'label': 'Ваше имя'}
    },
    labelPromo: "Оставить заявку",
    labelSend: "Ок!"
  });

  window.onload = function() {
    document.getElementById('ID элемента').onclick = function() {
      _rc('capture-form:show', {
        'fields': ['phone', 'email', 'name']
      });
    };
  }
</script>

Данным кодом мы задали действие для Daemon Collector: по достижении определённой цели на лендинге будет всплывать форма с полями для заполнения данных. Целью мы сделали нажатие на кнопку.

Создадим кнопку и пометим её на удобное место в лендинге. Отредактируйте надпись на кнопке и скопируйте ID, которое ей было присвоено сервисом.

Скопированный ID вставьте в эту часть кода:

window.onload = function() {
  document.getElementById('ID кнопки').onclick = function() {
    _rc('capture-form:show', {
      'fields': ['phone', 'email', 'name']
    });
  };
}

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

Готово! Теперь Вы собираете данные с Вашего лендинга в CRM-систему.

Это только одна из многих других полезных возможностей Daemon Collector. Надеемся, мы смогли немного упростить Вам жизнь, показав, как настроить такую полезную штуку. Если у Вас появилось внезапное желание обзавестись личным Daemon Collector или просто возникли вопросы — можете оставить комментарии внизу статьи или обратиться на support@retailcrm.ru , будем рады пообщаться :)

Подпишись
на канал retailCRM!
  • Обучающие материалы
  • Видео настроек полезных фич
  • Обзоры новинок retailCRM
  • Кейсы с опытными
    бизнесменами
  • Записи вебинаров
Подписаться
Понравилась статья?
расскажите о ней друзьям!