Встановлення основних систем аналітики за допомогою Google Tag Manager: Google Analytics 4, Facebook Pixel, Hotjar

Основна причина, через яку Google Tag Manager встановлюють на сайт - це налаштування систем аналітики без допомоги програміста. У цій статті ми розглянемо, як встановити на ваш сайт три основні системи аналітики: Google Analytics 4, Facebook Pixel та Hotjar.

1. Встановлення Google Analytics 4 за допомогою диспетчера тегів Google
2. Установка Facebook Pixel за допомогою GTM
3. Установка Hotjar

Перед тим як ми почнемо, хотілося б сказати, що всі вищезгадані системи аналітики, а також інші сервіси встановлюються за одним сценарієм:

• Створюємо відповідний тег (для кожної системи він різний);
• Додаємо тригер, зазвичай це All Pages (Всі сторінки);
• Публікуємо зміни як нову версію. Так як ця дія однакова для всіх, її я розпишу в цьому блоці.

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

Не забудьте вказати назву версії, яка підкаже вам надалі, які опції ви опублікували:

Встановлення Google Analytics 4 за допомогою диспетчера тегів Google

Все доволі просто. Створюємо тег типу Google Tag з наступними налаштуваннями:

• У полі Tag ID (Ідентифікатор показника) вводимо ID потоку Google Analytics 4
• Додаємо тригер All Pages (Всі сторінки)

Ідентифікатор Google Analytics 4 можна знайти на вкладці Admin (Адміністратор), у пункті Data streams (Потоки даних). Заходимо в Data collection and modification (Збирання й змінення даних) -> Data streams (Потоки даних) -> (Ідентифікатор показника):

І на цьому все. Не забудьте опублікувати контейнер.

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

Звісно, після встановлення кодів треба налаштувати GA4. Ви можете дізнатися, як це зробити, прочитавши статтю "Покроковий гайд з налаштування Google Analytics 4 (GA4)".

Установка Facebook Pixel за допомогою GTM

Установка Facebook Pixel відбувається ще простіше. Не забудьте скопіювати код Facebook Pixel перед початком налаштування.

Створюємо тег із наступними налаштуваннями:

• Тип тега Custom HTML (Користувацький тег HTML);
• У пункті HTML вставляємо скопійований код Pixel;
• Тригер - All Pages.

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

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

Установка Hotjar за допомогою Google Tag Manager

Для налаштування тега Hotjar необхідно також всього три дії:

• Вибираємо тип тега Hotjar Tracking Code;
• У полі Hotjar Site ID вказуємо потрібний ідентифікатор. Знайти його можна на вкладці код відстеження:

Додаємо тригер All Pages.

Замість висновку

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

• Відстеження кліків на елементи сайту за допомогою Google Tag Manager: Розширений посібник
• Відстеження кліків на посилання за допомогою Google Tag Manager: Практичний посібник з прикладами
• Відстеження відправки форми за допомогою базового тригера GTM
• Відстеження відправки форми за допомогою тригера Видимість елемента

Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.