Як встановити код Пікселя 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), але кожна з них може становити:
- Перехід на конкретну сторінку. Людина заходить на сторінку контактів. Або натискає кнопку “Відправити данні” і її система перенапрвляє на сторінку “Дякуємо, що Ви знами”. Або оформлює замовлення і потрапляє на сторінку “Дякуємо за покупку”. Нам треба становити код, який буде спрацьовувати при переході на цю сторінку.
- Клік або таб конкретного елементу. Натискання кнопки “Додати в кошик”. Або клік кнопки “Зателефонувати нам” і перехід у додаток телефону.
Ми розглянемо дві основні події: Придбання і Зв’язатися. В принципі всі стандартні події налаштовуються за однаковою схемою – ми додаємо код або на сторінку, або прикріплюємо його до елементу, який люди будуть нажимати – і кожна подія налаштовуються або по завантаженню сторінки, або через вбудовану дію. Не лякайтеся – слова страшні, але зараз стане зрозуміло!
Отже після того, як встановили код основного Пікселя, натискаємо Далі і потрапляємо у таке вікно.
![]()
В ньому натискаємо посилання Вручну додати код події і бачимо наступне. Система пропонує нам декілька своїх стандартних подій.
![]()
Нас зараз цікавить Покупка. Натискаємо на неї і бачимо.
![]()
Власне кажучи, тут береться сам код. І, як було сказано, є дві опції: 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>
<script type=”text/javascript”>document.getElementById(‘contactButton’).addEventListener(‘click’, function() {fbq(‘track’, ‘Contact’);}, false);</script>
Ось і все. Тепер ви можете протестувати, як працює код, і якщо все гаразд – натиснути “Готово”. Ви успішно додал код Пікселя Facebook і код події на свій сайт на WordPress. Вітання. Якщо у вас виникли питання, напишіть про це у розділі коментарів нижче, і спробуємо вам допомогти.






Ремонт помешкань і офісів, обладнання для вентиляції і кондиціонування, дизайн інтер’єру – все це охоплює сучасна тема ProHauz. Окремо підготовлені варіанти дизайну, для ніш електричного олбладнання, клімат систем і багато чого ще.











І ви отримаєте більше сприйняття від потенційного клієнта – він ніби уже побував у вас віртуально і хоче завітати особисто. Ви отримаєте більше репостів у соціальних мережах – люди обожнюють різні фото і селфі на красивому фоні. Врешті решт ви отримаєте кращий показник кількості переглянутих сторінок за сеанс, коли людині захочеться продивитися усі фото вашого закладу.
Ідей безліч, але як щодо онлайн? Насправді онлайн ця ідея не нова. Переважна більшість інтернет-магазинів використовують “З цим товаром купляють також”, “Супутні товари”. Просто разом з оффлайн це можна зробити якісніше і креативніше. Заохотьте працівників (це можна зробити без великих витрат) виявити приховані таланти. Створити різні набори, гарно їх оформити. Сфотографуйте їх розмістіть на сайті. З реальними фото це вдасться обіграти краще. Отримайте репости, зацікавленість і продажі.











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




