Як налаштувати піксель Facebook за допомогою Google Tag Manager
Що таке піксель Facebook і чим він може бути корисним
Піксель Facebook (Facebook Pixel) — це код відстеження (фрагмент JavaScript), за допомогою якого можна вимірювати ефективність реклами в Facebook/Instagram.
Налаштування пікселя Facebook дозволить:
- збирати інформацію із сайту та аналізувати його відвідування;
- створювати аудиторії ремаркетингу для реклами у Facebook/Instagram;
- відстежувати досягнення користувачами цільових дій;
- оптимізувати групи оголошень та керувати призначенням ставок на основі конверсій.
У цій статті ми розглянемо, як встановити Facebook Pixel на сайт за допомогою Google Tag Manager. А також розберемося з налаштуванням відстеження стандартних та користувальницьких подій у Facebook через GTM.
Як встановити піксель Facebook через Google Tag Manager
Google Tag Manager (Диспетчер тегів Google) – це інструмент для керування тегами на вашому сайті. З його допомогою можна швидко створювати та оновлювати різні теги (Google Analytics, Facebook Pixel та ін.) у зручному та зрозумілому інтерфейсі, без необхідності втручання у код сайту. Якщо досі на вашому сайті ще не встановлений цей чудо-інструмент, терміново виправляйте це неприємне непорозуміння. Зареєструвати обліковий запис Google Tag Manager можна за посиланням. А прочитати інформацію про налаштування та переваги використання диспетчера тегів тут.
Щоб встановити базовий піксель Facebook, який передаватиме дані про відвідування всіх сторінок сайту, потрібно виконати такі дії:
У рекламному кабінеті в основному меню переходимо до розділу «Пікселі».
Створюємо новий піксель.
Facebook запропонує вам вибрати спосіб налаштування коду: “Використовувати інтеграцію або Tag Manager”, “Встановити код вручну” або “Надіслати інструкції розробнику по ел. поштою”.
Якщо ви вибрали спосіб “Використовувати інтеграцію або Tag Manager”, потрібна авторизація в обліковому записі, на який відкритий доступ до GTM.
Зв’язуємо обліковий запис Google Tag Manager та Facebook. Після налаштування зв’язку в інтерфейсі GTM з’явиться тег:
Як бачимо на скріншоті, тип цього тегу – “Користувачський HTML”, умовою активації виступає тригер “Всі сторінки”.
При виборі другого способу встановлення (“Встановити код вручну”) Facebook запропонує самостійно скопіювати код відстеження:
В обліковому записі GTM потрібно створити тег типу «HTML користувача» і вставити отриманий код у текстове поле.
У розширених налаштуваннях у блоці “Налаштування активації тега” встановлюємо “Один раз на сторінку”. Тригер активації – “Всі сторінки”.
Як переконатися, що піксель встановлено правильно
Щоб код почав збирати дані, його залишиться лише опублікувати. Перед публікацією на сайт будь-яких змін, створених в інтерфейсі Google Tag Manager, обов’язково тестуйте налаштування в режимі налагодження. Щоб перейти до відладчика, у верхньому правому куті облікового запису Google Tag Manager натисніть “Попередній перегляд”
та перейдіть на свій сайт. Внизу ви побачите панель відладчика, яка показує теги GTM. Піксель повинен бути в блоці “Tags Fired On This Page” відразу при завантаженні сторінки.
Коректність встановленого коду можна перевірити за допомогою розширення для Google Chrome Facebook Pixel Helper. Якщо при перевірці за допомогою Facebook Pixel Helper навпроти даних, що відправляються, ви бачите зелену галочку, значить дані передаються коректно.
Щоб завершити налаштування в інтерфейсі Facebook, надішліть тестовий трафік.У такий спосіб перевіряється статус коду пікселя. Статус “Активний” означає, що код встановлений коректно.
Відеоінструкція зі встановлення пікселя Facebook за допомогою GTM
Як налаштувати події у Facebook
Для того, щоб відстежити важливі дії користувачів на сайті, можна використати події. Завдяки налаштуванню подій ви зможете показувати рекламу тим людям, які з найбільшою ймовірністю виконають конверсію, а також створювати аудиторії користувачів, які вчинили або не вчинили певну дію на сайті.
Надсилати дані про події також дуже зручно та просто за допомогою Google Tag Manager. Розберемо, як це налаштувати.
Як приклад, розглянемо налаштування події успішного відправлення форми замовлення послуги на сайті OdesSeo.
Додамо нову подію.
Найбільш підходящою категорією для нашої події є “Генерація ліда”.
Детально про стандартні категорії подій Facebook можна прочитати тут. А в цій статті добре описані всі параметри, які можна передавати з подіями.
Потім у Google Tag Manager потрібно створити новий тег типу “Користувацький HTML” і вставити згенерований системою фрагмент коду в текстове поле. У розширених налаштуваннях у блоці “Налаштування активації тега” встановлюємо “Один раз на подію”.
Важливо! Коди надсилання подій повинні спрацьовувати після того, як спрацює базовий код пікселя. Тому, якщо вам потрібно надсилати івент під час завантаження сторінки (наприклад, подія “ViewContent”), то в розділі “Порядок активації тегів” позначте чекбокс “Активувати тег перед тегом” та виберіть тег базового коду.
Далі задаємо умову активації тега. У моєму випадку тригером активації буде виступати користувальницька подія, яка спрацьовує при успішному заповненні форми.
Які бувають тригери активації і як їх створювати я докладно розглядала в цих статтях:
- Початок роботи в Google Tag Manager;
- Відстеження взаємодії користувачів із формами сайту;
- Слідкуємо, що копіюють на нашому сайті;
- Відстеження видимості елементів на веб-сайті.
Далі нам необхідно переконатись, що тег спрацьовує при виконанні потрібної дії. Для цього в режимі налагодження переходимо на сайт і здійснюємо тестове відправлення форми. На панелі Tag Manager бачимо, що наш тег спрацював у потрібний момент.
Facebook Helper також показує, що дані передаються правильно.
Динаміку надходження інформації про події можна переглянути в рекламному кабінеті Facebook на вкладці “Події”.
Тепер на основі переданих подій можна створювати користувацькі аудиторії та конверсії.
Як налаштувати події Facebook у Google Tag Manager
Більшість завдань відстеження можна вирішити за допомогою стандартних подій з параметрами.Якщо все ж таки серед них ви не знайшли відповідного для себе, завжди можна створити користувальницький івент.
Для цього використовується фрагмент коду вигляду:
fbq(‘trackCustom’, ‘MyCustomEvent’, {custom_param: ‘custom_value’});
де MyCustomEvent – назва вашої події.
Щоб було зрозуміліше, як використати власні події, розберемо приклад. Давайте спробуємо передати у Facebook факт скролінгу сторінки разом із кастомним параметром – значенням глибини прокручування.
Для цього створимо новий тег у GTM. Тип – “Користувацький HTML”. У текстовому полі пишемо фрагмент коду виду:
де ScrollEvent – назва нашого користувача події, а Scroll Depth – глибина прокручування. Щоб передавати значення скролінгу сторінки, будемо використовувати вбудовану змінну GTM “Scroll Depth Threshold”.
Далі додаємо тригер активації. Алгоритм створення цього тригера описувала тут.
Перевіряємо роботу тега, використовуючи помічник пікселів. Бачимо, що в міру скролінгу в Facebook відправляються дані про факт прокручування та її значення.
Тепер на підставі подій, що передаються, можна створити індивідуалізовану аудиторію.
На цьому налаштування закінчено. Якщо у вас залишилися питання, пишіть їх у коментарях. Успіхів!