23.02.2023 19:53
Gertyhiller 7 3000 Источник

Привет, мир!

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

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

Для реализации задачи потребуется 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)


  1. SergeyDeryabin
    00.00.0000 00:00
    #25263074
    +1

    Интересное решение. Могу заметить только лишь что если отправлять с фронта - можно посмотреть полный путь и забить ваш отчет мусором.

    Я бы сделал через API https://developers.google.com/sheets/api/reference/rest Создать приложение, авторизовать пользователя с правами на запись в документ через приложение и получить токен. При отправке формы сначала проверить капчу, и потом уже если все ок - записывать данные в документ через API


    1. Gertyhiller Автор
      00.00.0000 00:00
      #25263468

      Спасибо за совет. Сейчас, из-за небольшого количества сотрудников, чтобы не случилось забивания мусором таблицы, я сделал проверку e-mail перед отправкой и запретил индексацию страницы ботами. За два месяца заметил лишь одну попытку отправить данные автозаполнением ботом и рад этому. А так логика отправки данных находится в бандле реакта


      1. SergeyDeryabin
        00.00.0000 00:00
        #25264028

        А так логика отправки данных находится в бандле реакта

        Там тоже откапывается без проблем, это если в консоли покопаться + запрос будет видно отправленный


  1. VanishMax
    00.00.0000 00:00
    #25263292

    Спасибо за статью! Я как раз возился с их API, разозлился и перешел на другую базу данных. С таким решением будет гораздо проще


  1. 13Magistr
    00.00.0000 00:00
    #25263446

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


  1. Robastik
    00.00.0000 00:00
    #25263518
    +2

    А если использовать ещё и Гугл Forms, то и скрипты не нужны, т.к. Формы сами пишут в таблицу и из коробки имеют валидацию ввода.


  1. jankri
    00.00.0000 00:00
    #25270164
    +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'}))
}