Передаем данные из Тильды в Битрикс24 не влезая в код

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

Перед нами стоит задача настроить передачу данных из формы на сайте в CRM-систему “по-взрослому”, но без привлечения сторонних специалистов.

Перед началом работы давайте зафиксируем, что мы имеем:

• сайт на Тильде (система с достаточно закрытым кодом),
• на сайте установлена нативная форма (я выбрал BF204N, но это не имеет значения),
• установленный Google Tag Manager,
• демо-аккаунт в CRM Битрикс24 (14 дней бесплатно).

Начнем. Заходим в CRM, вкладка “Маркет”, в поисковую строку вводим “Tilda” и устанавливаем приложение “Tilda Publishing Forms”:

Теперь нам нужно связать наш сайт с Битрикс24. Обращаемся к документации Тильды и проделываем необходимые действия описанные в этой статье. По завершению настроек, мы должны получать данные из формы в CRM. 

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

?utm_source=yandex&utm_medium=cpc&utm_campaign=new-compaign&utm_content=1234567&utm_term=key-word

и нажмем Enter. Далее заполняем поля формы, кликаем по кнопке “Отправить” и переходим в Битрикс24, если мы все сделали верно, там уже должна быть заявка:

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

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

Заходим на страницу нашего контейнера в Google Tag Manager, к этому моменту он уже должен быть установлен на сайте и добавлены теги со счетчиками систем аналитики. Первое, что мы сделаем – это создадим две пользовательские переменные с Client ID Яндекс Метрики и Google Analytics, сразу оговорюсь, существует большое количество способов сделать это и все они правильные (ну почти), мы же воспользуемся самым правильным и пусть хоть кто-нибудь попробует с нами поспорить.

С Client ID Яндекс Метрики все довольно просто, создаем 1st Party Cookie переменную и сохраняем результат:

• ymCID – это название мы придумали сами,
• 1st Party Cookie  – тип создаваемой переменной,
• _ym_id – название cookie, так ее присылает Яндекс Метрика к нам на сайт

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

Похоже все в порядке двигаемся дальше, проделываем туже операцию для Google Client ID:

• gaRawCID – наше название,
• 1st Party Cookie  – тип создаваемой переменной,
• _ga – название cookie Google Analytics

Запускаем отладчик и смотрим полученный результат:

В этот раз не все так гладко, Google Analytics отдает cookie с префиксом и номером версии, мы же хотим получить “чистый” Client ID – 268319381.1710322901. Я предвидел результат и поэтому добавил в название переменной полученной на предыдущем шаге слово Raw (сырой, необработанный). 

Возвращаемся в GTM и создаем еще одну пользовательскую переменную, которая вернет теперь уже обработанные данные:

• gaCID – наше название,
• Custom JavaScript  – тип создаваемой переменной

function () { 
var raw = {{gaRawCID}}; 
return raw ? raw.split('.').slice(2).join('.') : null; 
}

Сейчас я объясню, что мы написали:

• создаем анонимную функцию (у нее нет названия),
• создаем переменную raw, которой присваиваем значение переменной  полученной выше,
• возвращаем (return) трансформированную переменную (если в ней есть значение) или null, если его нет.

Чуть подробней остановлюсь на этой строчке:

return raw ? raw.split(‘.’).slice(2).join(‘.’) : null;

Читаем слева направо:

• return – вернуть
• далее следует тернарный оператор, его следует читать так:
  • если в переменной raw, что-нибудь есть – вернем ее в обработанном виде,
  • если нет – вернем null, вместо null можно написать что угодно, допустим “пусто”, но в этом случае необходимо добавить кавычки,
• raw.split(‘.’).slice(2).join(‘.’) – здесь мы применяем встроенные методы JavaScript, которые удаляют ненужную часть cookie.

Если интересно познакомиться с методами JavaScript, советую обратиться к документации на сайте Mozilla Foundation – это одно из лучших мест в Интернете, где описаны веб-технологии.

Заморочки с тернарным оператором были нужны для того, чтобы интерпретатор JavaScript не выдавал сообщений об ошибках, в случае если будут производиться какие-либо действия с неопределенной (не имеющей значения) переменной.

Еще раз обращаемся к отладчику:

Теперь все в порядке.

Ну что, подготовительные работы закончены, пора создавать тег, он будет добавлять скрытые поля в форму на нашем сайте и записывать в них необходимые данные:

• addHiddenInputWithCID – название тега (оно получилось длинным, но зато описывает то, что в нем происходит),
• Custom HTML – тип тега,
• скрипт в котором мы создаем два HTML-элемента и добавляем их в форму во время посещения на страницы.

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

Хочу обратить особое внимание на еще одну очень важную деталь. На скриншоте выше мы создали две переменные в глобальной области видимости с очень простыми названиями, которые могут переопределять уже существующие переменные и таким образом поломать код. Старайтесь без лишней необходимости не засорять переменными кодовую базу или по крайней мере придумывать им какие-нибудь уникальные названия, например добавляя префикс. В нашем случае это могло бы выглядеть так: mysite-ym. Название стало длинным, но мы обезопасили себя и объявленные переменные теперь будет проще искать. 

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

function createInput(name, cid) { 
var input = document.createElement('input'); 
input.type = 'hidden'; 
input.value = cid; 
input.name = name; return input; 
} 

document.querySelector('[id^=form]').prepend(
createInput('_ga', {{gaCID}}),
createInput('_ym_uid', {{ymCID}})
);

Так гораздо лучше, теперь у нас есть функция принимающая в качестве параметров – имя поля и Client ID и возвращающая готовый input. Код стал чище и его стало удобней читать. Даже ничего на понимая в программировании мы видим функцию с говорящим названием и не вникая в детали знаем, что ей передать и что мы получим в ответ.

Публикуем контейнер и переходим на сайт.

Вот наши только что добавленные инпуты в коде, мы можем увидеть их, открыв инструменты веб-разработчика, но на сайте ничего не изменилось, все та же форма с четырьмя полями и кнопкой:

На скриншоте видно два инпута с атрибутами:

• type – hidden (скрытый),
• value – динамически передаваемое значение,
• name – имя элемента.

Заполняем форму и проверяем полученную заявку в Битрикс24:

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

Заключение

Конечно в идеальных условиях нам нужно было бы создать поля формы в коде, но мы поступили иначе и все сделали сами и теперь понимаем, как это работает.

Я написал эту статью для того, чтобы продемонстрировать насколько мощным инструментом наделил нас, маркетологов, Google, а так же чтобы показать тем кто только вступает на путь веб-анализа, что базовые знания в программировании делают нашу работу не только более эффективной, но и по настоящему интересной. В завершении хочу поделиться мыслью, которая посетила меня несколько лет назад: современный маркетинг начинается на стороне сервера.

Не переставайте учиться и не сдавайтесь. Удачи!