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

29 августа, 2021

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

Содержание

Введение

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

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

Google Таблицы;
Google Tag Manager;
Measurement Protocol;
Universal Analytics.

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

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

Google Таблицы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ключ таблицы

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

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

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

// Использование
// 1. В переменной SHEET_NAME введите имя листа
// 1. В переменной SHEET_KEY введите ключ таблицы
var SHEET_NAME = "Лист1";
var SHEET_KEY = "Ключ-таблицы";

// 2. Опубликовать - Развернуть как веб-приложение
//
// 3. Введите название проекта
// Project Version - Новое
// Запускать приложение от моего имени (Me)
// Доступ к приложению есть у всех, включая анонимных пользователей (Anyone, even anonymous)
//
// 4. Скопируйте "Текущий URL-адрес веб-приложения" и опубликуйте его в собственном теге Google Tag Manager
//
// 5. Вставьте имена столбцов на листе, соответствующие именам параметров передаваемых вами данных формы (в точном соответствии с регистром)

var SCRIPT_PROP = PropertiesService.getScriptProperties(); // класс, позволяющий хранить данные в парах "ключ-значение"

// Если вы не хотите раскрывать методы GET или POST, вы можете закомментировать соответствующую функцию
function doGet(e){
return handleResponse(e);
}

function doPost(e){
return handleResponse(e);
}

function handleResponse(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000); // Подождать до 30 секунд, пока завершатся другие процессы

try {
// Запись данных - вы можете использовать несколько альтернативных адресатов
var doc = SpreadsheetApp.openById(SHEET_KEY);
var sheet = doc.getSheetByName(SHEET_NAME);

// Предполагается, что заголовок находится в строке 1, но вы можете переопределить header_row в данных GET / POST
var headRow = e.parameter.header_row || 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // Получаем следующую строку
var row = [];
// Перебираем столбцы заголовков
for (i in headers){
if (headers[i] == "Timestamp"){ // Особый случай, если вы используете столбец Timestamp
row.push(new Date());
} else { // Иначе используется имя заголовка для получения данных
row.push(e.parameter[headers[i]]);
}
}
// Наиболее эффективно устанавливать значения в виде массива []
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// Возвращаем успешный результат в виде JSON
return ContentService
.createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
.setMimeType(ContentService.MimeType.JSON);
} catch(e){
// В случае ошибки вернуть это
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
} finally { // Снимаем блокировку, чтобы другие процессы могли продолжить работу
lock.releaseLock();
}
}

// Использование

// 1. В переменной SHEET_NAME введите имя листа

// 1. В переменной SHEET_KEY введите ключ таблицы

var SHEET_NAME = "Лист1";

var SHEET_KEY = "Ключ-таблицы";

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

// 3. Введите название проекта

// Project Version - Новое

// Запускать приложение от моего имени (Me)

// Доступ к приложению есть у всех, включая анонимных пользователей (Anyone, even anonymous)

// 4. Скопируйте "Текущий URL-адрес веб-приложения" и опубликуйте его в собственном теге Google Tag Manager

// 5. Вставьте имена столбцов на листе, соответствующие именам параметров передаваемых вами данных формы (в точном соответствии с регистром)

var SCRIPT_PROP = PropertiesService.getScriptProperties(); // класс, позволяющий хранить данные в парах "ключ-значение"

// Если вы не хотите раскрывать методы GET или POST, вы можете закомментировать соответствующую функцию

function doGet(e){

return handleResponse(e);

}

function doPost(e){

return handleResponse(e);

}

function handleResponse(e) {

var lock = LockService.getPublicLock();

lock.waitLock(30000); // Подождать до 30 секунд, пока завершатся другие процессы

try {

// Запись данных - вы можете использовать несколько альтернативных адресатов

var doc = SpreadsheetApp.openById(SHEET_KEY);

var sheet = doc.getSheetByName(SHEET_NAME);

// Предполагается, что заголовок находится в строке 1, но вы можете переопределить header_row в данных GET / POST

var headRow = e.parameter.header_row || 1;

var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];

var nextRow = sheet.getLastRow()+1; // Получаем следующую строку

var row = [];

// Перебираем столбцы заголовков

for (i in headers){

if (headers[i] == "Timestamp"){ // Особый случай, если вы используете столбец Timestamp

row.push(new Date());

} else { // Иначе используется имя заголовка для получения данных

row.push(e.parameter[headers[i]]);

}

// Наиболее эффективно устанавливать значения в виде массива []

sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);

// Возвращаем успешный результат в виде JSON

return ContentService

.createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))

.setMimeType(ContentService.MimeType.JSON);

} catch(e){

// В случае ошибки вернуть это

return ContentService

.createTextOutput(JSON.stringify({"result":"error", "error": e}))

.setMimeType(ContentService.MimeType.JSON);

} finally { // Снимаем блокировку, чтобы другие процессы могли продолжить работу

lock.releaseLock();

}

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

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

Оригинал кода размещен Маргаритой Евтимовой (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-селектора поля

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

#popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(2) > input:nth-child(1)

1	#popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(2) > input:nth-child(1)

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

#popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(3) > input:nth-child(1) // для сайта
#popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(4) > input:nth-child(1) // для почты
#popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(5) > input:nth-child(1) // для телефона

#popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(3) > input:nth-child(1) // для сайта

#popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(4) > input:nth-child(1) // для почты

#popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(5) > input:nth-child(1) // для телефона

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

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

function(){
var vashePole = $('CSS-селектор').val();
return vashePole;
}

function(){

var vashePole = $('CSS-селектор').val();

return vashePole;

}

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

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

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

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

function(){
var vashePole = document.querySelectorAll('CSS-селектор')[0].value;
return vashePole;
}

function(){

var vashePole = document.querySelectorAll('CSS-селектор')[0].value;

return vashePole;

}

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

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

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

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

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

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

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

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

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

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

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

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

https://script.google.com/macros/s/AKfycbznNn6LGZMLONo_fFRHIPDa3d6bzjoim_bcAfxapcVojEr4HAI/exec

1	https://script.google.com/macros/s/AKfycbznNn6LGZMLONo_fFRHIPDa3d6bzjoim_bcAfxapcVojEr4HAI/exec

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

https://script.google.com/macros/s/AKfycbznNn6LGZMLONo_fFRHIPDa3d6bzjoim_bcAfxapcVojEr4HAI/exec?Имя={{JS - Name}}&Сайт={{JS - Site}}&Почта={{JS - Email}}&Телефон={{JS - Phone}}

1	https://script.google.com/macros/s/AKfycbznNn6LGZMLONo_fFRHIPDa3d6bzjoim_bcAfxapcVojEr4HAI/exec?Имя={{JS - Name}}&Сайт={{JS - Site}}&Почта={{JS - Email}}&Телефон={{JS - Phone}}

Важно:

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

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

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

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

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

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

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

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

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

Резюме

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

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

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

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

Метки: Google Analytics, Google Tag Manager, Google Таблицы, Measurement Protocol