Як налаштувати користувацькі події в Google Analytics 4: покрокова інструкція

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

Ця стаття написана у вигляді детальної покрокової інструкції зі скрінами, на яких всі кроки позначено червоними стрілками, червоними рамками та цифрами в порядку виконання певних дій.

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

Зараз ми ще коротко розповімо про можливі конверсії в Google Analytics 4. Отож, саме час починати!

Конверсії в GA4

Нагадуємо вам, що така подія, як покупка, позначається автоматично як конверсія в Google Analytics 4. Однак в Google Analytics 4, крім покупки, можна налаштувати ще 30 подій і, відповідно, позначити їх як конверсії. Тобто, коли ви переходите в Конфігурацію в список подій, то ви можете пересунути повзунок в активний режим і це означатиме, що ви позначили певні події як конверсії. На скрині нижче наведений приклад з позначенням події phone_click (клік по номеру телефону) як конверсії.

Після того ви можете зайти в пункт “Конверсії” і переглянути чи ця подія дійсно позначилась як конверсія. Як ми вже казали, що таких конверсій може бути максимум 30 і плюс покупка (purchase). Для того, щоб це переглянути потрібно натиснути на шестерню в лівому нижньому куті екрана (Адміністратор) та в меню обрати пункт “Конверсії”.

Більше про конверсії та які існують їх види, ви зможете дізнатись, якщо прочитаєте одну з попередніх статей “Конверсії в Google Analytics 4”.

Зараз ми розповімо вам про те, як створити користувацьку конверсію “клік по номеру телефону” для сайту, який зроблений на Хорошоп.

Все те, що ми покажемо далі, ви зможете повторити на будь-якому інтернет-магазині, який дає можливість встановити на себе Google Tag Manager. Можливість встановлення Google Tag Manager, налаштування відслідковування різних подій та робити глибокі налаштування надають майже всі платформи. Винятком буде платформа Prom, адже вона не дозволяє встановлювати власний код чи змінювати щось суттєво в налаштуваннях, але водночас має свій стандартний набір подій, які можна позначати як конверсії. Про такі події ви зможете дізнатись, якщо перейдете на нашу попередню статтю “Події для Prom”, де ми розповіли про те, які події можна позначити як конверсії.

Варто зазначити, що в Prom є стандартна подія call_phones, яка відслідковується в Google Analytics 4, коли з мобільної версії сайту ви натискаєте на номер телефону, зазначений на ньому. Щодо Хорошопу, OpenCart та інших платформ, то ця подія за замовчуванням не відслідковується, саме тому, це та подія, яку ми налаштовуємо через Google Tag Manager. За такою самою аналогією, яку ми зараз покажемо, ви можете відслідкувати клік по будь-якій кнопці, відправку будь-якої форми та інші події.

Отож, сьогодні наша ціль навчити вас налаштовувати відслідковування кліків по номеру телефону, до чого ми зараз перейдемо.

Як налаштувати користувацькі події в Google Analytics 4?

На прикладі сайту, створеного на Хорошоп, ми покажемо як відстежувати кліки по номерах телефону, як на скрині нижче.

Для того, щоб відслідкувати клік по номеру телефону, спершу потрібно перейти в Google Tag Manager. Якщо ви не знаєте, як створити Google Tag Manager, то можете прочитати одну з наших попередніх статей “Як створити акаунт в Google Tag Manager: покрокова інструкція”. Перш ніж переходити до налаштування подій, потрібно зробити певні налаштування в самому Менеджері тегів від Google.

Для того, щоб це зробити, на головній сторінці Google Tag Manager в меню потрібно натиснути на пункт “Змінні”. Після того, як ви відкриєте цей пункт, натисніть у першому вікні “Вбудовані змінні” на кнопку “Налаштувати”.

У налаштуваннях вбудованих змінних прогорніть донизу до підпункту “Кліки” та поставте галочки навпроти всіх кліків.

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

Після того вийдіть з налаштування вбудованих змінних (натисніть на хрестик) та в тому самому пункті “Змінні” у вікні нижче “Користувацькі змінні” натисніть на кнопку “Створити”.

Далі потрібно безпосередньо створити змінну. Для того, щоб це зробити, у вікні, яке відкриється, потрібно навестись на вікно “Конфігурація змінної” та натиснути на олівець, щоб редагувати.

Після того перед вами відкриється “Вибір типу змінної”, в якому потрібно прогорнути донизу та в підпункті “Службові програми” обрати “Константа”. Таким чином, ви встановите тип змінної.

Тепер можете змінити назву, до прикладу, на Google Analytics 4 та її ідентифікатор, як на скрині нижче.

У наступному полі “Значення” потрібно вказати ID вашої Google Analytics 4. Для того, щоб це зробити, відкрийте сусідню вкладку та увійдіть до свого ресурсу Google Analytics 4. Натисніть на шестерню (Адміністратор) у лівому нижньому куті екрана та в меню оберіть пункт “Потоки даних”. Після цього наведіться на ваш потік даних та натисніть на стрілочку збоку, щоб розгорнути його.

Далі в деталях про веб-потік, який ви розгорнете, потрібно скопіювати “Ідентифікатор показника”. Натисніть на відповідну кнопку, позначену стрілкою.

Щойно скопійований вами ідентифікатор показника вставте в поле “Значення” в Google Tag Manager та не забудьте обов’язково натиснути на синю кнопку “Зберегти” в правому верхньому куті.

До речі, якщо ви якщо ви ще не знаєте як встановити Google Tag Manager на свій сайт для Хорошоп та OpenCart, то про те, як це зробити ви можете дізнатись у нашому чек-листі. Тому радимо вам обов’язково перейти за посиланням та скористатись нашим чек-листом, якщо ви досі не встановили Менеджер тегів від Google на свій сайт для того, щоб налаштовувати користувацькі події.

Таким чином, якщо ви виконували всі кроки так, як було показано вище, ви задали саме значення змінною, а не встановили Google Analytics 4 на свій сайт. Про це варто пам’ятати.

Тепер ми з вами перейдемо до активатора. Активатором у вас буде клік по номеру телефону. Перш ніж задати активатор, потрібно подумати про те, яка умова події буде на сайті. Для цього потрібно безпосередньо на сайті натиснути правою кнопкою миші десь на головному екрані та обрати “Переглянути код елемента” або ж скористатися комбінацією клавіш Ctrl+Shift+C.

Перед вами відкриється список коду і якщо ви натисните на стрілочку зверху (як на скрині нижче), то ви зможете водити мишкою по будь-якому елементу на сайті, який буде виділятися та підсвічуватися кодом. Ми з вами створюємо користувацьку подію “клік по номеру телефону”, тому ми наводимось на номер телефону та натискаємо на нього. Як ви бачите, код, який пов’язаний з цим елементом, підсвітиться.

Отже, при кліку на номер телефону Київстар спрацьовує посилання у форматі “tel:%2B380975787401”. Вам потрібно буде скопіювати його та перенести його в “Активатори” в Google Tag Manager. Для того, щоб це зробити, перейдіть в Google Tag Manager та в пункті “Активатори” натисніть на кнопку “Створити”, щоб створити активатор.

Після цього наведіться на вікно “Конфігурація тригера” та натисніть на олівець, щоб редагувати.

Тепер у “Виборі типу активатора”, який відкрився, в підпункті “Клік” оберіть “Усі елементи”.

Після цього в підпункті “Запуск активатора” оберіть “Окремі кліки”. Трохи нижче, у першому полі, натисніть на стрілочку та оберіть “Click URL”, а потім у третє поле вставте ту частину коду, яка відповідала номеру телефону на сайті, яку ви скопіювали. Також можете назвати цей активатор, до прикладу, “click_ks”. У самому кінці не забудьте натиснути на синю кнопку “Зберегти”.

Аналогічно робимо те саме для номеру телефону лайф. Для цього потрібно повернутись на сайт та, використовуючи ту саму стрілку в перегляді коду елемента, натисніть на стрілочку біля номеру телефону. Після того вам потрібно буде порозгортати деякі рядки коду і знайти номер телефону Лайф. Скопіюйте частину коду, як в попередній раз, тобто “tel:%2B380634181451” та створіть ще один активатор в Google Tag Manager так само, як ми показували вище, однак можете назвати цей активатор, до прикладу, “click_life”. Відповідно, якщо ви виконали все правильно, то у вас все має бути так як на скрині нижче.

Тепер вам потрібно буде створити тег, який би передавав подію в Google Analytics 4. Тому в Менеджері тегів від Google на головній сторінці в меню оберіть пункт “Теги”, потім натискайте, аналогічно як в попередніх кроках, на кнопку “Створити” у вікні “Конфігурація тегу”. У “Виборі типу тегу” в підпункті “Рекомендовані” оберіть “Google Analytics: подія Google Analytics 4”.

Далі потрібно обрати конфігурацію тегу, але якщо у вас GA4 встановлена за допомогою модуля на сайті або маркетингових систем, то натисніть на стрілочку у відповідному вікні та оберіть “Немає – налаштувати ідентифікатор вручну”.

У наступному полі “Ідентифікатор показника”, ви можете вставити ідентифікатор з Google Analytics 4 або ж обрати ту змінну, яку ви щойно задали. Для того, щоб обрати змінну, яку ви створили, потрібно натиснути на плюсик біля відповідного поля та обрати “GA4_ID”. Як ви можете розуміти, саме для цього ми і задавали цю змінну, щоб ви в майбутньому могли використовувати її в інших можливих тегах, які вам знадобляться. Тобто, таким чином, ви полегшили для себе роботу, адже створили ідентифікатор в самому Google Tag Manager, щоб не доводилось щоразу “бігати” в Гугл Аналітику, аби скопіювати ідентифікатор.

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

Потім у вікні “Тригери” так само натискайте на олівець, щоб редагувати, та поставте галочки біля click_ks та click_life. Після цього не забудьте натиснути на синю кнопку “Додати” в правому верхньому куті. Таким чином, ви додасьте дві умови, при яких активується ця подія.

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

У вікні, яке відкриється, для попереднього перегляду, в полі потрібно скопіювати адресу сайту, з яким ви працюєте та натиснути на синю кнопку “Connect”.

У вас повинен завантажитись ваш сайт, на якому клікніть по номеру телефону Київстар. Після того поверніться у вікно попереднього перегляду, щоб перевірити чи насправді ця подія спрацювала, та натисніть на синю кнопку “Continue”.

Після того, як ви натисните синю кнопку “Continue”, ви зможете побачити, що тег phone_click, при кліку на номер телефону Київстар, спрацював (позначений стрілкою на скрині нижче). Також, ви може перейти в пункт “Variables” та переглянути змінні.

Коли ви подивитесь в пункт “Variables”, то там буде Click URL номер телефону Київстар.

Тепер, таким самим чином, клікніть у вікні попереднього перегляду на номер телефону Лайф, потім поверніться в Google Tag Manager натисніть на синю кнопку “Continue” і перевірте чи спрацював тег phone_click, при кліку на телефон лайф. Також, можете переглянути змінну Click URL в пункті “Variables”.

Тепер можна зробити висновок, що все працює коректно. Не забувайте, що цей тег потрібно обов’язково опублікувати, але перед тим як це зробити зайдіть в Google Tag Manager в меню в пункт “Теги” та скопіюйте назву події, яку ви передали в Google Analytics 4 (позначена стрілкою під номером 2 на скріні нижче). Для чого вам потрібно скопіювати цю назву, ви дізнаєтесь далі.

Після того, як ви скопіюєте назву, закрийте це вікно (натисніть на хрестик) та в правому верхньому куті екрана натисніть на синю кнопку “Надіслати”.

Далі вам потрібно в тому самому місці натиснути на синю кнопку “Опублікувати”, після чого з’явиться вікно “Опис версії контейнера”, в якому натисніть на кнопку “Продовжити”.

Далі зачекайте деякий час поки все завантажиться і після цього ваша подія почне відправлятися в Google Analytics 4, якщо користувач на сайті буде натискати на один з номерів телефону.

Варто зазначити те, що якщо ви сьогодні налаштували відслідковування події, точніше передачу події в Google Analytics 4, то в “Подіях” вона з’явиться протягом 24 годин. Тому радимо вам ніколи не спішити налаштовувати будь-які інші змінні, адже існує досить суттєва затримка передачі даних в GA4. Проте, якщо ви налаштували таку подію, як ми щойно показували (клік по номеру телефону) і ви хочете позначити її як конверсію, тобто вона для вас є важливою та суттєвою і, можливо, в майбутньому ви хочете оптимізовувати рекламні кампанії на її основі, то, щоб згодом за неї не забути, ви можете перейти в GA4 на проєкт, який ви щойно налаштували, в меню обрати розділ “Конверсії” та створити “Нову подію-конверсію”, коли натисните на однойменну синю кнопку.

Після цього, в єдиному полі, яке буде доступне, вставте ту назву події, яку ви з Google Tag Manager передаєте в Google Analytics 4 (вище ми зазначили вам те, що потрібно скопіювати “phone_click”) та натисніть на синю кнопку “Зберегти”.

Таким чином, ця подія з’явиться в розділі “Конверсії” та буде позначена як конверсія, хоча в “Подіях” вона з’явиться, грубо кажучи, завтра.

Те, що ми щойно показали, це по суті те саме, що ми б в розділі “Події” пересунули повзунок “Позначити як конверсія” в активну позицію на даній події. Просто, коли ви зробити так, як ми щойно показували, то вам не доведеться чекати завтрашнього дня, ви будете мати щойно створену подію, позначену як конверсія.

Клік по номеру телефону – це найпопулярніша подія, яку ми налаштовуємо додатково для інтернет-магазинів, які зроблені на OpenCart, Хорошоп, WordPress та на інших CRM-системах. Тому, якщо у вас є потреба налаштувати та відслідкувати будь-яку іншу подію, то можете написати в коментарях до цієї статті свої питання і ми допоможемо вам поясненням зі скріншотами.

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

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

Як ви знаєте, наше головне правило – без паніки, у вас все вдасться!

Якщо у вас виникають додаткові запитання – можете з легкістю ставити їх у telegram-чаті “Рекламна кухня” https://t.me/reklamna_kukhnya. Ми завжди раді вітати вас і допомогти кожному, хто горить бажанням пізнавати щось нове разом з нами!