
Налаштування передачі івентів у Facebook за допомогою GTM
Оскільки Facebook є однією з найпоширеніших маркетингових платформ, багато бізнесів і маркетологів стикаються з потребою у коректному налаштуванні відстеження івентів. Це дозволяє рекламній системі оптимізувати кампанії під цільові дії користувачів, розуміти ефективні аудиторії та відображати результати реклами.
Зважаючи на актуальність цього питання серед клієнтів нашої команди, я вирішила розглянути основні аспекти налаштування івентів Facebook у цьому матеріалі.
Загалом існує два способи налаштування передачі подій до Facebook: з фронтенду та з бекенду. Кожен спосіб має свої нюанси й заслуговує на окремий матеріал.
У цій статті я покажу, як налаштувати передачу саме фронтендових подій. Їх також можна передавати двома способами:
- безпосередньо через код сайту (це може бути як реалізація розробником, так і використання плагінів);
- через GTM самостійно.
Саме про останнє рішення ми й поговоримо — про web-передачу івентів через Web GTM без змін у коді сайту. Розглянемо повне налаштування: від встановлення Facebook Pixel із передачею кастомних та eCommerce-подій до перевірки коректності передачі за допомогою браузерного розширення. При цьому для передачі eCommerce-подій будемо використовувати вже наявні дані eCommerce GA4 із dataLayer.
У статті розглянемо такі кроки:
- Встановлення бібліотеки Facebook (Meta Pixel) на сайт через Web GTM
- Передача івентів у Facebook (Meta Pixel) через Google Tag Manager
- Де знайти події в інтерфейсі Facebook (Meta Events Manager)
- Реєстрація кастомного івенту
- Підсумки
Встановлення бібліотеки Facebook (Meta Pixel) на сайт через Web GTM
Є два основних способи встановити Facebook Pixel на сайт через Web контейнер GTM:
- Через HTML Tag у GTM;
- Через тег з Community Template Gallery У GTM;
Для подальшого налаштування, залежно від обраного способу, нам буде потрібен або базовий код Facebook Pixel, або Pixel ID, тож далі розглянемо, як їх знайти.
Як знайти код Facebook Pixel
Цей блок буде корисним для тих, хто тільки починає розбиратися в деталях налаштування та потребує більш детальної інструкції. Якщо ж ви вже достатньо знайомі з інтерфейсом, можете одразу перейти до наступного розділу — Встановлення Facebook Pixel за допомогою Web GTM.
Спершу знайдемо необхідні дані у Facebook інтерфейсі, щоб під час подальшого налаштування (яке буде описано далі) у вас було все необхідне під рукою.
Для цього:
1. Переходимо до Events Manager та обираємо Datasets.

2. Тут ми вже можемо скопіювати Pixel ID для варіанту налаштування за допомогою тега з Community Template Gallery. Якщо ви плануєте робити налаштування тільки за допомогою цього тега, то це всі дані, які вам знадобляться.
3. Якщо ж ви вирішите скористатись встановленням через Custom HTML Tag, необхідно знайти повний код встановлення Facebook Pixel. Для цього йдемо до свого пікселя та клікаємо на кнопку Set up Facebook Pixel.
4. Далі обираємо Install code manually.

5. Копіюємо запропонований код.

Загалом код матиме приблизно такий вигляд — замість {your-pixel-id-goes-here} буде ваш Pixel ID:
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{your-pixel-id-goes-here}');
fbq('track', 'PageView');
</script>
<!-- End Facebook Pixel Code -->Зверніть увагу на цей рядок у коді — fbq('track', 'PageView');: базовий код Pixel не лише підключає бібліотеку, а й відправляє івент перегляду сторінки PageView.
Встановлення Facebook Pixel за допомогою Web GTM
Тепер переходимо безпосередньо до встановлення Facebook Pixel на сайт. Як було вже сказано раніше, ми розглядаємо варіанти налаштування через GTM, і для цього існує декілька способів:
- Через Custom HTML Tag у GTM;
- Через шаблон із Community Template Gallery.
Встановлення Facebook Pixel через Custom HTML Tag у GTM
Перший варіант, за допомогою якого можна встановити базовий код Facebook Pixel на сайт:
- Створюємо новий тег Custom HTML та вставляємо скопійований базовий код Facebook Pixel.
- Як тригер обираємо один зі стандартних, автоматично створених - All Pages, щоб базовий код із передачею івенту перегляду сторінки запускався на кожній сторінці сайту.
Підсумковий варіант налаштування:
Переваги такого підходу:
- Це стандартний спосіб додавання будь-якого коду на сайт;
- Не потрібно шукати шаблони і досліджувати їх актуальність.
Недоліки:
- Необхідність розуміння, який саме код потрібно відправляти;
- У разі встановлення таким способом декількох різних пікселів усі івенти, налаштовані для передачі у Facebook, відправлятимуться одразу в усі пікселі. Зокрема, івент PageView буде дублюватися, оскільки викликатиметься декілька разів.
Тому, хоча це й найпростіший спосіб, я рекомендую скористатися іншим варіантом.
Альтернативний варіант: встановлення Meta Pixel через шаблон із Community Template Gallery у GTM
- У GTM переходимо до Tags і під час створення нового тегу відкриваємо Community Template Gallery, де знаходимо Facebook Pixel та додаємо його до своєї робочої області.

2. У новий тег Facebook Pixel вставляємо раніше скопійований Pixel ID.
Як уже зазначалося раніше, базовий код відправляє одразу івент PageView, тому саме його тут і обираємо. Тригер, як і при попередньому налаштуванні, ставимо All Pages (Усі сторінки) — тобто івент перегляду сторінки має спрацьовувати на кожній сторінці сайту.
Налаштування матиме такий вигляд:

Переваги такого підходу:
- Не потрібно знати код, який необхідно передавати;
- Дуже простий у розумінні, якщо немає досвіду роботи з Web GTM.
Недоліки:
- Хоча це офіційний шаблон, інтегрований через Community Template Gallery, з часом він може втратити актуальність.
Дебаг поточних налаштувань за допомогою розширення Meta Pixel Helper
Незалежно від того, який спосіб ви обрали, на сайті уже є піксель і відправляється івент перегляду сторінки. Тепер перевіримо наше налаштування.
Для того, щоб це перевірити, у Google Chrome є офіційне розширення від Meta - Facebook Pixel Helper, яке допоможе в перевірці налаштувань.
На сторінці сайту переходимо до розширення і дивимось, що піксель Facebook встановлено, а івент PageView передано без проблем. Зелененька галочка поряд із назвою івенту підтверджує коректність передачі.
У разі проблем під час налаштування в розширенні ми б бачили інший колір поруч з івентом, а при розкритті могли б почитати деталі.
Передача івентів у Facebook (Meta Pixel) через GTM
Відстеження івентів дозволяє Facebook отримувати інформацію про дії користувачів на сайті. Це необхідно для коректного вимірювання конверсій, оптимізації кампаній та побудови аудиторій для ремаркетингу.
Зі стандартним переліком івентів, які підтримує Facebook, можна ознайомитися за посиланням.
Загалом усі івенти можна розділити на дві групи: звичайні (до яких належать як кастомні події так ї стандартні, які ми розглянемо окремо) та eCommerce події.
Передача eCommerce-івентів складніша та має свою специфіку, тому далі ми розглянемо обидві групи івентів окремо.
Передача стандартних (не eCommerce) івентів у Facebook Pixel
Для прикладу візьмемо одну з найпопулярніших дій користувачів для трекінгу — успішну відправку форми. Найчастіше в цей момент передають подію Lead.
Як і при встановленні базового коду на сайт, у нас є 2 варіанти передачі івентів до Facebook за допомогою GTM:
- Через Custom HTML Tag у GTM;
- Через тег Facebook Pixel.
Отже, розглянемо їх по черзі, щоб ви могли обрати той варіант, який буде зручнішим саме для вас.
Передача стандартних івентів через Custom HTML Tag
Цей варіант може виглядати складнішим, оскільки потрібно знати код для передачі івенту. Проте на практиці все доволі просто:
- Створюємо новий тег Custom HTML та вставляємо такий код:
<script>
fbq('track', 'Lead');
</script>2. Далі додаємо тригер на успішну відправку форми.
У підсумку варіант налаштування матиме такий вигляд:

Зверніть увагу, я не зупиняюсь на тригері, оскільки це окрема тема. До того ж тригери можна перевикористовувати — наприклад, ті самі, які вже застосовуються для передачі аналогічних івентів в інші маркетингові системи.
Тому якщо вас цікавить окремо як налаштовувати тригери, то ознайомтеся зі статтями мого колеги:
- Відстеження відправки форми за допомогою тригера «Видимість елемента»
- Відстеження відправки форми за допомогою базового тригера GTM
- Відстеження кліків на посилання за допомогою Google Tag Manager: практичний посібник із прикладами
- Відстеження кліків на елементи сайту за допомогою Google Tag Manager: розширений посібник
- Відстежуємо взаємодію користувачів із формами за допомогою Google Tag Manager
- Відстеження взаємодії з відео за допомогою Google Tag Manager
Все. Наш івент налаштовано, і все не так складно, як могло здаватися :)
До речі, так само як і в GA4, у Facebook можна передавати івенти з додатковими параметрами. Тому трохи змінимо нашу передачу івенту та додамо параметр content_name, який передаватиме назву форми. У моєму випадку назва форми буде 'test form'.
<script>
fbq('track', 'Lead', {
content_name: 'test form' // Назва форми.
});
</script>Тож тепер наше налаштування матиме наступний вигляд:

Не забуваємо перевіряти свої налаштування: переходимо на сайт і за допомогою розширення, яке вже розглядали раніше, дивимося на результат.
У підсумку бачимо, що в нас відправився івент Lead. Поряд із ним зелений кружечок, який вказує, що івент відправився коректно. Також бачимо і параметр content_name, який містить в собі назву форми.
Передача стандартних івентів через тег Facebook Pixel
Тепер розглянемо альтернативний спосіб і налаштуємо той самий івент Lead. Ми вже знайомі з тегом Facebook Pixel, за допомогою якого ми можемо передати івенти навіть не знаючи коду.
Для цього нам потрібно:
- Створити новий тег Facebook Pixel;
- Вказати Facebook Pixel ID (як ми вже робили раніше);
- Серед стандартних івентів обрати Lead;
- Опціонально додати в розділ Object Properties параметр (у нашому прикладі це content_name з назвою форми);
- Додати тригер на успішну відправку форми.
Тепер наше налаштування матиме наступний вигляд:
Таким чином ми швидко налаштували передачу івенту Lead, не знаючи коду.
Незалежно від обраного способу передачі, фінальний результат і перевірка будуть ідентичними до попереднього варіанта налаштування.
Передача кастомних подій у Facebook Pixel через GTM
Наразі ми розглянули тільки передачу івентів зі списку страндарних івентів. Проте ми не обмежені тільки стандартним списком і можемо передавати кастомні назви. Тому далі розглянемо саме передачу кастомного івенту.
Якщо говорити про варіант передачі через Custom HTML Tag, то в цьому випадку нам потрібно лише змінити назву Lead на ту, яку ми плануємо передавати.
Тому детальніше розглянемо передачу кастомного івенту саме з використанням тега Facebook Pixel. Будемо передавати ту саму дію (успішну відправку форми), але назвемо її, наприклад, FormSubmit.
Для цього потрібно виконати майже ті самі кроки, що й для івенту Lead, з єдиною різницею — під час вибору івенту:
- Створити новий тег Facebook Pixel;
- Вказати Facebook Pixel ID (як ми вже робили раніше);
- Обрати кастомний івент та вказати його назву — FormSubmit;
- Додати тригер на успішну відправку форми.
Налаштування виглядатиме наступним чином:
Під час передачі кастомного івенту до Facebook він надходитиме в Pixel, але не буде відображатися у рекламних кампаніях.
Щоб мати можливість використовувати створену подію в рекламних кампаніях, її потрібно зареєструвати в Facebook. До цього кроку ми повернемося наприкінці статті в розділі “Реєстрація кастомного івенту”
Передача eCommerce-івентів у Facebook Pixel через GTM
Тут у нас також буде вибір як налаштувати передачу:
- Через Custom HTML Tag у GTM;
- Через тег Facebook Pixel.
Тому далі розглянемо обидва варіанти.
Але перш ніж перейти до налаштування, спершу детальніше розглянемо структуру eCommerce-івентів.
Структура eCommerce-івентів
Якщо говорити про eCommerce-івенти, то вони є трохи складнішими, оскільки додатково потребують передачі масиву даних про товари. Саме цю особливість ми детальніше розглянемо далі.
Facebook, як і всі дотичні системи, має свою структуру передачі івентів, тому давайте з нею трохи ознайомимось. Розглянувши код передачі eCommerce-івенту на прикладі Purchase, можна помітити, що такий івент містить в собі більше параметрів, а також масив з даними про товар.
Базова структура івенту Facebook (на прикладі покупки) виглядає наступним чином:
fbq('track', 'Purchase',
{
value: 115.00,
currency: 'USD',
contents: [
{
id: '301',
quantity: 1
},
{
id: '401',
quantity: 2
}],
content_type: 'product',
compared_product: 'recommended-banner-shoes',
delivery_category: 'in_store'
}
);Додатково з кодом для передачі різних івентів можна ознайомитися детальніше за посиланням.
Усі ці дані, які мають передаватися до Facebook разом з івентом, зазвичай також передаються до аналітики GA4, але з дещо іншою структурою. Тому пропоную скористатися інформацією, яка передається в dataLayer і використовується для передачі івентів у GA4, також для передачі інформації про потрібні події до Facebook.
Основна фішка GTM, про яку часто забувають, полягає в тому, що дані eCommerce передаються до dataLayer один раз у загальній структурі, після чого їх можна перевикористовувати та надсилати в різні системи.
Ми беремо GA4 як приклад, оскільки більшість сайтів вже апріорі використовують її для передачі івентів до аналітики — як через розробників, так і через плагіни. Єдина умова — передача має відбуватися не напряму з коду сайту, а через масив dataLayer, який використовує GTM.
У цьому матеріалі ми не розглядатимемо налаштування eCommerce-івентів для GA4, а виходитимемо з того, що воно вже реалізоване. Детальніше про те, як це налаштувати читайте тут.
Уявімо, що на сайті вже відправляються базові eCommerce-івенти воронки (view_item, add_to_cart, begin_checkout, purchase) з такою структурою (на прикладі івенту покупки), яка відповідає структурі передачі eCommerce-івенту до аналітики:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T_12345",
value: 72.05,
currency: "USD",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
item_category: "Apparel",
price: 10.01,
quantity: 3
},
{
item_id: "SKU_12346",
item_name: "Google Grey Women's Tee",
item_category: "Apparel",
price: 21.01,
quantity: 2
}]
}
});Передача eCommerce-івентів через Custom HTML Tag у GTM
Для передачі івентів базової eCommerce-воронки Facebook (ViewContent, AddToCart, InitiateCheckout, Purchase) нам потрібно:
- Створити змінну DL - ecommerce.items для того, щоб ми отримали масив товарів з dataLayer, який передається разом з eCommerce-івентами GA4;

2. Створити змінну DL – ecommerce.currency, яка буде додатково витягувати валюту (Можна не створювати змінну, а вводити валюту вручну).

3. Створити новий тег Custom HTML, за допомогою якого ми адаптуємо структуру даних GA4 під потрібну для Facebook структуру.
Наведений нижче код розрахований на передачу базової eCommerce-воронки (перегляд картки товару, додавання до кошика, початок оформлення замовлення та покупка). Ви можете використовувати його без змін або адаптувати під свої потреби.
У коментарях до коду пояснено, за що відповідає кожна частина.
<!-- Facebook Pixel Code -->
<script>
(function() {
var event; // Змінна, яка міститиме назву івенту
var ecom = {{DL - ecommerce.items}}; // Змінна з масивом товарів, яку ми створили раніше. Якщо ви використали іншу назву змінної, підставте свій варіант.
// Визначаємо відповідність GA4-івентів івентам Facebook Pixel
switch({{Event}}) { // Перебираємо назву івенту.
case "view_item":
event = "ViewContent"; // якщо івент у dataLayer = view_item, передаємо ViewContent.
break;
case "add_to_cart":
event = "AddToCart"; // Якщо івент у dataLayer = add_to_cart, передаємо AddToCart
break;
case "begin_checkout":
event = "InitiateCheckout"; // Аналогічно до попередніх кроків воронки
break;
case "purchase":
event = "Purchase"; // Аналогічно до попередніх кроків воронки
break;
default:
event = false;
}// Кроки фанелу, які не хочеться передавати, можна звідси також прибрати
fbProduct = []; // Створюємо масив продуктів
fbId = []; // Та масив ідентифікаторів
var fbValue = 0; // Загальна вартість замовлення / події
ecom.forEach(function(item, i, ecom) { // Перебираємо всі товари з ecommerce.items
gaFormat = item
o = {}; // Створюємо обʼєкт товару у форматі Facebook Pixel
o.id = item.item_id; // ID товару
o.quantity = item.quantity||1; // Кількість (за замовчуванням — 1)
o.item_price = item.price; // Ціна товару
o.name = item.item_name;// Назва товару
o.category = item.item_category; // Категорія товару
fbProduct[i] = o; // Додаємо товар до масиву продуктів
fbId[i] = item.item_id; // Додаємо ID товару до окремого масиву
fbValue += Number(item.price*item.quantity)||Number(item.price); // Рахуємо загальну суму (ціна × кількість)
});
// Відправляємо івент до Facebook Pixel
fbq('track', event, {
content: fbProduct,
content_ids: fbId,
content_type: 'product',
value: fbValue,
currency: {{DL - ecommerce.currency}} // Передаємо валюту (можна вказати значення вручну)
});
})();
</script>
<!-- End Facebook Pixel Code -->4. Оскільки в цьому прикладі ми одразу передаємо всю стандартну воронку eCommerce, тригер має відповідати класичному виду eCommerce з переліком потрібних подій, заданих регулярним виразом.

Повне налаштування матиме наступний вигляд:

Таким чином ми вже налаштували передачу чотирьох eCommerce-івентів Facebook (ViewContent, AddToCart, InitiateCheckout, Purchase) і можемо одразу перевірити передачу за допомогою вже розглянутого раніше розширення у браузері.
І це наочний приклад сили GTM. Ми буквально не долучаючи розробника для передачі даних у Facebook, перевикористали стандартну передачу у dataLayer eCommerce події GA4 і за декілька хвилин передали їх до іншої системи.
Передача eCommerce-івентів через тег Facebook Pixel
Зазвичай легше використовувати саме попередній варіант, і саме його я застосовую найчастіше. Проте для повного розуміння розглянемо й інший шлях.
Тепер переходимо до налаштування передачі eCommerce-івентів за допомогою тега Facebook Pixel.
Для цього нам потрібно виконати наступні кроки:
- Маємо змінну, яку ми створили у попередньому варіанті налаштування - DL - ecommerce.items;

2. Створюємо змінну, яка буде містити value;

3. Створюємо змінну типу Custom JavaScript, яка буде обробляти дані зі змінної DL - ecommerce та віддавати масив товарів у потрібному нам вигляді.
function () {
var items = {{DL - ecommerce.items}};// Отримуємо масив товарів з dataLayer (GA4 ecommerce.items)
var result = [];// Порожній масив для результату
if (!Array.isArray(items)) {// Перевіряємо, чи items є масивом
return result;// Якщо ні — повертаємо порожній масив, щоб уникнути помилок
}
items.forEach(function(item) {// Перебираємо всі товари в ecommerce.items
result.push({// Додаємо кожен товар у потрібному форматі
id: item.item_id || item.id,
quantity: item.quantity || 1,// Кількість товару (за замовчуванням — 1)
item_price: item.price
});
});
return result;
}
4. Створюємо ще одну зміну типу Custom JavaScript, яка буде містити масив ідентифікаторів.
function () {
var items = {{DL - ecommerce.items}};// Отримуємо масив товарів з dataLayer
var ids = [];// Порожній масив для ID товарів
if (!Array.isArray(items)) {// Якщо items не є масивом — повертаємо порожній масив
return ids;
}
items.forEach(function(item) {// Перебираємо всі товари
ids.push(item.item_id || item.id);// Додаємо ID товару
});
return ids;
}
5. Створюємо змінну, яка буде видавати назву події у форматі Facebook.
function () {
var event;// Змінна для зберігання назви події
switch({{Event}}) { // Визначаємо, який GA4 івент був у dataLayer і мапимо його на відповідний Facebook-івент
case "view_item":
event = "ViewContent";
break;
case "add_to_cart":
event = "AddToCart";
break;
case "begin_checkout":
event = "InitiateCheckout";
break;
case "purchase":
event = "Purchase";
break;
default:
event = false;
}
return event;// Повертаємо назву Facebook-івенту
}
Зверніть увагу, у цьому рішенні за кожен окремий параметр відповідає окрема змінна.
Тепер ідемо до вже знайомого кроку та створюємо новий тег Facebook Pixel:
- Вказуємо наш Facebook Pixel ID;
- Оскільки ми передаємо декілька подій (як і в попередньому варіанті), в полі Event Name обираємо Variable та вказуємо створену змінну - JS - event;
- В Object Properties додаємо:
- value — з нашою створеною змінною DL - ecommerce.value;
- currency — прописуємо значення вручну (або створюємо змінну, як у варіанті з HTML тегом);
- content_ids — сюди передаємо нашу змінну з ідентифікаторами товарів;
- content_type — прописуємо вручну значення product;
- contents — передаємо змінну з товарами;
- Як тригер використовуємо той самий, що створили у попередньому варіанті для передачі eCommerce-воронки.
Отримуємо налаштування такого вигляду:
Таким чином ми додатково налаштували передечі івентів за допомогою тега Facebook Pixel і передаємо ті ж дані, що й у попередньому способі.
Де знайти передані події в інтерфейсі Facebook (Meta Events Manager)
Повертаємось до нашого пікселя, ідентифікатор якого ми раніше використовували для налаштування. Тепер тут можна побачити івенти, передачу яких ми налаштували та які були відправлені до Facebook Pixel.

Реєстрація кастомного івенту
Під час передачі кастомної події Facebook фіксує її в Pixel, але не передає далі до рекламного кабінету, бо потребує підтвердження, що це ваша подія.
- Тому подію необхідно підтвердити. Для цього можна або натиснути кнопку Review, або Manage status.

2. Далі ви погоджуєтеся, що знаєте правила відправки івентів та дотримуєтеся їх.

3. На наступному кроці підтверджуєте івент.

4. Однак на цьому всі налаштування не завершуються. Після цього переходимо до розділу Custom Conversions та створюємо кастомну конверсію.

5. Для мінімального налаштування: даємо їй назву (можна використати ту саму назву, що й у івенту, щоб не плутатись), у полі Event обираємо нашу кастомну конверсію і додаємо правило, за яким конверсія має спрацьовувати (наприклад, можна вказати ваш сайт).
Підсумкове налаштування може мати наступний вигляд:

Тепер створена конверсія на базі кастомного івенту буде доступна у вашому рекламному кабінеті.
Підсумки
У результаті ми розглянули налаштування івентів різними варіантами передачі — від встановлення базового коду Facebook Pixel до передачі eCommerce-подій декількома способами.
Сподіваюся, тепер вам буде легше самостійно налаштовувати відстеження подій, і цей процес не викликатиме труднощів.
А якщо під час роботи з GTM з’явиться відчуття, що хочеться глибшого й більш системного розуміння — не лише окремих рішень, а загальної логіки роботи тегів, тригерів, змінних і dataLayer, — цим напрямом детально займається практичний курс PRO GTM від мого колеги, новий потік якого стартує вже 12 жовтня.

Завантаження коментарів…