Головна Спільнота

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу

10 квітня 2023 13:00 7 хвилин читання

Шукаєте систему для управління відносинами з клієнтами та не хочете вкладати у це гроші? Цей матеріал допоможе створити аналог CRM, за допомогою якого можна передавати дані з сайту до Google Таблиць, щоб зручно збирати та обробляти інформацію.

Кому підійде облік даних в Google Таблицях?

Малому та середньому бізнесу, у якого кількість клієнтів дозволяє обробляти дані через таблиці.
Нещодавно відкритим сайтам, які ще не мають змоги або ресурсів на впровадження повноцінної CRM-системи.

У статті розглянемо налаштування передання даних у таблиці на прикладі контактної форми.

Читайте також: ITBridge: відповідальне управління ШІ — п'ятий воркшоп Go-To-Market Bootcamp

Але може постати запитання: чому б не передавати, наприклад, дані покупців (пошта, номер телефону) одразу до Google Analytics? Згідно з умовами використання Google Analytics, власникам сайтів заборонено надсилати персональні дані користувачів до Google Analytics.

Налаштування передання даних складається з двох основних етапів:

1
Налаштування Web-застосунка для Google Sheets.
2
Налаштування відправлення даних у Google Tag Manager.

Як налаштувати Web-застосунок для Google Sheets

У новій таблиці Google Sheets перейдіть у Apps Script. Розширення Apps Script розташоване у відповідному вкладенні:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 1

Google Sheets — розширення Apps Script

Перед нами відкриється редактор коду. Перейменуйте проєкт (1), файл скрипту (2) та очистіть поле редактора коду:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 2

Apps Script — розширення Apps Script

Далі скопіюйте код та вставте його у поле редактора:

var SHEET_NAME = "Sheet1"; // Назва акруша

var SHEET_KEY = "key_of_your_sheet"; // ID таблиці

var SCRIPT_PROP = PropertiesService.getScriptProperties();

function doGet(e) {

return handleResponse(e);

}

function doPost(e) {

return handleResponse(e);

}

function handleResponse(e) {

var lock = LockService.getPublicLock();

lock.waitLock(30000);

try {

var doc = SpreadsheetApp.openById(SHEET_KEY);

var sheet = doc.getSheetByName(SHEET_NAME);

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") {

row.push(new Date());

} else {

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

}

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

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();

}

var SHEET_NAME = "Sheet1"; // Назва акруша

var SHEET_KEY = "key_of_your_sheet"; // ID таблиці

var SCRIPT_PROP = PropertiesService.getScriptProperties();

function doGet(e) {

return handleResponse(e);

}

function doPost(e) {

return handleResponse(e);

}

function handleResponse(e) {

var lock = LockService.getPublicLock();

lock.waitLock(30000);

try {

var doc = SpreadsheetApp.openById(SHEET_KEY);

var sheet = doc.getSheetByName(SHEET_NAME);

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") {

row.push(new Date());

} else {

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

}

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

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();

}

Єдине, що потрібно змінити у коді, — це замінити значення параметрів SHEET_NAME та SHEET_KEY на відповідну назву аркуша та ідентифікатор таблиці.

Ідентифікатор таблиці можна отримати з адресної строки між «spreadsheets/d/» та «/»:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 3

Google Sheets

Готовий код має вигляд:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 4

Готовий код в Apps Script

Тепер збережіть файл скрипта (1) та створіть нове розгортання (2):

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 5

Apps Script

У випливному вікні налаштування розгортання вкажіть його тип — «Web-застосунок»‎:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 6

Завдання параметру Web застосунок в Apps Script

Далі налаштуйте розгортання: вкажіть опис (1), у пункті «Виконати як» залиште свій email (2), а у списку „Хто має доступ» оберіть «Хто завгодно» (3). Натисніть „Розгорнути“:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 7

Налаштування розгортання в Apps Script

Підписуйтеся на наші соцмережі

Далі перейдіть до авторизації за допомогою Google-акаунту та надайте застосунку всі необхідні доступи:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 8

Надання доступу в Apps Script

Після проходження авторизації має відкритися вікно із посиланням, з яким ми будемо працювати вже у Google Tag Manager.

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 9

Посилання для Google Tag Manager Apps Script

Наступним кроком заповніть заголовки полів у таблиці відповідно до форми, дані з якої потрібно надсилати до Google Таблиці. Для прикладу візьмемо таку форму:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 10

Заповнення заголовків полів в Apps Script

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 11

Результат в Google Sheets

Зверніть увагу, що перше поле (дата та час відправлення форми) повинно мати назву «Timestamp» (з великої літери).

На цьому етапі можна перевірити надсилання даних до нашої таблиці. Для цього скопіюйте посилання, яке ми отримали після створення розгортання. Також його завжди можна отримати у меню управління розгортаннями:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 12

Перевірка надсилання в данихApps Script

Тепер вставте це посилання до адресного рядка та в кінці після символу «?» перелічіть параметри з їхніми значеннями у такому форматі:

https://script.google.com/macros/s/AKfycbx0eNJZlo5LUQYC4AjqDClJEJSJuHw01BPHazAkAgePJLUZwx35KWVuRuliw4QzTJUd/exec?param1=value1&param2=value2&param3=value3&...

Важливо: назви параметрів записуйте такими, якими вони вказані у заголовках таблиці з урахуванням регістру.

Параметр Timestamp вказувати не треба, він надходить автоматично. Наприклад:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 13

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

Далі натисніть Enter: у випадку успішного відправлення запиту ви отримаєте повідомлення про успішне відправлення:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 14

Повідомлення про успішне відправлення в Apps Script

Тим часом у таблиці з'являться дані

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 15

Дані у таблиці Google Sheets

Як налаштувати відправлення даних у Google Tag Manager

На цьому етапі переходимо до налаштувань у Google Tag Manager. Для кожного з полів форми створимо окрему змінну.

У Google Tag Manager переходимо на вкладення «Змінні» та натискаємо „Створити“:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 16

Робота з Google Tag Manager

Обираємо змінну типу «Користувацький JavaScript»:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 17

Робота з Google Tag Manager

У поле для коду вставте код такого зразка:

function() {

var value = document.querySelector('YOUR_SELECTOR').value;

return value;

}

function() {

var value = document.querySelector('YOUR_SELECTOR').value;

return value;

}

Замість YOUR_SELECTOR вкажіть відповідний CSS-селектор поля для введення. Щоб отримати CSS-селектор для поля «Ім'я», клікніть правою кнопкою миші по полю (1) та у меню натисніть «Перевірити» (2):

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 18

Перевірка CSS-селектора в Google Tag Manager

Далі відкриється вікно з інструментами для розробника, у якому клікніть правою кнопкою миші на код елемента відповідного поля та скопіюйте селектор:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 19

Робота з з інструментами для розробника у Google Tag Manager

Отже, налаштування змінної для поля «Ім'я» виглядає так:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 20

Налаштування змінної для поля «Ім'я» в Google Tag Manager

Для інших змінних робимо те саме. У нашому прикладі маємо такий набір змінних:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 21

Робота зі змінними у Google Tag Manager

Наступним кроком налаштуємо активатор для відправлення форми. У Google Tag Manager перейдіть на вкладення «Активатори» та тисніть «Створити». Далі оберіть тип активатора — у нашому прикладі це «Відправка форми». Заповніть необхідні параметри та тисніть «Зберегти»:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 22

Налаштування активатора для відправлення форми у Google Tag Manager

Тепер переходьте до налаштування тегу, який буде відправляти дані з форми до нашої Google Таблиці. На вкладенні «Теги» натисніть „Створити». Тип тегу — «Користувацьке зображення»:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 23

Налаштування тегу в Google Tag Manager

У поле «URL зображення» вставте посилання, яке до цього було згенеровано у web-застосунку. У кінці посилання після знака «?» запишіть параметри, які тег буде відправляти до таблиці. Значеннями вкажіть назви змінних, які були створені раніше, у подвійних фігурних дужках. У нашому випадку посилання з параметрами виглядає так:

https://script.google.com/macros/s/AKfycbx0eNJZlo5LUQYC4AjqDClJEJSJuHw01BPHazAkAgePJLUZwx35KWVuRuliw4QzTJUd/exec?Name={{cjs - contact form - name}}&Email={{cjs - contact form - email}}&Phone={{cjs - contact form - phone}}&Message={{cjs - contact form - message}}

Активатором оберіть раніше налаштований активатор для форми та збережіть тег. Отже, ми отримали налаштований тег для контактної форми:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 24

Налаштований тег для контактної форми

Тепер можна протестувати налаштування. У режимі попереднього перегляду заповнюємо форму та відправляємо:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 25

Перевірка налаштування

У разі успішного відпрацювання активатора введені дані надсилаються до Google Таблиці:

Google Таблиці замість CRM? Безплатне та зручне рішення для малого та середнього бізнесу зображення 26

Результат у Google Sheets

Як видно з прикладу, все коректно відпрацьовує, а отже, можна публікувати GTM-контейнер.

Коротка післямова

Ми розібрали спосіб налаштування передання даних з форм на сайті до таблиць Google. Проте як параметри у посиланні web-застосунку можна передавати не тільки контактні дані з форм, а й назви подій, Client ID, дані транзакції електронної торгівлі та багато іншого.

Тепер ви знаєте, як можна створити аналог системи аналітики у Google таблицях. Якщо ж ви у пошуку того, хто реалізує професійне просування сайту та бізнесу, звертайтесь до спеціалістів Inweb (частина групи IT-компаній Netpeak Group) . Навіть якщо не знаєте точно, що саме треба для зростання вашого проєкту, ми допоможемо визначитись та створимо для вас стратегію.

Якщо ви хочете поділитися з читачами SPEKA власним досвідом, розповісти свою історію чи опублікувати колонку на важливу для вас тему, долучайтеся. Відтепер ви можете зареєструватися на сайті SPEKA і самостійно опублікувати свій пост.