Передача заявок с сайта в Google Таблицы с помощью Яндекс Тег Менеджера

29 апреля, 2026

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

Это руководство - адаптированный материал другой моей статьи в блоге, которая посвящена Google Tag Manager.

Содержание

Введение

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

На Rutube:

И на YouTube:

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

Google Таблицы
Google Tag Manager
Measurement Protocol
Universal Analytics (устар. Google Analytics)

В этой статье мы будем выполнять первую часть этого процесса и после каждого заполнения пользователем формы на сайте передавать заявки в Google Таблицы, но с использованием Яндекс Тег Менеджера. Давайте приступать!

Примечание: Виктор Кончишин обновил мой материал по Universal Analytics для Google Analytics 4 и Measurement Protocol. Подробнее об этом читайте в этой статье.

Google Таблицы

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

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

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

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

Имя
Email (электронная почта)
Сообщение

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

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

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

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

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

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

A - Имя
B - Почта
C - Сообщение

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

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

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

Уникальный идентификатор Google Таблицы

Этот ID находится в адресной строке между /d/ и /edit. Он остается неизменным, даже если вы переименуете файл или переместите его в другую папку на Google Диске. Идентификатор файла используется для настройки интеграций, скриптов и API.

Скопируйте его как показано на скриншоте (без / ), а затем перейдите в раздел Расширения - Apps Script:

Расширения - Apps Script

Apps Script - это облачная платформа для написания небольших программ (скриптов), которые автоматизируют работу в сервисах Google: Таблицах, Документах, Gmail и Диске. Простыми словами, это встроенный язык программирования на основе JavaScript, с помощью которого буквально в несколько строк кода можно заставить приложения Google делать то, что они не умеют «из коробки».

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

Удалите все лишнее из редактора

И вставьте в него этот:

// =====================================================
// ИНСТРУКЦИЯ ПО ИСПОЛЬЗОВАНИЮ
// =====================================================
// 1. В переменной SHEET_NAME укажите имя листа в таблице
// 2. В переменной SHEET_ID укажите ID таблицы (часть из URL между /d/ и /edit)
//
// 3. В редакторе скриптов: Опубликовать -> Развернуть как веб-приложение
//
// 4. Настройки развертывания:
//    - Запускать приложение от моего имени (Me)
//    - Доступ к приложению есть у всех, включая анонимных пользователей (Anyone, even anonymous)
//
// 5. Скопируйте "Текущий URL-адрес веб-приложения" и опубликуйте его в собственном теге Яндекс Тег Менеджера
//
// 6. В Google Таблице создайте заголовки столбцов в первой строке:
//    - Назовите столбец "Timestamp" (если хотите автоматическую отметку времени)
//    - Остальные столбцы назовите в точности с именами параметров, которые передаёт ваша форма
//    (например: name, phone, email, message — регистр важен!)
// =====================================================

var SHEET_NAME = "Лист1";      // Имя листа в Google Таблице
var SHEET_ID = "1ABC123...";   // ID Google Таблицы

// -----------------------------------------------------------------
// Основная функция, которая обрабатывает POST-запросы от ЯТМ
// Принимает данные формы и записывает их в Google Таблицу
// -----------------------------------------------------------------
function doPost(e) {
    // Блокировка для предотвращения конфликтов при одновременных записях
    var lock = LockService.getPublicLock();
    lock.waitLock(30000); // Ждать до 30 секунд, пока завершатся другие процессы
    
    try {
        // -----------------------------------------------------------------
        // Парсинг входящих данных
        // Поддерживаются два формата:
        // 1. Обычные параметры (application/x-www-form-urlencoded)
        // 2. JSON (application/json)
        // -----------------------------------------------------------------
        var data = e.parameter || {};
        if (e.postData && e.postData.contents) {
            try {
                data = JSON.parse(e.postData.contents);
            } catch(ignore) {}
        }
        
        // -----------------------------------------------------------------
        // Подключение к Google Таблице
        // -----------------------------------------------------------------
        var sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);
        
        // Получаем заголовки столбцов из первой строки таблицы
        var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
        
        // -----------------------------------------------------------------
        // Формирование строки для вставки
        // Перебираем все столбцы и заполняем их в том порядке, в котором они идут в таблице
        // -----------------------------------------------------------------
        var row = [];
        
        for (var i = 0; i < headers.length; i++) {
            if (headers[i] == "Timestamp") {
                // Особый случай: если столбец называется "Timestamp", записываем текущую дату и время
                row.push(new Date());
            } else {
                // Для остальных столбцов берём значение из полученных данных
                // Если значение отсутствует, записываем пустую строку
                row.push(data[headers[i]] || "");
            }
        }
        
        // -----------------------------------------------------------------
        // Запись строки в таблицу
        // -----------------------------------------------------------------
        sheet.getRange(sheet.getLastRow() + 1, 1, 1, row.length).setValues([row]);
        
        // -----------------------------------------------------------------
        // Возвращаем успешный ответ в формате JSON
        // -----------------------------------------------------------------
        return ContentService.createTextOutput(JSON.stringify({
            "result": "success",
            "row": sheet.getLastRow()
        })).setMimeType(ContentService.MimeType.JSON);
        
    } catch(err) {
        // -----------------------------------------------------------------
        // В случае ошибки возвращаем сообщение об ошибке
        // -----------------------------------------------------------------
        return ContentService.createTextOutput(JSON.stringify({
            "result": "error",
            "error": err.toString()
        })).setMimeType(ContentService.MimeType.JSON);
    } finally {
        // Снимаем блокировку, чтобы другие процессы могли продолжить работу
        lock.releaseLock();
    }
}

// -----------------------------------------------------------------
// Обработка GET-запросов (перенаправляем на doPost для единообразия)
// Если вы не хотите раскрывать метод GET, можете удалить эту функцию
// -----------------------------------------------------------------
function doGet(e) { return doPost(e); }

100

101

102

103

// =====================================================

// ИНСТРУКЦИЯ ПО ИСПОЛЬЗОВАНИЮ

// =====================================================

// 1. В переменной SHEET_NAME укажите имя листа в таблице

// 2. В переменной SHEET_ID укажите ID таблицы (часть из URL между /d/ и /edit)

// 3. В редакторе скриптов: Опубликовать -> Развернуть как веб-приложение

// 4. Настройки развертывания:

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

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

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

// 6. В Google Таблице создайте заголовки столбцов в первой строке:

// - Назовите столбец "Timestamp" (если хотите автоматическую отметку времени)

// - Остальные столбцы назовите в точности с именами параметров, которые передаёт ваша форма

// (например: name, phone, email, message — регистр важен!)

// =====================================================

var SHEET_NAME = "Лист1"; // Имя листа в Google Таблице

var SHEET_ID = "1ABC123..."; // ID Google Таблицы

// -----------------------------------------------------------------

// Основная функция, которая обрабатывает POST-запросы от ЯТМ

// Принимает данные формы и записывает их в Google Таблицу

// -----------------------------------------------------------------

function doPost(e) {

// Блокировка для предотвращения конфликтов при одновременных записях

var lock = LockService.getPublicLock();

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

try {

// -----------------------------------------------------------------

// Парсинг входящих данных

// Поддерживаются два формата:

// 1. Обычные параметры (application/x-www-form-urlencoded)

// 2. JSON (application/json)

// -----------------------------------------------------------------

var data = e.parameter || {};

if (e.postData && e.postData.contents) {

try {

data = JSON.parse(e.postData.contents);

} catch(ignore) {}

}

// -----------------------------------------------------------------

// Подключение к Google Таблице

// -----------------------------------------------------------------

var sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);

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

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

// -----------------------------------------------------------------

// Формирование строки для вставки

// Перебираем все столбцы и заполняем их в том порядке, в котором они идут в таблице

// -----------------------------------------------------------------

var row = [];

for (var i = 0; i < headers.length; i++) {

if (headers[i] == "Timestamp") {

// Особый случай: если столбец называется "Timestamp", записываем текущую дату и время

row.push(new Date());

} else {

// Для остальных столбцов берём значение из полученных данных

// Если значение отсутствует, записываем пустую строку

row.push(data[headers[i]] || "");

}

// -----------------------------------------------------------------

// Запись строки в таблицу

// -----------------------------------------------------------------

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

// -----------------------------------------------------------------

// Возвращаем успешный ответ в формате JSON

// -----------------------------------------------------------------

return ContentService.createTextOutput(JSON.stringify({

"result": "success",

"row": sheet.getLastRow()

})).setMimeType(ContentService.MimeType.JSON);

} catch(err) {

// -----------------------------------------------------------------

// В случае ошибки возвращаем сообщение об ошибке

// -----------------------------------------------------------------

return ContentService.createTextOutput(JSON.stringify({

"result": "error",

"error": err.toString()

})).setMimeType(ContentService.MimeType.JSON);

} finally {

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

lock.releaseLock();

}

// -----------------------------------------------------------------

// Обработка GET-запросов (перенаправляем на doPost для единообразия)

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

// -----------------------------------------------------------------

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

Спасибо большим языковым моделям (LLM) за то, что помогли улучшить код и добавить описание!

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

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

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

После вставки кода в Apps Script самое главное - изменить значения двух переменных на свои:

SHEET_NAME
SHEET_KEY

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

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

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

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

Поэтому вы можете вернуться в свою Google Таблицу и добавить последним полем колонку Timestamp:

Дополнительная колонка Timestamp для времени отправки заявки

После этого снова откройте редактор Apps Script и в правом верхнем углу нажмите на кнопку Начать развертывание - Новое развертывание:

Начать развертывание - Новое развертывание

В открывшемся окне нажмите на иконку шестеренки и выберите тип - Веб-приложение:

Тип - Веб-приложение

Задайте следующие настройки:

Описание - можно оставить пустым
Запуск от имени - От моего имени (Me)
У кого есть доступ - Все

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

В завершение нажмите кнопку Начать развертывание. Вас попросят предоставить разрешение для доступа к данным Google:

Предоставить доступ

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

Advanced

Далее нажмите на ссылку Go to [название вашего проекта]:

Go to [название вашего проекта]

Предоставьте вашему приложению нужные разрешения. Нажмите Continue:

Continue

На заключительном шаге вы получите ссылку (URL), которую нужно скопировать для Яндекс Тег Менеджера:

Скопируйте ссылку (URL)

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

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

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

Яндекс Тег Менеджер

Активация пользовательского HTML

Перейдите в интерфейс Яндекс Тег Менеджера и активируйте опцию Пользовательский HTML в настройках счетчика Яндекс Метрики. Для этого откройте раздел Настройки - Счетчик:

Настройки - Счетчик

И включите функцию Пользовательский HTML:

Активация пользовательского HTML

Пользовательский HTML в Yandex Tag Manager (YTM) - это тип тега, который позволяет добавлять на сайт произвольный HTML-код, JavaScript или другие скрипты, которые не поддерживаются стандартными тегами и которых нет в каталоге шаблонов. Код будет выполняться при срабатывании триггера, в нем также можно использовать переменные для динамической подстановки нужных значений.

Сохраните изменения.

Извлечение данных из полей формы

Перед продолжением изучите мое руководство «Извлечение значений из полей формы с помощью Яндекс Тег Менеджера». Оно необходимо для корректного выполнения следующих шагов.

Поскольку в Яндекс Тег Менеджере на момент написания этого руководства нет пользовательской переменной Собственный код JavaScript (в отличие от Google Tag Manager, где такая переменная есть), то и извлечь значения из полей формы таким способом мы не можем. В шаблонах переменных тоже пока нет соответствующего метода API. Но есть иное решение. Оно основано на том, что мы используем специальный JavaScript-код в теге типа Пользовательский HTML, который отслеживает заполнение значения в поле формы (по CSS-селектору) и отправляет событие в dataLayer.

Пример скрипта для отслеживания одного поля формы:

<script>
(function() {
    // Находим поле формы по CSS-селектору
    var field = document.querySelector('CSS-селектор');
    
    // Проверяем наличие поля и его значения
    if (field && field.value) {
        // Инициализируем dataLayer если не существует
        window.dataLayer = window.dataLayer || [];
        
        // Отправляем событие
        dataLayer.push({
            'event': 'send_form',
            'field_phone': field.value
        });
    }
})();
</script>

(function() {

// Находим поле формы по CSS-селектору

var field = document.querySelector('CSS-селектор');

// Проверяем наличие поля и его значения

if (field && field.value) {

// Инициализируем dataLayer если не существует

window.dataLayer = window.dataLayer || [];

// Отправляем событие

dataLayer.push({

'event': 'send_form',

'field_phone': field.value

});

}

})();

</script>

, где вместо CSS-селектор вы задаете CSS-селектор вашего HTML-поля формы.

Чтобы лучше разобраться в CSS-селекторах, посмотрите мою лекцию на YouTube:

Или на Rutube:

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

Примечание: материалы и видеоурок посвящены диспетчеру тегов Google, но информация также актуальна и для Яндекс Тег Менеджера.

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

<script>
(function() {
    // Находим форму по селектору (замените на ваш)
    var form = document.querySelector('СSS-селектор');
    
    // Если форма не найдена — выходим
    if (!form) return;
    
    // Объект для хранения данных формы
    var formData = {};
    
    // Находим все поля с атрибутом name
    var inputs = form.querySelectorAll('input[name], textarea[name], select[name]');
    
    // Собираем заполненные поля
    inputs.forEach(function(field) {
        if (field.value && field.value.trim()) {
            formData[field.name] = field.value.trim();
        }
    });
    
    // Отправляем в dataLayer только если есть данные
    if (Object.keys(formData).length > 0) {
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
            'event': 'formSubmissionData',
            'formData': formData
        });
    }
})();
</script>

(function() {

// Находим форму по селектору (замените на ваш)

var form = document.querySelector('СSS-селектор');

// Если форма не найдена — выходим

if (!form) return;

// Объект для хранения данных формы

var formData = {};

// Находим все поля с атрибутом name

var inputs = form.querySelectorAll('input[name], textarea[name], select[name]');

// Собираем заполненные поля

inputs.forEach(function(field) {

if (field.value && field.value.trim()) {

formData[field.name] = field.value.trim();

}

});

// Отправляем в dataLayer только если есть данные

if (Object.keys(formData).length > 0) {

window.dataLayer = window.dataLayer || [];

dataLayer.push({

'event': 'formSubmissionData',

'formData': formData

});

}

})();

</script>

, где вместо СSS-селектор вам необходимо вставить CSS-селектор не конкретного поля формы, а самой формы.

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

Как определить CSS-селектор формы? В браузере откройте консоль разработчика (клавиша F12 для Google Chrome и Mozilla Firefox). Найдите в структуре DOM-дерева тег <form> (в HTML формы размечаются именно этим тегом). Выделив его, нажмите правой кнопкой мыши и выберите пункт Copy - Copy selector (Копировать - Копировать селектор):

Копирование селектора формы

Скопируйте это значение к себе в блокнот. Вернитесь в Яндекс Тег Менеджер, откройте раздел Теги и создайте тег типа Пользовательский HTML. Вставьте в него нижеприведенный код:

<script>
(function() {
    // ========== ПОЛЬЗОВАТЕЛЬСКИЕ НАСТРОЙКИ ==========
    // Укажите CSS-селектор вашей формы (обязательно!)
    var FORM_SELECTOR = 'selector';  // Примеры: '#contactForm', '.main-form', 'form.ajax'
    // =================================================
    
    // Находим форму по селектору
    var form = document.querySelector(FORM_SELECTOR);
    
    // Если форма не найдена — выходим без ошибки
    if (!form) return;
    
    // ========== ФУНКЦИИ СБОРА ДАННЫХ ==========
    
    // Получение имени поля из разных источников (без привязки к name)
    function getFieldName(field) {
        // 1. Атрибут name
        if (field.name) return field.name;
        
        // 2. Атрибут id
        if (field.id) return field.id;
        
        // 3. Атрибут data-name
        if (field.dataset && field.dataset.name) return field.dataset.name;
        
        // 4. Текст из связанного label (через for="id")
        if (field.id) {
            var label = document.querySelector('label[for="' + field.id + '"]');
            if (label) {
                var labelText = label.innerText.trim().replace(/\*$/, '').replace(/:/g, '').trim();
                if (labelText) return labelText;
            }
        }
        
        // 5. Ближайший label (для полей без id)
        var parentLabel = field.closest('label');
        if (parentLabel) {
            var labelText = parentLabel.innerText.trim().replace(/\*$/, '').replace(/:/g, '').trim();
            if (labelText) return labelText;
        }
        
        // 6. Placeholder (очищенный от спецсимволов)
        if (field.placeholder) {
            var placeholder = field.placeholder.trim().substring(0, 30);
            if (placeholder) return 'field_' + placeholder.replace(/[^a-zа-яё0-9]/gi, '_');
        }
        
        // 7. Тип + индекс (fallback на случай, если ничего не подошло)
        var index = Array.from(form.querySelectorAll(field.tagName)).indexOf(field);
        return field.type + '_' + index;
    }
    
    // Получение значения поля (универсальная)
    function getFieldValue(field) {
        // Чекбоксы и радио-кнопки
        if (field.type === 'checkbox' || field.type === 'radio') {
            if (field.checked) {
                return field.value || (field.type === 'checkbox' ? 'checked' : 'on');
            }
            return null;
        }
        
        // Выпадающие списки (включая multiple)
        if (field.tagName === 'SELECT') {
            if (field.multiple) {
                var selected = [];
                for (var i = 0; i < field.options.length; i++) {
                    if (field.options[i].selected) {
                        selected.push(field.options[i].value || field.options[i].text);
                    }
                }
                return selected.length ? selected : null;
            } else {
                return field.options[field.selectedIndex] ? 
                    (field.value || field.options[field.selectedIndex].text) : null;
            }
        }
        
        // Обычные текстовые поля
        var val = field.value !== undefined && field.value !== null ? String(field.value).trim() : '';
        return val !== '' ? val : null;
    }
    
    // Сбор всех данных формы
    function getFormData(formElement) {
        var formData = {};
        
        // Собираем все поля ввода
        var fields = formElement.querySelectorAll('input, textarea, select');
        
        fields.forEach(function(field) {
            // Пропускаем кнопки
            if (field.type === 'submit' || field.type === 'button' || field.type === 'reset') return;
            
            // Пропускаем скрытые технические поля (например, CSRF-токены)
            if (field.type === 'hidden' && (!field.name || field.name.indexOf('csrf') > -1)) return;
            
            var fieldName = getFieldName(field);
            var value = getFieldValue(field);
            
            if (value !== null && value !== undefined && value !== '') {
                // Обработка нескольких полей с одинаковым именем (например, группа чекбоксов)
                if (formData[fieldName]) {
                    if (!Array.isArray(formData[fieldName])) {
                        formData[fieldName] = [formData[fieldName]];
                    }
                    formData[fieldName].push(value);
                } else {
                    formData[fieldName] = value;
                }
            }
        });
        
        return formData;
    }
    
    // Отправка данных в dataLayer
    function sendToDataLayer(formElement, formData, isValid) {
        // Если нет данных — ничего не отправляем
        if (Object.keys(formData).length === 0) return;
        
        window.dataLayer = window.dataLayer || [];
        
        var payload = {
            'event': 'form_submission_data',                     // Основное событие
            'form_selector': FORM_SELECTOR,                       // Селектор формы
            'form_id': formElement.id || '',                      // ID формы (если есть)
            'form_class': formElement.className || '',            // Класс формы (если есть)
            'form_action': formElement.action || '',              // Адрес отправки
            'form_method': formElement.method || 'get',           // Метод отправки
            'form_valid': isValid !== undefined ? isValid : true, // Прошла ли валидацию
            'formData': formData                                  // Собранные данные
        };
        
        // Удаляем пустые поля для чистоты объекта
        for (var key in payload) {
            if (payload.hasOwnProperty(key) && payload[key] === '') {
                delete payload[key];
            }
        }
        
        dataLayer.push(payload);
    }
    
    // Проверка валидности формы (HTML5 + required)
    function isFormValid(formElement) {
        // Стандартная HTML5-валидация
        if (!formElement.checkValidity()) return false;
        
        // Дополнительная проверка обязательных полей
        var requiredFields = formElement.querySelectorAll('[required]');
        for (var i = 0; i < requiredFields.length; i++) {
            var field = requiredFields[i];
            var val = getFieldValue(field);
            if (!val || val === '') {
                return false;
            }
        }
        
        return true;
    }
    
    // ========== НАВЕШИВАНИЕ ОБРАБОТЧИКА СОБЫТИЙ ==========
    
    var isSubmitting = false; // Флаг для защиты от повторной отправки
    
    form.addEventListener('submit', function(e) {
        // Защита от дублей
        if (isSubmitting) return;
        
        var isValid = isFormValid(form);
        var formData = getFormData(form);
        
        // Отправляем данные в dataLayer
        sendToDataLayer(form, formData, isValid);
        
        // Если форма не прошла валидацию — отменяем стандартную отправку
        if (!isValid) {
            e.preventDefault();
            // Отправляем отдельное событие о неудачной валидации
            window.dataLayer = window.dataLayer || [];
            dataLayer.push({
                'event': 'form_validation_failed',
                'form_selector': FORM_SELECTOR,
                'form_id': form.id || ''
            });
            return;
        }
        
        // Устанавливаем блокировку на 3 секунды (защита от двойного клика)
        isSubmitting = true;
        setTimeout(function() {
            isSubmitting = false;
        }, 3000);
    });
})();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

(function() {

// ========== ПОЛЬЗОВАТЕЛЬСКИЕ НАСТРОЙКИ ==========

// Укажите CSS-селектор вашей формы (обязательно!)

var FORM_SELECTOR = 'selector'; // Примеры: '#contactForm', '.main-form', 'form.ajax'

// =================================================

// Находим форму по селектору

var form = document.querySelector(FORM_SELECTOR);

// Если форма не найдена — выходим без ошибки

if (!form) return;

// ========== ФУНКЦИИ СБОРА ДАННЫХ ==========

// Получение имени поля из разных источников (без привязки к name)

function getFieldName(field) {

// 1. Атрибут name

if (field.name) return field.name;

// 2. Атрибут id

if (field.id) return field.id;

// 3. Атрибут data-name

if (field.dataset && field.dataset.name) return field.dataset.name;

// 4. Текст из связанного label (через for="id")

if (field.id) {

var label = document.querySelector('label[for="' + field.id + '"]');

if (label) {

var labelText = label.innerText.trim().replace(/\*$/, '').replace(/:/g, '').trim();

if (labelText) return labelText;

}

// 5. Ближайший label (для полей без id)

var parentLabel = field.closest('label');

if (parentLabel) {

var labelText = parentLabel.innerText.trim().replace(/\*$/, '').replace(/:/g, '').trim();

if (labelText) return labelText;

}

// 6. Placeholder (очищенный от спецсимволов)

if (field.placeholder) {

var placeholder = field.placeholder.trim().substring(0, 30);

if (placeholder) return 'field_' + placeholder.replace(/[^a-zа-яё0-9]/gi, '_');

}

// 7. Тип + индекс (fallback на случай, если ничего не подошло)

var index = Array.from(form.querySelectorAll(field.tagName)).indexOf(field);

return field.type + '_' + index;

}

// Получение значения поля (универсальная)

function getFieldValue(field) {

// Чекбоксы и радио-кнопки

if (field.type === 'checkbox' || field.type === 'radio') {

if (field.checked) {

return field.value || (field.type === 'checkbox' ? 'checked' : 'on');

}

return null;

}

// Выпадающие списки (включая multiple)

if (field.tagName === 'SELECT') {

if (field.multiple) {

var selected = [];

for (var i = 0; i < field.options.length; i++) {

if (field.options[i].selected) {

selected.push(field.options[i].value || field.options[i].text);

}

return selected.length ? selected : null;

} else {

return field.options[field.selectedIndex] ?

(field.value || field.options[field.selectedIndex].text) : null;

}

// Обычные текстовые поля

var val = field.value !== undefined && field.value !== null ? String(field.value).trim() : '';

return val !== '' ? val : null;

}

// Сбор всех данных формы

function getFormData(formElement) {

var formData = {};

// Собираем все поля ввода

var fields = formElement.querySelectorAll('input, textarea, select');

fields.forEach(function(field) {

// Пропускаем кнопки

if (field.type === 'submit' || field.type === 'button' || field.type === 'reset') return;

// Пропускаем скрытые технические поля (например, CSRF-токены)

if (field.type === 'hidden' && (!field.name || field.name.indexOf('csrf') > -1)) return;

var fieldName = getFieldName(field);

var value = getFieldValue(field);

if (value !== null && value !== undefined && value !== '') {

// Обработка нескольких полей с одинаковым именем (например, группа чекбоксов)

if (formData[fieldName]) {

if (!Array.isArray(formData[fieldName])) {

formData[fieldName] = [formData[fieldName]];

}

formData[fieldName].push(value);

} else {

formData[fieldName] = value;

}

});

return formData;

}

// Отправка данных в dataLayer

function sendToDataLayer(formElement, formData, isValid) {

// Если нет данных — ничего не отправляем

if (Object.keys(formData).length === 0) return;

window.dataLayer = window.dataLayer || [];

var payload = {

'event': 'form_submission_data', // Основное событие

'form_selector': FORM_SELECTOR, // Селектор формы

'form_id': formElement.id || '', // ID формы (если есть)

'form_class': formElement.className || '', // Класс формы (если есть)

'form_action': formElement.action || '', // Адрес отправки

'form_method': formElement.method || 'get', // Метод отправки

'form_valid': isValid !== undefined ? isValid : true, // Прошла ли валидацию

'formData': formData // Собранные данные

};

// Удаляем пустые поля для чистоты объекта

for (var key in payload) {

if (payload.hasOwnProperty(key) && payload[key] === '') {

delete payload[key];

}

dataLayer.push(payload);

}

// Проверка валидности формы (HTML5 + required)

function isFormValid(formElement) {

// Стандартная HTML5-валидация

if (!formElement.checkValidity()) return false;

// Дополнительная проверка обязательных полей

var requiredFields = formElement.querySelectorAll('[required]');

for (var i = 0; i < requiredFields.length; i++) {

var field = requiredFields[i];

var val = getFieldValue(field);

if (!val || val === '') {

return false;

}

return true;

}

// ========== НАВЕШИВАНИЕ ОБРАБОТЧИКА СОБЫТИЙ ==========

var isSubmitting = false; // Флаг для защиты от повторной отправки

form.addEventListener('submit', function(e) {

// Защита от дублей

if (isSubmitting) return;

var isValid = isFormValid(form);

var formData = getFormData(form);

// Отправляем данные в dataLayer

sendToDataLayer(form, formData, isValid);

// Если форма не прошла валидацию — отменяем стандартную отправку

if (!isValid) {

e.preventDefault();

// Отправляем отдельное событие о неудачной валидации

window.dataLayer = window.dataLayer || [];

dataLayer.push({

'event': 'form_validation_failed',

'form_selector': FORM_SELECTOR,

'form_id': form.id || ''

});

return;

}

// Устанавливаем блокировку на 3 секунды (защита от двойного клика)

isSubmitting = true;

setTimeout(function() {

isSubmitting = false;

}, 3000);

});

})();

</script>

В строке:

var FORM_SELECTOR = 'selector';

1	var FORM_SELECTOR = 'selector';

Вместо selector вставьте значение селектора своей формы, которое вы скопировали на предыдущем шаге:

Вставка селектора вашей формы

Больше никаких изменений в коде не требуется. Вы можете проверить код на ошибки, нажав на кнопку Проверить код под редактором HTML. Их быть не должно.

В качестве триггера активации укажите Просмотр страницы. Задайте тегу название (например - HTML - Отправка формы с полями) и сохраните его.

Представленный выше код - это универсальный скрипт для автоматического сбора данных с любых веб-форм и отправки их с использованием уровня данных (dataLayer). Он не требует наличия атрибута name у полей, так как автоматически определяет их имена по id, тексту связанной метки (label) или placeholder. Скрипт самостоятельно находит форму по указанному вами CSS-селектору, корректно обрабатывает все типы полей (текст, чекбоксы, радио-кнопки, выпадающие списки), проверяет валидность формы, защищает от повторной отправки и в случае успеха (или ошибки валидации) отправляет в dataLayer структурированные данные о заполненных полях, включая мета-информацию о форме (ID, класс, метод отправки).

Теперь перейдите в раздел Триггеры и создайте триггер типа Специальное событие. Задайте ему следующие настройки:

Название события - form_submission_data|form_validation_failed (именно так, как здесь!)
Поставьте галочку Использовать регулярные выражения

Триггер специального события

Задайте триггеру название (например - Отправка формы с полями) и сохраните его.

15 апреля 2026 года Яндекс Тег Менеджер в очередной раз обновил режим отладки, добавил новый функционал и обновил интерфейс панели. В связи с этим скриншоты в других моих статьях блога могут быть неактуальны.

Теперь вы можете воспользоваться режимом предварительного просмотра, чтобы проверить выполнение кода и корректное извлечения значений из полей формы. Для этого запустите режим отладки Яндекс Тег Менеджера и отправьте тестовую заявку на своем сайте. Если вы все сделали правильно, то на шкале событий должно появиться событие form_submission_data:

Событие form_submission_data

Нажав на него, перейдите на вкладку DataLayer. Там вы должны увидеть данные по всей формы, включая значения заполненных полей:

Вкладка "DataLayer" - данные по всей формы, включая значения полей

Если это так, ты вы все сделали правильно. Если код не сработал, попробуйте доработать его под свой проект с помощью больших языковых моделей (ChatGPT, Gemini, DeepSeek, Qwen и др.).

После того как вы убедились в корректности получения данных полей формы, необходимо вернуться в Яндекс Тег Менеджер и создать пользовательские переменные типа Переменная уровня данных. С использованием точечной нотации введите следующие имена переменных:

formData.name
formData.email
formData.message

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

Переменные уровня данных

Задайте каждой переменной название и сохраните ее (их).

Повторно откройте режим отладки Яндекс Тег Менеджера и еще раз отправьте тестовую заявку. Выберите событие form_submission_data на временной шкале и перейдите на вкладку Переменные. Там напротив каждой созданной переменной вы должны увидеть возвращенное значение:

Каждая переменная уровня данных вернуло нужное значение из поля формы

Поздравляю вас! Мы с вами завершили предварительную подготовку к отправке всех данных в Google Sheets.

Итоговый тег

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

Для этого перейдите в раздел Теги и создайте тег типа Пользовательский HTML. Вставьте в него нижеприведенный код:

<script>
(function() {
  // Оборачиваем в кавычки, чтобы Яндекс Тег Менеджер подставил строку правильно
  var name = 'Переменная для поля имени';
  var email = 'Переменная для поля email';
  var message = 'Переменная для поля сообщения';
  
  // Если переменная ЯТМ вернет строку "undefined" или будет пустой
  if (!name || name === 'undefined') name = '';
  if (!email || email === 'undefined') email = '';
  if (!message || message === 'undefined') message = '';

  var url = "https://script.google.com/macros/s/AKfycbyWkIB2-HmAnXycls-qN8rjDhJK-lQP45iLSEI2MecBPE2ENISwmauYk8ckby0aKh4xaQ/exec";
  
  var fullUrl = url + "?Имя=" + encodeURIComponent(name) +
                      "&Почта=" + encodeURIComponent(email) +
                      "&Сообщение=" + encodeURIComponent(message);
  
  // Отправка через sendBeacon (не отменяется при перезагрузке страницы)
  if (navigator.sendBeacon) {
    navigator.sendBeacon(fullUrl);
  } else {
    // Fallback для старых браузеров
    fetch(fullUrl, { method: 'GET', mode: 'no-cors' });
  }
})();
</script>

(function() {

// Оборачиваем в кавычки, чтобы Яндекс Тег Менеджер подставил строку правильно

var name = 'Переменная для поля имени';

var email = 'Переменная для поля email';

var message = 'Переменная для поля сообщения';

// Если переменная ЯТМ вернет строку "undefined" или будет пустой

if (!name || name === 'undefined') name = '';

if (!email || email === 'undefined') email = '';

if (!message || message === 'undefined') message = '';

var url = "https://script.google.com/macros/s/AKfycbyWkIB2-HmAnXycls-qN8rjDhJK-lQP45iLSEI2MecBPE2ENISwmauYk8ckby0aKh4xaQ/exec";

var fullUrl = url + "?Имя=" + encodeURIComponent(name) +

"&Почта=" + encodeURIComponent(email) +

"&Сообщение=" + encodeURIComponent(message);

// Отправка через sendBeacon (не отменяется при перезагрузке страницы)

if (navigator.sendBeacon) {

navigator.sendBeacon(fullUrl);

} else {

// Fallback для старых браузеров

fetch(fullUrl, { method: 'GET', mode: 'no-cors' });

}

})();

</script>

В приведенном выше коде вместо строк Переменная для поля имени, Переменная для поля email и Переменная для поля сообщения вам нужно подставить названия ваших переменных уровня данных из Яндекс Тег Менеджера, которые вы создали на предыдущем шаге. Обратите внимание: в коде используются кавычки. Это правильный и безопасный подход, так как ЯТМ корректно подставит строковое значение даже в случае, если переменная по каким-то причинам не будет определена.

Ключевое отличие этого скрипта - использование метода navigator.sendBeacon(). В отличие от обычной отправки через fetch или new Image(), sendBeacon специально создан для ситуаций, когда страница перезагружается или закрывается сразу после отправки формы (например, при переходе на страницу «Спасибо»). Браузер не отменяет такой запрос, и данные гарантированно доходят до сервера. Для старых браузеров предусмотрен fallback через fetch с режимом no-cors.

Если в вашей форме другие поля (например, Телефон, Город, Компания) или иное их количество, код нужно будет дополнить - добавить новые переменные в начало скрипта (например, var phone = '{{DLV - Phone}}';), а затем включить их в формирование fullUrl по аналогии с существующими. Также обязательно замените ссылку url на адрес вашего собственного веб-приложения Apps Script, который вы получили после публикации скрипта.

Важно: Код рассчитан на передачу трёх полей («Имя», «Почта», «Сообщение»). Если у вас их больше или меньше — скорректируйте скрипт соответствующим образом, удалив лишние строки или добавив новые. Метод sendBeacon работает для GET-запросов именно в таком формате — параметры передаются через строку запроса.

Примечание: код приведен в качестве примера и рассчитан на передачу трех полей (Имя, Почта, Сообщение). Если у вас их больше или меньше - скорректируйте скрипт соответствующим образом, удалив лишние строки или добавив новые. Метод sendBeacon работает для GET-запросов именно в таком формате - параметры передаются через строку запроса.

Для моего примера это будет выглядеть так:

Добавьте свои переменные и URL веб-приложения из Apps Script

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

Хотите лучше всех разбираться в Яндекс Тег Менеджере? Пройдите обучение уже сейчас!

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

В Яндекс Тег Менеджере это будет выглядеть так:

Итоговый тег отправки заявок с сайта в Google Таблицы

Проверка передачи данных

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

Режим отладки ЯТМ

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

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

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

Метки: Apps Script, Google Таблицы, Яндекс Тег Менеджер

Передача заявок с сайта в Google Таблицы с помощью Яндекс Тег Менеджера

Введение

Google Таблицы

Яндекс Тег Менеджер

Активация пользовательского HTML

Извлечение данных из полей формы

Итоговый тег

Проверка передачи данных

Еще статьи