Привет, мир!
Поскольку это моя первая статья, я просто обязан начать ее именно с этой фразы.
В ходе работы над проектом появилась задача связать форму обратной связи на странице с гугл таблицами. Суть проекта в отслеживании конверсии команды. В русскоязычном интернете мало информации на эту тему, поэтому предлагаю свое решение.
Для реализации задачи потребуется google apps script и форма обратной связи.
Перейду сразу к делу.
Шаг 1: Создаем новый гугл документ
Тут нам потребуется разметить таблицу под задачу. В моем случае это названия для колонок leadCount ma_name ma_email referer formid send.
Шаг 2: Переходим к созданию скрипта
В ленте действий Расширения → Apps Script
Вместо функции myFunction вставляем код ниже.
function doPost(e){
const sheet = SpreadsheetApp.getActiveSheet();
сonst n = sheet.getLastRow() + 1;
const d = new Date();
sheet.getRange("A"+n).setValue(e.parameter.p1); // leadCount
sheet.getRange("B"+n).setValue(e.parameter.p2); // ma_name
sheet.getRange("C"+n).setValue(e.parameter.p3); // ma_email
sheet.getRange("D"+n).setValue(e.parameter.p4); // refferer
sheet.getRange("E"+n).setValue(e.parameter.p5); // formid
sheet.getRange("F"+n).setValue(d);
return ContentService.createTextOutput().append(JSON.stringify({result: 'comlite'}))
}Рассмотрим работу скрипта.
function doPost(e) - так гугл будет понимать, что функцию необходимо вызвать при post запросе к скрипту.
const sheet = SpreadsheetApp.getActiveSheet(); - получаем активную таблицу.
сonst n=sheet.getLastRow()+1; - ищем номер следующей пустой строки.
const d = new Date(); - записываем текущую дату в виде дд.мм.гггг.
sheet.getRange("A"+n).setValue(e.parameter.p1); - забираем значение первого параметра из полученного запроса и записываем его в ячейку.
return ContentService.createTextOutput().append(JSON.stringify({result: 'comlite'})) - возвращаем ответ об успешном завершении записи.
Шаг 3: Развертывание скрипта
Тянемся мышкой к кнопке Начать развертывание → Новое развертывание.
Тип конфигурации → Веб-приложение
Запуск → От моего имени (вашапочта@gamil.com)
У кого есть доступ → Все
Нажать на кнопку - Начать развертывание
Гугл попросит разрешение для этого приложения и сообщит, что оно не безопасно, соглашаемся и доверяем приложению.
Шаг 4: Использование скрипта
После предоставления доступа появится ссылка на использование приложения, ее мы будет использовать для обращения к скрипту и добавления данных.
Ссылка вида https://script.google.com/macros/s/ИДЕНТИФИКАТОР_РАЗВЕРТЫВНИЯ/exec?p1=1&p2=An&p3=rrree@mail.ru&p4=site.ru&p5=form1
где p1, p2, p3, p4, p5 - параметры из скрипта, которые он любезно поместит в таблицу.
Далее нужно отправить POST запрос на этот адрес из формы или из JavaScript. Таким образом, данные формы будут отправлены в гугл таблицу и будут доступны для просмотра.
По сути скрипт сможет работать и с GET запросом, для этого название функции должно быть doGet(), но doGet потребуется для запроса данных и вывода их на страницу.
Комментарии (7)
VanishMax
00.00.0000 00:00Спасибо за статью! Я как раз возился с их API, разозлился и перешел на другую базу данных. С таким решением будет гораздо проще
13Magistr
00.00.0000 00:00Я новичок, использую гугл таблицы для связи с тг ботом бухгалтерии, где пишем траты по проектам и они раскидываются сразу, но только сейчас подумал о том, что можно их(таблицы) использовать как бесплатную и удобную мини бд.
Robastik
00.00.0000 00:00+2А если использовать ещё и Гугл Forms, то и скрипты не нужны, т.к. Формы сами пишут в таблицу и из коробки имеют валидацию ввода.
jankri
00.00.0000 00:00+1Ну, можно и проще. :)
function doPost(e){ const sheet = SpreadsheetApp.getActiveSheet(); sheet.appendRow([ e.parameter.p1, // leadCount e.parameter.p2, // ma_name e.parameter.p3, // ma_email e.parameter.p4, // refferer e.parameter.p5, // formid new Date() ]); return ContentService.createTextOutput().append(JSON.stringify({result: 'comlete'})) }
SergeyDeryabin
Интересное решение. Могу заметить только лишь что если отправлять с фронта - можно посмотреть полный путь и забить ваш отчет мусором.
Я бы сделал через API https://developers.google.com/sheets/api/reference/rest Создать приложение, авторизовать пользователя с правами на запись в документ через приложение и получить токен. При отправке формы сначала проверить капчу, и потом уже если все ок - записывать данные в документ через API
Gertyhiller Автор
Спасибо за совет. Сейчас, из-за небольшого количества сотрудников, чтобы не случилось забивания мусором таблицы, я сделал проверку e-mail перед отправкой и запретил индексацию страницы ботами. За два месяца заметил лишь одну попытку отправить данные автозаполнением ботом и рад этому. А так логика отправки данных находится в бандле реакта
SergeyDeryabin
Там тоже откапывается без проблем, это если в консоли покопаться + запрос будет видно отправленный