Настройка коллтрекинга для работы с Timepad

1 Обзор

Timepad, это сервис для организаторов событий, позволяющие сделать лендинг для вашего события или создать форму регистрации на сайте или в соц. сетях, или форму для сбора контактов.
Интеграция коллтрекинга позволяет собирать статистику обращений через форму «Анкета регистрации» от Timepad. Обобщенный пример внешнего вида формы «Анкета регистрации» показан на рисунке:

Принцип работы

Интеграция коллтрекинга с Timepad работает на основе Webhook:

после отправки данных регистрации через форму «анкета регистрации», Timepad автоматически передает в коллтрекинг Webhook с данными из формы;
коллтрекинг привязывает обращение к тому или иному сеансу, рекламному каналу, ключевому слову, региону и т. д., при этом в Журнале коллтрекинга и в Сквозной аналитике обращение из формы обратной связи Timepad, как обращение с типом «Заявка с сайта».

Требования

Перед тем, как настраивать интеграцию коллтрекинга с Timepad, Вы должны:
1) подключить коллтрекинг MANGO OFFICE к Вашему сайту;
2) являться Клиентом Timepad и настроить форму «анкета регистрации» Timepad, чтобы собирать обращения и передавать эти данные в коллтрекинг;
3) вставить в код Вашего сайта дополнительный код интеграции коллтрекинга, чтобы повысить точность сбора статистики по обращениям из Timepad.

Порядок действий

Шаг	Описание

1) Подключение услуги в Личном кабинете MANGO OFFICE	Вы подключаете виджет интеграции, а также получаете Webhook URL для дальнейшей настройки интеграции.
2) Настройка интеграции в личном кабинете Timepad	Вы добавляете в настройки Timepad полученный Вами ранее Webhook URL и устанавливаете другие настройки интеграции.

2.1 Подключение в Личном кабинете MANGO OFFICE

Чтобы подключить интеграцию, в Личном кабинете MANGO OFFICE необходимо:
1) откройте список интеграций коллтрекинга;
2) выберите виджет коллтрекинга, к которому будет подключена интеграция;
3) нажмите на блок "Timepad":

Примечание. Если вы не видите блок с названием нужной вам интеграции, воспользуйтесь полем "Поиск по интеграциям". В этом поле введите название нужной вам интеграции, затем нажмите на название нужной вам интеграции. Подробнее о поиске.

4) активируйте переключатель "Импорт данных от Timepad", чтобы появилось поле "Webhook URL";

5) нажмите на кнопку "Скопировать", чтобы скопировать Webhook URL;
6) сохраните данный Webhook URL, например, в Блокнот, для дальнейшей настройки интеграции:

2.2 Настройка интеграции в личном кабинете Timepad

Для настройки интеграции в Личном кабинете Timepad, необходимо:
1) войдите в Ваш Timepad;
2) создайте новое событие или перейдите в раздел "Главная" и найдите блок с данными нужного вам события;
3) нажмите кнопку "Действия", затем в выпадающем списке выберите значение "Изменить событие":

4) нажмите на пункт "Анкета регистрации" в блоке "Редактирование";
5) нажмите на кнопку "Добавить вопрос". В выпадающем меню выберите пункт "Коротки произвольный ответ":

6) в поле "Текст вопроса" нужно указать значение "Mango" (с большой буквы латиницей);
7) обязательно активировать переключатель "Ответ на вопрос обязателен";
8) нажмите кнопку "Сохранить";

9) нажмите кнопку "Сохранить" в анкете регистрации. Вопросы анкеты регистрации будут сохранены:

10) перейдите на вкладку "Организация";
11) нажмите на блок "Интеграция". В открывшемся меню выберите пункт "Вебхуки;
12) нажмите кнопку "Добавить" в блоке "Изменение статуса заказа":

13) укажите Webhook URL, полученный Вами ранее, в поле "Ссылка для уведомления";
14) нажмите кнопку "Сохранить":

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

2.3 Как создать дополнительный код коллтрекинга и изменить код Timepad

Чтобы интеграция коллтрекинга с Timepad заработала, необходимо выполнить следующие действия:
1) вставить дополнительный код коллтрекинга в код Вашего сайта;
2) изменить код размещения Timepad таким образом, чтобы он мог передавать данных об обращениях в коллтрекинг и вставить измененный код в код вашего сайта.

Дополнительный код коллтрекинга

Вам нужно скопировать следующий код и вставить его код на КАЖДУЮ страницу сайта ОДИН раз, перед закрывающимся тегом </body>:

<script type="text/javascript">
      (function (window) {
         function getCookies() {
         var cArr = document.cookie.split('; ');
         var cObj = {};
         cArr.forEach(function(cRaw) {
            var cSpl = cRaw.split('=');
            cObj[cSpl[0]] = cSpl[1];
         });
         return cObj;
      }

         // В эту функцию мы напишем код, который возвращает метку, которая будет записана в заказ
         var getMgoUid = function (widget, cb) {
            var c = getCookies();
            var mgoUid = c['mgo_uid'] ? ('mgo_uid:' + c['mgo_uid']) : null;
            cb(mgoUid);
         };

         var handleAttendeeQuestion = function (widget, attendee) {
         // Находим вопрос в модели по его названию
         var question = TWF2.Collections.A.whereSingle(attendee.questionsSet, function (q) {
               return q.name == "Mango"
            });

            if (question) { // если нашли
               var $input = widget
               .$$("[data-formname='" + question.formname + "']") // то находим его на странице
               .hide() // прячем
               .find('input'); // ищем в нём поле ввода

            // и прописываем метку
             getMgoUid(widget, function (val) {
               $input.val(val);
            });
         }
         };

         // вешаем обработчик на каждую перерисовку формы
         window.handleTWFpostRepaint = function (e) {
            if (this.model.attendees.length) {
            handleAttendeeQuestion(this, this.model.attendees[0]);
         }
      };

      // вешаем обработчик на добавление новых форм участников (если у события используются мультианкеты)
      window.handleTWFattendeeFormAdded = function (e) {
            handleAttendeeQuestion(this, e.attendee);
         };
      })(window);
</script>

Как изменить код размещения Timepad для настройки интеграции

1) скопируйте код виджета из формы Timepad

2) вставьте скопированный код в любой текстовый редактор, например "Блокнот";
3) вставьте в код виджета следующий специальный элемент:
- код интеграции коллтрекинга. Это обязательный элемент, по которому Timepad передает данные в коллтрекинг:

       (function() {
         return {
         "bindEvents": {
            "postRepaint": "handleTWFpostRepaint",
            "attendeeFormAdded": "handleTWFattendeeFormAdded",
         }
         };
      })();

Пример кода размещения Timepad, измененного для интеграции с коллтрекингом:

<script type="text/javascript" async="async" defer="defer" charset="UTF-8" src="https://timepad.ru/js/tpwf/loader/min/loader.js" data-timepad-customized="150862" data-twf2s-event--id="1721557" data-timepad-widget-v2="event_register">

   (function() {
      return {
         "bindEvents": {
            "postRepaint": "handleTWFpostRepaint",
            "attendeeFormAdded": "handleTWFattendeeFormAdded",
         }
      };
   })();
</script>

4) вставьте измененный код Timepad в код Вашего сайта ОДИН раз перед закрывающемся тегом </body>.
Настройка интеграции коллтрекинга с Timepad завершена.

3 Отображение в отчетах коллтрекинга

Обращение из формы Timepad, фиксируется в Журнале звонков и Журнале обращений коллтрекинга и в Сквозной аналитике как обращение с типом «Заявка с сайта». Обратите внимание, что обращение из формы Timepad фиксируется как полученное из канала «timepad» (см. рисунок ниже) только в случаях, когда Клиент (оставивший Вам обращение) перешел на Ваш сайт по ссылке, НЕ содержащий utm-меток. Если Клиент перешел по ссылке с utm-метками, они будут указаны в обращении.

4 Дополнительно

Как подписаться на уведомления об ошибках интеграции

Вы можете подписаться на бесплатное получение уведомлений об ошибках интеграции коллтрекинга с внешней бизнес-системой. Уведомления будут приходить Вам по электронной почте ежедневно в 9:00 утра.

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

Подписываясь на уведомления, Вы соглашаетесь на получение таргетированных рекламных предложений.

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

Контроль импорта данных

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

В Личном кабинете MANGO OFFICE в разделе «Коллтрекинг» необходимо:

1) выберите «Интеграции»;

2) в поле «Сайт» выберите виджет коллтрекинга, по которому нужно посмотреть информацию об импорте данных;

3) найдите блок с названием внешней системы. Проверьте, какой из трех статусов подключения отображается в этом блоке:

: статус «Подключено» означает, что с этой внешней системой ранее была настроена интеграция коллтрекинга;
: статус «Ошибка» означает, что интеграция с этой внешней системой ранее была настроена, но при работе интеграции было выдано сообщение об ошибке;
: статус «Подключить» означает, что интеграция с этой внешней системой не выполнена.

4) нажмите на блок с названием внешней системы. Будут открыт настройки интеграции;

5) в правом верхнем углу блока с настройками интеграции будет отображаться статус интеграции и\или дата и время последнего импорта данных из внешней системы. Возможны следующие значения: