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

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

50 UAH 150 UAH 500 UAH 1000 UAH 3000 UAH 5000 UAH

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

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

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

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

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

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

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

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

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

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

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

Перед нами відкриється редактор коду. Перейменуйте проєкт (1), файл скрипту (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 Sheets

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

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

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

Apps Script

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Робота з Google Tag Manager

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

Робота з 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):

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

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

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

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

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

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

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

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

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

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

Налаштування тегу в 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 Таблиці:

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

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

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

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

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

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

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

50 UAH 150 UAH 500 UAH 1000 UAH 3000 UAH 5000 UAH

Інші матеріали

Топ-5 помилок біздева на міжнародній конференції

Maksym Boronenko 3 години тому

Минулого року я зробив дуже стислу систематизацію свого досвіду участі у міжнародних івентах – особливо враховуючи, що за місяць до цього команда bill_line вперше брала участь в одному з найбільших профільних заходів. Однак зараз мені здається, що розповів про особливості роботи біздев-команди надто мало та пройшовся по тезах, що будуть зрозумілі людині навіть з невеликим досвідом у цій сфері.

Топ-5 помилок біздева на міжнародній конференції

У Києві відбудеться конференція «Навігатори інновацій. Змінюй правила гри»

Ольга Топольська 7 годин тому

Juscutum у партнерстві з IT Ukraine Association запрошують на масштабний захід «Навігатори інновацій. Змінюй правила гри»

У Києві відбудеться конференція «Навігатори інновацій. Змінюй правила гри»

На ШІ-пошук у Google потрібно вдесятеро більше електроенергії, ніж на звичайний

Олеся Дерзська 8 годин тому

Google цьогоріч представив інструменти з інтеграцією ШІ, що коротко переказують зміст новин та документів. Вони споживають вдесятеро більше електроенергії за звичайний пошук у Google, пише видання Boing Boing.

На ШІ-пошук у Google потрібно вдесятеро більше електроенергії, ніж на звичайний

Google в США вимагатиме маркувати ШІ в передвиборчій рекламі

Олеся Дерзська 10 годин тому

В США Google перед президентськими виборами вимагатиме від рекламодавців маркувати ШІ в рекламі, повідомляє Reuters. Втім, тепер позначати видозмінені чи синтетичні зображення стало легше.

Google в США вимагатиме маркувати ШІ в передвиборчій рекламі

Ринок Перської затоки для українського ІТ: що потрібно знати

Анатолій Моткін 17 годин тому

IT-сектор поряд із військовим — є однією з двох фундаментальних опор стійкості України перед російською агресією з першого дня війни. Сьогодні, після двох років війни, ключовим питанням стало – в якому напрямку розвивати цифрову екосистему в нинішніх умовах?

Ринок Перської затоки для українського ІТ: що потрібно знати

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

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

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

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

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

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

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

Будь в курсі зі SPEKA

Дякуємо, що підписалися на SPEKA. Буде гаряче!

Топ-5 помилок біздева на міжнародній конференції

У Києві відбудеться конференція «Навігатори інновацій. Змінюй правила гри»

На ШІ-пошук у Google потрібно вдесятеро більше електроенергії, ніж на звичайний

Google в США вимагатиме маркувати ШІ в передвиборчій рекламі

Ринок Перської затоки для українського ІТ: що потрібно знати