Заявки с сайта в Google Таблице с помощью Google Tag Manager

29 августа, 2021

Хотите, чтобы все обращения с форм вашего сайта передавались в Google Таблицу? В этой статье рассмотрим решение по автоматизации процесса отправки заявок с сайта в Google Sheets с помощью Google Tag Manager.

Введение

На моем YouTube канале (не забывайте подписываться!) недавно вышел ролик на тему создания собственной CRM-системы в Google Таблице. Вот это видео:

Это отрывок из онлайн-курса по сквозной аналитике, где мы вместе со слушателями учились с помощью бесплатных инструментов создавать подобие CRM-системы, привязывать обращения с сайта к статусам сделок и передавать эту информацию в Universal Analytics. Для этого нам понадобилось всего 4 инструмента:

В этой статье я предлагаю взять первую часть из всего этого процесса и подробнее разобрать передачу лидов в Google Таблицу.

Итак, у нас есть задача - после каждого заполнения пользователем формы на сайте сохранять заявки в Google Sheets. Давайте приступать!

Google Таблицы

На первом этапе необходимо определиться с количеством полей и их названиями, которые вы планируете отслеживать. Это могут быть как поля самой формы, так и дополнительные системные, например, utm_метки, уникальный идентификатор пользователя (Client ID), дата и время отправки заявки, номер счетчика аналитики (для передачи статусов сделок в Universal Analytics), название формы, ID заявки и многое другое (см. видео). Именно вы определяете количество полей, название и их порядок в Google Таблице.

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

Пример отслеживаемой формы

У нее 4 поля для заполнения:

  1. Имя
  2. Сайт или мобильное приложение
  3. Почта
  4. Телефон

Значения из этих полей нам предстоит извлекать с помощью Google Tag Manager, чтобы после отправки пользователем формы в Google Таблицах получить данные по этой заявке:

Заявка с сайта в Google Таблице

Настройка начинается с создания новой Google Таблицы. Перейдите по ссылке и создайте пустой файл:

Создание новой Google Таблицы

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

Названия столбцов

  • A - Имя
  • B - Сайт или мобильное приложение
  • C - Почта
  • D - Телефон

Задайте произвольное название вашей Google Таблице. Например, Заявки с сайта:

Название таблицы

У каждой Google Таблицы есть свой уникальный идентификатор, который отображается в адресной строке браузера:

Ключ таблицы

Скопируйте часть URL (ключ) как показано на скриншоте (без / ). Теперь перейдите в раздел Инструменты - Редактор скриптов:

Инструменты - Редактор скриптов

Удалите из редактора скриптов весь код и вставьте в него этот:

У вас должно получиться так:

Скопированный код в редакторе скриптов

Оригинал кода размещен Маргаритой Евтимовой (Margarita Evtimova) на сайте ganotes.com в 2016 году. И это решение до сих пор работает! В нем также есть комментарии к коду, которые я перевел для вас.

После вставки кода в редактор скриптов самое главное - изменить в коде значения двух переменных SHEET_NAME и SHEET_KEY на свои. Для этого в переменной SHEET_NAME введите имя листа (обычно Лист1 или Sheet1) и в переменной SHEET_KEY вставьте ключ таблицы, скопированный с предыдущего шага:

Вставка собственных значений в скрипт

Примечание: регистр важен, Лист1/Sheet1 не равно лист1/sheet1.

После этого в меню нажмите Опубликовать - Развернуть как веб-приложение:

Опубликовать - Развернуть как веб-приложение

Введите название проекта (например, Leads) и нажмите ОК:

Название проекта

В настройках укажите:

  • Project version - Новое
  • Execute the app as: Запускать приложение от моего имени (Me)
  • Who has access to the app: Доступ к приложению есть у всех, включая анонимных пользователей (Anyone, even anonymous)

Настройки приложения

Нажмите кнопку Deploy. Вас попросят предоставить разрешение для доступа к данным Google. Поскольку приложение будет еще не проверено, то вы увидите предупреждение о небезопасности его использования. Игнорируйте его и просто перейдите на страницу проекта:

Перейти на страницу проекта

Далее разрешаете доступ к аккаунту Google. На заключительном шаге вы получите ссылку, которую нужно скопировать для Google Tag Manager.

Скопируйте ссылку для Google Tag Manager

Сохраните ее в каком-нибудь текстовом редакторе, например, блокноте. Затем нажмите ОК и сохраните итоговый проект.

Сохранение проекта

На этом настройка на стороне Google Таблиц завершена. Теперь переходим в диспетчер тегов Google.

Google Tag Manager

Для того, чтобы передать значения полей формы в Google Таблицу, нам сначала необходимо эту информацию извлечь, сохранить в переменной, а затем с отправкой формы передать. Сделать это можно с помощью пользовательских переменных типа Собственный код JavaScript. Создайте их столько, сколько полей вы планируете отслеживать. У меня их 4 (имя, сайт, почта, телефон), значит переменных тоже будет 4.

Но перед тем, как это сделать, вы должны для каждого поля формы определить его CSS-селектор. Рекомендую для лучшего понимания материала прочитать эти статьи:

Как определить CSS-селектор для поля?

В браузере откройте консоль разработчика (клавиша F12 для Google Chrome и Mozilla Firefox). Выделите то поле, которое хотите отслеживать. Нажмите на него правой кнопкой мыши и выберите Копировать – CSS-селектор

Копирование CSS-селектора поля

Для поля с именем я получил селектор:

Аналогично нужно проделать со всеми оставшимися полями формы:

Создание пользовательских переменных

Вернитесь в Google Tag Manager и создайте пользовательские переменные типа Собственный код JavaScript. Если на вашем сайте подключен jQuery, то код можно использовать такой:

где, вместо CSS-селектор вы вставляете селектор для собственного поля.

В GTM это выглядит так:

Пользовательская переменная для поля "Имя"

Если на сайте нет jQuery, то попробуйте использовать следующий код:

где, вместо CSS-селектор вы вставляете селектор для собственного поля.

И та, и другая конструкция возвращают значение введенной пользователем строки в поле формы, только одна - для jQuery, другая нет.

Проверка конструкции с jQuery и без

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

Пользовательские переменные для всех полей формы

Задайте имена переменным и сохраните их.

Создание триггера

Чтобы передавать значения полей формы в Google Таблицу, нам необходим триггер, который запускал бы активацию тега только в момент отправки формы. Поскольку на graphanalytics.ru присутствует классическая форма с тегом <form>, то для ее отслеживания подойдет стандартный триггер типа Отправка формы без каких-либо дополнительных условий активации:

Триггер "Отправка формы"

Примечание: в вашем случае этот триггер для формы может не подойти. Тогда я рекомендую воспользоваться материалом с 9 способами отслеживания отправки формы с помощью Google Tag Manager. Один из предложенных вариантов точно подойдет и для вашего сайта.

Создание тега

Осталось только создать тег, который активировался бы по созданному на предыдущем шаге триггеру, и который отправлял бы данные по всем нашим полям формы. Для этого создайте тег типа Пользовательское изображение и в поле URL изображения вставьте ссылку из приложения для Google Таблиц, которую вы сохранили в своем текстовом редакторе:

В конце ссылки поставьте вопросительный знак ? и начните перечислять все названия параметров и их значения (наши пользовательские переменные) через знак амперсанд &. В результаты вы должны получить ссылку такого вида:

Важно:

  • названия параметров пишите точно так же, как это сделали в Google Таблице, с учетом регистра;
  • пробелов в ссылке быть не должно.

В Google Tag Manager это будет выглядеть так:

Сопоставление параметров в Google Таблице и значений в ссылке для тега

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

Проверьте корректность передачи данных с помощью режима предварительного просмотра.

Режим отладки GTM

Если вы все настроили верно, то после отправки тестовой заявки ее данные должны отобразиться в вашей Google Таблице!

Тестовая заявка

В конце не забудьте опубликовать контейнер GTM.

Резюме

Чем хорош данный способ? Во-первых, это бесплатно. Тот же Zapier, Albato, ApiX-Drive или аналогичный сервис по передаче данных имеет ряд ограничений и стоит определенных денег. Во-вторых, вы можете иметь альтернативный источник отслеживания всех заявок, даже если они отправляются у вас на почту и обычную CRM-систему. Всегда можно будет сравнить их количество из разных мест.

В-третьих, вы как маркетолог можете создать такой файл с целью обезопасить себя от периодических "наездов" со стороны заказчика. У меня был случай в практике, когда я видел в аналитике определенное количество конверсий, которое не билось с реальными данными клиента. Оказалось, его заявки на протяжении нескольких недель падали на почте в СПАМ. Он их не видел, с ними не работал и поэтому думал, что все дорого, а я к каждой встрече строю неверные отчеты с данными. Хорошо, что у меня была такая Google Таблица со всеми его обращениями с сайта, и мы достаточно быстро смогли восстановить хронологию событий и найти проблему.

Напоследок рекомендую вам посмотреть мой вебинар, посвященный настройке отправки заявок с сайта в Telegram с помощью Google Tag Manager, который имеет много сходств с этим способом отслеживания.

Теперь вы знаете, как это можно сделать благодаря диспетчеру тегов Google, Google Таблицам, небольшому скрипту и без привлечения разработчика. Вам даже не нужно просить своего клиента предоставлять доступ (если он не хочет) к полученным лидам. Да, магия существует!

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике