Як встановити код Пікселя Facebook і код події на WordPress

Піксель Facebook – досить важлива річ, а тому, як його встановити, також важливо знати. Багато хто каже, що чув про нього, але в принципі обходився без пікселя, і все було ок. У нашого клієнта виникла проблема навпаки – він сам почав вивчати відео-посібники по просуванню у Facebook, і одна з перших речей, яку йому сказали – потрібен Піксель. Він хоче його встановити, але не знає як. Скоріше за все, він такий не один. Для цих людей і призначений цей пост – ми розкажемо, як налаштувати і встановити код Пікселя Facebook і код події на WordPress.

В принципі задача ділиться на дві частини. Перша – отримати і встановити загальний код Пікселя, друга – налаштувати і встановити код події, які надає Facebook. Перша частина елементарна, з нею може справитись практично будь-який мінімально підкований користувач. А от по другій – як налаштувати події – є питання. Та і джерела в інтернеті описують процесс більше для технічних користувачів. У статті ми спробуємо показати це максимально докладно і зорзуміло для широкого загалу.

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

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

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

Думаю, це зрозуміло. Більше про потужні можливості Пікселя Facebook ви можете прочитати на їх сайті, а ми перейдемо до основного – як же все таки встановити Піксель на WordPress.

Частина перша – встановити код Пікселя Facebook

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

Спочатку ідемо у Менеджер подій, натискаємо Створити нове джерело – Піксель. Або зразу переходимо за цим посиланням (час від часу інтерфейс змінюється, але, думаю, розберетеся).

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

А далі натискаємо на поле з кодом самого скрипта – код автоматично зкопіюється в буфер.

Тепер його потрібно вставити на сайт. Я думаю, ви мінімально уявляєте, як додати код до в файли шаблонів WordPress. Детально це описувати я не буду. Якщо вам потрібна докладна інструкція, подивяться відео на початку поста. А в принципі є декілька способів встановити код стороннього сервісу на сайт WordPress. Найпростіший, але не дуже коректний – це відредагувати шаблон теми через панель керування. Тобто переходимо Вигляд – Редактор,  вибираємо файл хедера, header.php (або інший, зрідка тут можуть бути нюанси, ще й тому цей спосіб не дуже підходить для недосвідчених користувачів) і ставляємо скопійований код вище тегу </head>.

Натискаємо Оновити файл.

Як було сказано, з файлами може бути плутаниця. Крім того, ви можете з часом змінити активну тему. Відповідно код деактивується разом із старою темою. Більш корректний спосіб – додати його через плагіни. Зміни внесені на сайт через плагіни не залежать від активної теми. Тому встановлюємо плагін Insert Headers and Footers. Це просто, якщо ви не знаєте як, знову ж таки, подивіться відео.

Активуємо плагін. Переходимо Налаштування – Insert Headers and Footers і у відповідному полі вставляємо код Пікселя Facebook.

Все готово.

Частина друга, складніша – встановити код події Facebook

Але, як було сказано, щоб відслідковувати події – переходи на конкретну сторінку, придбання товару, заповнення форми тощо – все складніше. Перше нам треба вирішити, яка подія нас цікавить. Тобто щось з вище перерахованного. Система пропонує нам декілька стандартних подій (9), але кожна з них може становити:

1. Перехід на конкретну сторінку. Людина заходить на сторінку контактів. Або натискає кнопку “Відправити данні” і її система перенапрвляє на сторінку “Дякуємо, що Ви знами”. Або оформлює замовлення і потрапляє на сторінку “Дякуємо за покупку”. Нам треба становити код, який буде спрацьовувати при переході на цю сторінку.
2. Клік або таб конкретного елементу. Натискання кнопки “Додати в кошик”. Або клік кнопки “Зателефонувати нам” і перехід у додаток телефону.

Ми розглянемо дві основні події: Придбання і Зв’язатися. В принципі всі стандартні події налаштовуються за однаковою схемою – ми додаємо код або на сторінку, або прикріплюємо його до елементу, який люди будуть нажимати – і кожна подія налаштовуються або по завантаженню сторінки, або через вбудовану дію. Не лякайтеся – слова страшні, але зараз стане зрозуміло!

Отже після того, як встановили код основного Пікселя, натискаємо Далі і потрапляємо у таке вікно.

В ньому натискаємо посилання Вручну додати код події і бачимо наступне. Система пропонує нам декілька своїх стандартних подій.

Нас зараз цікавить Покупка. Натискаємо на неї і бачимо.

Власне кажучи, тут береться сам код. І, як було сказано, є дві опції: Track Event on Page Load і Track Event on Inline Action. Перша вкладка – код який потрібно вказувати для сторінки. Підходить для переходу на сторінку подяки –  підтвердження дії покупки, заповнення форми тощо. Друга вкладка – код який треба прикріпити до елемента (кнопки). Підходить для натискання кнопки “Позвонити нам”.

Є також параметри, але це виходить за межі теми Встановлення коду Пікселя Facebook на WordPress. Це цікава тема, ви можете ознайомитись із нею самостійно. А ми натискаємо на полі під параметрами і копіюємо у буфер код.

Його потрібно вставити на конкретній сторінці (не в файлі шаблону). Тому переходимо на сторінку, яка нас цікавить, і додаємо цей тег або через класичний редактор – вкладка Текст. Або через спеціальний блок WPBakery Page Builder. Або через блок нового редактора Гутенберга. Наприклад так:

Якщо нам потрібно відслідковувати клік кнопки “Зателефонувати нам”, ми в інтерфейсі Facebook переходимо до події Зв’язатися і відкриваємо вкладку Track Event on Inline Action. Тут ми можемо отримати код для прив’язки до елемента. Це вже трохи складніше.

У другому полі у нас є такий код:

<button id=”contactButton”>Зв’язатися</button>

<script type=”text/javascript”>

document.getElementById(‘contactButton’).addEventListener(‘click’, function() {

insert_event_code_here;

…

}, false);

</script>

Першу стрічка призначена для додавання у елемент. Якщо по простому, ви створюєте, наприклад, кнопку через WPBakery Page Builder і вказуєте частину contactButton у полі ID елемента.

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

<script type=”text/javascript”>

document.getElementById(‘contactButton’).addEventListener(‘click’, function() {

insert_event_code_here;

…

}, false);

</script>

Ось і все. Тепер ви можете протестувати, як працює код, і якщо все гаразд – натиснути “Готово”. Ви успішно додал код Пікселя Facebook і код події на свій сайт на WordPress. Вітання. Якщо у вас виникли питання, напишіть про це у розділі коментарів нижче, і спробуємо вам допомогти.