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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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