Упс! Не вдала спроба:(
Будь ласка, спробуйте ще раз.

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

Andrii Ochkovskyi
Andrii Ochkovskyi Web Analyst | Inweb
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 Google Sheets — розширення Apps Script

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

Apps Script — розширення Apps Script 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();
}
}

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

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

Google Sheets Google Sheets

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

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

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

Apps Script Apps Script

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

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

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

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

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

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

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

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

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

Заповнення заголовків полів в Apps Script Заповнення заголовків полів в Apps Script
Результат в Google Sheets Результат в Google Sheets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Робота з Google Tag Manager Робота з Google Tag Manager

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

Робота з Google Tag Manager Робота з Google Tag Manager

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

function() {
var value = document.querySelector('YOUR_SELECTOR').value;
return value;
}

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

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

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

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

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

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

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

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

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

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

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

Налаштування тегу в Google Tag Manager Налаштування тегу в 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 Результат у 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
0
Прокоментувати
Інші матеріали

Як залишатися продуктивними, працюючи віддалено

Анна Геллар 20 годин тому

Microsoft анонсувала лінійку ноутбуків Copilot+PC. Що це таке та чи вдасться компанії потіснити Apple

Олександр Тартачний 22 години тому

Як Google підтримує українські стартапи під час війни

Сергій Коноплицький 22 травня 2024 11:25

Google планує зробити ШІ-рекламу

Владислав Паливода 22 травня 2024 07:26

Google привабить користувачів до застосунків

Олеся Дерзська 21 травня 2024 21:02