Установка Facebook Pixel на сайт
Маркетингові дослідження показують, що 49% фахівців визнають соціальні медіа найефективнішим digital-каналом. Але в той же час його вважають складним в реалізації.
Facebook домінує в світі, а за охопленням в СНД поступається тільки ВК, але ситуація стрімко змінюється на користь першого. Тому реклама в Фейсбуці зараз дуже хороша. Раз у раз ми чуємо про кейсах, які підняли ROI / будь-який інший KPI проекту в сотні разів, і, звичайно, хочемо відчути такий приріст самі. А коли деякі рекламні канали відпадають з незалежних від нас причин, виникає задача урізноманітнити свою маркетингову стратегію. Це ж питання актуальне і для тих, хто відчуває застій або втрату трафіку, зниження конверсії і т.п.
Фейсбук-піксель - що це?
Де реклама, там і аналітика. Щоб гроші не пішли в нікуди, знадобиться Facebook Pixel. Це невеликий код відстеження на JS, вбудовувати на сайт 1px-ве зображення для збору інформації, роботи з аудиторією і підвищення ефективності рекламних кампаній у відповідній соцмережі. Після додавання коду на сайті нічого видимого не з'явиться, він буде відправляти відвідувачам куки і відстежувати дії, щоб потім використовувати їх для ретаргетінга. Цей спосіб реклами зараз вважається одним з найдешевших, тому що спрямований на зацікавлену аудиторію. Суть приблизно в наступному: фіксується візит людини на сайт і його поведінку, далі цього відвідувачеві показується реклама сайту в його фейсбучной стрічці. Все інше залежить від налаштувань, які будуть задані.
Для чого потрібен піксель:
Сегментація - створення аудиторій під ваші цілі.
Піксель збирає інформацію про людей, які відвідали потрібні вам сторінки сайту або виконали бажану дію, які при цьому є користувачами ФБ. З них створюється індивідуалізована аудиторія.
Аналітика - відстеження цільових дій на сайті.
Піксель фіксує конверсійні події на сайті: заходи, реєстрацію, оформлення замовлення і т.д., які принесла реклама. Використовуючи цю інформацію, ви можете оцінювати ефективність оголошень. Вона є в звітах.
Оптимізація - підвищення ефективності реклами.
Піксель закріплюється за оголошеннями для оптимізації, спрямованої на зростання конверсій. Фейсбук може визначати людей, які з більшою ймовірністю здійснять цільове дію на сайті, і показувати рекламу ім.
Щоб почати користуватися всіма благами Пікселя Facebook, потрібно впровадити його в ваш сайт.
Як встановити Піксель Фейсбуку на сайт
Даний приклад справедливий для OkayCMS, а також може бути сумісний з іншими системами.
1. У своєму рекламному акаунті створіть піксель і скопіюйте код, дотримуючись рекомендацій, як на скріншоті:
2. Відкрийте шаблон вашого сайту і вставте код в шапку перед закриває тегом </ head>. Він повинен бути на кожній сторінці.
Базовий код має такий вигляд, і його не потрібно змінювати:
<! - 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', 'ВАШ ID'); // Insert your pixel ID here.
fbq ( 'track', 'PageView');
</ Script>
<Noscript> <img height = "1" width = "1" style = "display: none"
src = "https://www.facebook.com/tr?id=1266641596747951&ev=PageView&noscript=1"
/> </ Noscript>
<! - DO NOT MODIFY ->
<! - End Facebook Pixel Code ->
Після того як основний код встановлений, дані про відвідувачів і переглядах сторінки (PageView) вже збираються.
- Додайте коди стандартних подій сайту, які вміє відслідковувати піксель. Вони розміщуються на цільових сторінках між тегами скрипта в коді пікселя:
- Перегляд вмісту сторінки (ViewContent);
- Пошук (Search);
- Додавання в корзину (AddToCart);
- Додавання в список бажань (AddToWishlist);
- Початок оформлення покупки (InitiateCheckout);
- Додавання платіжної інформації (AddPaymentInfo);
- Вчинення покупки (Purchase) - тут добре буде налаштувати пареметри value - ціна і currency - валюта, в якій вона вважається.
- Лід (Lead);
- Завершення реєстрації (CompleteRegistration).
ViewContent, AddToCart і Purchase (воронка) обов'язкові для динамічного ремаркетингу.
Існує 3 типи події (звичайний, розширений і рекомендований). Якщо ніяких вказівок від клієнта не було, ставимо рекомендований варіант.
Приклади того, як може виглядати встановлений код:
{If $ smarty.get.module == "ProductView" || $ Smarty.get.module == "ProductsView" || $ Smarty.get.module == "MainView"}
<Script>
$ (Document) .on ( 'submit', '.fn-variants.okaycms', function (e) {
e.preventDefault ();
if ($ (this) .find ( 'input [name = variant]: checked'). size ()> 0) {
variant = $ (this) .find ( 'input [name = variant]: checked'). val ();
} Else if ($ (this) .find ( 'input [name = variant]'). Size ()> 0) {
variant = $ (this) .find ( 'input [name = variant]'). val ();
} Else if ($ (this) .find ( 'select [name = variant]'). Size ()> 0) {
variant = $ (this) .find ( 'select [name = variant]'). val ();
price = $ (this) .find ( 'select [name = variant] option: selected'). data ( "price");
} Else if ($ (this) .closest ( '. Product_inner'). Find ( 'select [name = variant]'). Size ()> 0) {
variant = $ (this) .closest ( '. product_inner'). find ( 'select [name = variant]'). val ();
price = $ (this) .closest ( '. product_inner'). find ( 'select [name = variant] option: selected'). data ( "price");
/ * Кількість * /
}
fbq ( 'track', 'AddToCart', {
content_ids: variant,
content_type: 'product',
value: price,
currency: 'UAH'
});
});
</ Script>
{/ If}
{If $ smarty.get.module == "ProductView"}
<Script>
fbq ( 'track', 'ViewContent', {
content_ids: '',
content_type: 'product',
value:
{If $ smarty.get.module == "BlogView" && $ post}
<Script>
fbq ( 'track', 'ViewContent', {
content_ids: '
{If $ smarty.get.module == "CartView"}
<Script>
fbq ( 'track', 'InitiateCheckout');
</ Script>
{/ If}
{If $ smarty.get.module == 'OrderView'}
{Literal}
<Script>
fbq ( 'track', 'Purchase', {
value: {/ literal} {foreach $ purchases as $ purchase} '' {if! $ purchase @ last}, {/ if} {/ foreach}] {literal},
content_type: 'product',
});
</ Script>
{/ Literal}
{/ If}
Щоб використовувати всю зібрану інформацію для ремаркетингу, налаштовуються аудиторії. На відповідній вкладці → створити нову індивідуально налаштовану аудиторію → вибрати тип «Трафік веб-сайту» → уточнити сегмент:
- всі відвідувачі сайту;
- користувачі, що побували на певних сторінках;
- тільки користувачі, які відвідують певні сторінки;
- користувачі, які не були на сайті заданий період;
- кастомними аудиторія.
І далі додається те, що зажадає обраний пункт: URL, час і т.д. При необхідності задаються виключення.
Якийсь час пройде, поки Facebook почне збирати аудиторії і набере 20+ людина. Дані з'являться не відразу. Це норма, але переконатися, що піксель активний необхідно. Про те, що ваш код працює, можна дізнатися зі спеціального доповнення для Хрому .
Результат буде виглядати приблизно ось так:
Тепер ви маєте код ретаргетінга для Фейсбуку. Піксель вантажиться швидко, відстежує взаємодії з різних пристроїв, має можливість шеріться з вашими матеріалами на інші ресурси. Трохи часу на установку, а ефект і економія рекламних засобів при правильному налаштуванні будуть відчутними.
Якщо ви зовсім не в темі, щоб не залишитися без такого корисного інструменту, звертайтеся за налаштуванням до наших фахівців.