Як налаштувати цілі в Google Analytics для сайту на Shopify

Ганна Філіна

SEO-спеціаліст

Подобається

Содержание статьи
1. Як налаштувати цілі для Shopify в Universal Analytics
1.1 Налаштування цілі Відправлення форми
1.2 Перехід у соціальну мережу (клік по іконці)
2. Як налаштувати цілі у Google Analytics 4 для сайту на Shopify
2.1 Налаштування цілі Додавання товару до wishlist
2.2 Клік за номером телефону

Останнім часом ми маємо все більше проєктів на CMS Shopify. Це платформа, заточена під завдання електронної комерції: вона має оптимальні шаблони для розробки власного інтернет-магазину та вбудовану систему оплати. До того ж Shopify повністю інтегрується з Google Analytics.

Для початку робіт з платформою потрібен дозвіл на редагування в адмінці магазину.

У стандартній документації Shopify вказано, що електронна комерція налаштована за замовчуванням. Для Universal Analytics її потрібно включити у представленні даних аналітики. Додатково налаштовувати її не потрібно.

Але трапляється таке, що SEO-спеціалісту потрібно зібрати більше даних про дії користувачів. Наприклад, відстежувати кліки за номерами телефонів або додавання товарів у wishlist. І нещодавно я зіткнулася з таким завданням. Цілі для сайтів на Shopify я налаштовувала за допомогою GTM.

У цій статті покажу, як налаштувати цілі для Universal Analytics та для Google Analytics 4 на декількох робочих прикладах.

1. Як налаштувати цілі для Shopify в Universal Analytics

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

Активація Google Analytics

Перевіримо, чи під’єднана в нас Shopify до Google Analytics. Для цього в Налаштуваннях заходимо в Online Store – Preferences – Google Analytics й перевіряємо, чи стоїть там id Аналітики. Якщо ні, то під’єднуємо Аналітику.

Тепер можна починати налаштування цілей.

1.1 Налаштування цілі Відправлення форми

Розберемо крок за кроком, як налаштувати ціль для відстеження відправки форми на сторінці Контакти.

Почнемо з налаштування в GTM. У Google Tag Manager потрібно створити новий тригер. Для цього переходимо у розділ Тригери та справа угорі натискаємо Створити.

Створення нового тригеру GTM

Рис. 1 – Створення нового тригеру

Налаштовуємо тригер. Перевіряємо, чи є в тегу <form> id. Якщо є, то це один із найпростіших способів налаштувати відстеження відправки форми, яка записуватиметься в Аналітику, тільки якщо форма дійсно відправилася.

Щоб подивитися id, потрібно відкрити Інспектор коду (Ctrl+Shift+C) та знайти тег <form>. Нижче на скріншоті дивимося, де має бути id:

Тег form в Інспекторі коду GTM

Рис. 2 – Тег form в Інспекторі коду

Копіюємо значення id та прописуємо умову в GTM: Form ID дорівнює contact_form (у моєму випадку це саме contact_form, але у вас може бути ваше значення). Далі пишемо назву тригера та зберігаємо його.

Прописання умови активації тригера GTM

Рис. 3 – Прописання умови активації тригера

Налаштовуємо тег. Вибираємо тип тегу Google: Universal Analytics. Тип відстеження: Подія. У параметрах відстеження подій можна прописати лише Категорії та Дії, інші поля не обов’язково заповнювати. Можна взяти з прикладу значення, які є на скріншоті.

Налаштування тегу відстеження GTM

Рис. 4 – Налаштування тегу відстеження GTM

Також потрібно вибрати в налаштуваннях Google Analytics змінну з ідентифікатором відстеження Аналітики. Дивимось на скріншот:

Обрання змінної налаштувань GTM

Рис. 5 – Обрання змінної налаштувань

Щоб створити змінну, потрібно вибрати Змінні та створити нову. Вибрати тип змінної — Налаштування Google аналітики. І додати id відстеження з Google Аналітики.

Конфігурація змінної GTM

Рис. 6 – Конфігурація змінної

Далі вибираємо ваш створений тригер та зберігаємо тег. Для того, щоб перевірити, чи працює ціль, потрібно відкрити Попередній перегляд і спробувати відправити форму. Якщо ціль працює коректно, то можна створювати ціль у Google Analytics.
Створення цілі в Google Analytics. На першому етапі вибираємо власну ціль. Далі вибираємо тип — Подію та пишемо назву. В деталях цілі переносимо дані з тега GTM. Отже, перша ціль готова, зберігаємо її.

Можна протестувати ціль, зробивши відправку форми та подивитися звіт у реальному часі – Конверсії.

Детальні дані про ціль GTM

Рис. 7 – Детальні дані про ціль

Розглянемо ще одне налаштування цілей.

1.2 Перехід у соціальну мережу (клік по іконці)

Алгоритм дій такий як і раніше.

Нам потрібно створити новий тригер. Створюємо та налаштовуємо новий тригер за попередньою інструкцією вище. Тільки тепер налаштуємо перехід до instagram. Для цього виберемо тип тригера: Клік — Тільки посилання, де пропишемо умову Click URL починається з https://www.instagram.com/.

Активація тригера за умови GTM

Рис. 8 – Активація тригера за умови

Зберігаємо новий тригер та налаштовуємо тег за прикладом, наведеним в етапі вище. Потрібно лише замінити значення в Категорії та в Дії. На прикладі на скріншоті вказані категорії – Instagram, дія – Click. Їх можна вказувати як на прикладі чи підібрати свої значення. У налаштуваннях Google Аналітики потрібно не забути вказати id Аналітики.

Налаштування нового тегу GTM

Рис. 9 – Налаштування нового тегу

Зберігаємо тег, тестуємо, і якщо все працює коректно, переносимо налаштування в Google Analytics за прикладом вище.

Як видно з цих двох прикладів, цілі для сайту на Shopify можна налаштовувати як і для багатьох інших сайтів, використовуючи код та Google Tag Manager. Таким чином можна відстежувати відправлення будь-яких форм, кліків за будь-якими кнопками, телефонами тощо.

2. Як налаштувати цілі у Google Analytics 4 для сайту на Shopify

Всі ми звикли до UA, але Google офіційно назвав дату, коли UA буде недоступна: Universal Analytics перестане обробляти нові дані в стандартних ресурсах з 1 липня 2023 року. Тому до цього часу краще підготуватися та створити ресурси GA-4 та налаштувати цілі. Або починати вчитися їх налаштовувати.

У GA-4 змінилася не лише структура та принцип роботи. Тепер цілі не потрібно налаштовувати у Налаштуваннях представлень, як це було раніше. Тому я покажу на прикладах, як правильно налаштувати події, щоб вони зображалися у звіті Конверсії. Електронна комерція буде доступна в GA-4 без додаткових налаштувань для Shopify.

*Ймовірно, вам стане у пригоді стаття, Як встановити GA4 через GTM.

2.1 Налаштування цілі Додавання товару до wishlist

Почнемо з налаштування тригера в GTM.

Як і раніше, створюємо новий тригер. В цьому випадку, щоб користувач поклав товар у Вибране, він натискає на кнопку. Таким чином, у типі тригера обираємо Клік — Всі елементи. Вибираємо умову активації тригера Деякі кліки.

Також умову можна налаштувати за класом, id або елементом. Варіантів може бути багато, все залежить від коду. У моєму випадку було зручніше вибрати налаштування за класом. В умові вибираємо Click Classes рівне значенню, яке було скопійовано в коді сайту. Створюємо зрозумілу назву та зберігаємо.

Активація тригера за умовою настання GTM

Рис. 10 – Активація тригера за умовою настання

Створюємо новий тег. Вибираємо тип тега Google Аналітика — Подія GA4. Вибираємо тег конфігурації.

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

Створення нового тегу конфігураці GTM

Рис. 11 – Створення нового тегу конфігурації

Переходимо до Google Analytics. Потрібно перейти до Конфігурації та вибрати Події.

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

Створення нової події GTM

Рис. 12 – Створення нової події

Пишемо назву у конфігурації. Я пишу назву тега в GTM. Далі вибираємо параметр event_name, оператор дорівнює й переносимо значення з тега до GTM. І зберігаємо його.

Якщо ви все правильно зробили, то ви можете побачити нову подію у списку.

Створення спеціальної події GTM

Рис. 13 – Створення події

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

Активація події для зображення у звіті GTM

Рис. 14 – Активація події для зображення у звіті

Одним з нових класних можливостей у GA-4 є поява DebugView – за допомогою якого можна подивитися, чи спрацює подія в режимі реального часу.

Для того, щоб у цьому звіті почали зображатися події, потрібно його активувати, увімкнувши режим Попереднього перегляду Google Tag Manager або за допомогою параметра debug_mode. Ну або як варіант увімкнувши розширення Google Analytics Debugger. Після цього ви зможете приступити до тестування та налагодження подій. Це зручно, тому що можна бачити посекундно як спрацьовують події та чи спрацює ваша подія.

Як спрацьовують події у DebugView GTM

Рис. 15 – Як спрацьовують події у DebugView

Якщо ж ви захочете просто перейти в режим реального часу та подивитися, чи показується подія або конверсія в ньому, то тепер ви можете одразу не побачити її в цьому звіті, та це не означає, що подія не спрацювала. Тому, щоб без затримки часу, швидко та точно налагодити налаштування подій та конверсій, краще використовувати спеціальний інструмент DebugView.

Коли все налаштовано правильно, через 24 години можна зайти до звіту Взаємодії, вибрати звіт Конверсії та подивитися, чи показується ваша подія у звіті. Також там зображатиметься дохід від подій.

Звіт Конверсії

Рис. 16 – Звіт Конверсії

Далі налаштуємо ще одну подію.

2.2 Клік за номером телефону

Якщо вам потрібно подивитися, скільки користувачів клікає на номер телефону на сайті Shopify, то це теж можна налаштувати за допомогою GTM, як і багато інших подій. Але мені здається, що клік за номером — одна з надважливих подій, яку можна налаштувати. Тож розглянемо приклад, як це можна зробити.

Почнемо з налаштування тригера в GTM. Створюємо новий тригер, знаходимо номер телефону на сайті та перевіряємо, чи він клікабельний та чи є у нього посилання, яке починається з tel:. Приклад того, як це виглядає у коді, є на скріншоті:

Наявність номера телефону в коді

Рис. 17 – Наявність номера телефону в коді

Далі у Налаштуваннях обираємо тип тригера: Клік — Всі елементи, вибираємо деякі кліки та прописуємо умову Click url починається з tel:. Пишемо назву та зберігаємо.

Обрання типу тригера GTM

Рис. 18 – Обрання типу тригера

Налаштовуємо тег за прикладом вище та вигадуємо зрозумілу назву події. Приклад назви є на скріншоті нижче. Його також можна використати, якщо свій вигадувати не хочеться.

Обрання назви тегу конфігурації

Рис. 19 – Обрання назви тегу

Далі або тестуємо та налагоджуємо в Попередньому перегляді, або одразу переносимо в GA-4. Створюємо нову подію й потім додаємо її в конверсії. Алгоритм дій буде таким, як і раніше.

Створення події та умови відповідності

Рис. 20 – Створення події

Готово. Ви все налаштували.

Як ми бачимо, для сайтів на Shopify можна налаштувати додаткові конверсії, цілі, події, використовуючи Google Tag Manager. І не обмежуватись лише даними з електронної комерції.

У статті я навела приклади готових робочих рішень. Тому можна робити свої подальші налаштування одразу за цими прикладами. І не боятися випробовувати нові рішення. Адже додаткові дані допоможуть зрозуміти, як часто користувачі бажають щось уточнити або замовити за телефоном, проконсультуватися. Таким чином навіть можна визначити, наскільки зручно вашим відвідувачам користуватися сайтом, знайти недоліки та усунути їх.