Разборы

Как своими силами установить пиксель Facebook* на сайт

Не отвлекайте программиста :)
О Facebook*-пикселе

Пиксель Facebook* (Facebook* Pixel) — это фрагмент кода JavaScript, который собирает информацию о посетителях сайта и помогает настраивать рекламу в Facebook* и Instagram*.

Facebook-пиксель запоминает всех, кто заходил на сайт, и передаёт эту информацию в рекламный кабинет Facebook*. Благодаря этому, мы можем найти посетителей сайта в Facebook* или Instagram* и настроить на них рекламу.

Как это работает. Человек заходит на сайт, пиксель Facebook* запоминает его и записывает в аудиторию. Вы настраиваете рекламную кампанию на эту аудиторию — посетитель видит вашу рекламу в Facebook* и Instagram*.

Как работает Facebook*-пиксель

Что можно делать с помощью Facebook*-пикселя

С помощью пикселя вы сможете:  

  • Собирать аудитории для ремаркетинга. Также с пикселем можно настраивать комбинированные аудитории, например: все посетители сайта за последние 30 дней, которые не купили.
  • Настраивать конверсии. Мы увидим, когда пользователи достигают определённых целей на сайте: покупают товар, качают прайс-листы, регистрируются на мероприятие. По каждой аудитории в будущем можно запустить отдельную рекламную кампанию на Facebook*.
  • Оптимизировать рекламу. С пикселем проще оценить эффективность различных рекламных кампаний. Мы можем отсеять плохие варианты и оставить объявления, которые работают.
  • Создавать похожие аудитории. На основе наших аудиторий Facebook* может найти похожих людей внутри соцсети. Он перебирает тысячи параметров (пол, география, возраст, поведение, интересы), чтобы найти наших потенциальных покупателей.

Рассказываю, как добавить пиксель на сайт без привлечения программистов.

Собирайте контакты из Facebook* вместе с UniSender
Готовая интеграция Facebook* Lead Ads и сервиса рассылки. Собирайте базу, настраивайте автоматизацию и получайте продажи.
Попробовать
Как своими силами установить пиксель Facebook* на сайт 2

Как установить пиксель Facebook* на сайт

1. Переходим в Ads Manager.

2. Нажимаем «Ads Manager» — «Пиксели».

Раздел "Пиксели"

3. Выбираем «Добавить новый источник данных» — «Пиксель Facebook*».

добавляем новый источник данных

4. Пиксель можно добавить через прямую интеграцию с Google Tag Manager, вручную или отправить информацию о настройке программисту.

Варианты установки пикселя

Выбираем второй вариант, чтобы понимать как работает пиксель.

Если Google Tag Manager уже установлен на сайте...


… Можно настроить автоматическую интеграцию Facebook*-пикселя на сайт. Нажимаем первый пункт и выбираем среди партнёров Google Tag Manager (он должен быть уже настроен).

выбор партнёраДалее просто следуем простым указаниям по настройке интеграции.

5. В следующем окне мы видим рекомендации по установке кода на сайт. С этой страницы нужно скопировать код пикселя.

Как своими силами установить пиксель Facebook* на сайт 6

6. Переходим в Google Tag Manager.

Google Tag Manager (GTM) — инструмент для работы с различными кодами на сайте. Мы устанавливаем GTM, а все остальные коды добавляем уже через его интерфейс. При загрузке страницы Google Tag Manager подгружает все остальные скрипты: Google Analytics, Яндекс Метрику, Facebook* Pixel и другие.

Зарегистрироваться в GTM можно на его официальной странице. После регистрации нужно установить код GTM в разметку сайта. Это можно сделать самому (вот информация в помощь) или обратиться к верстальщику.

Как выглядит код GTM
Как выглядит код GTM

7. Мы установили GTM. Теперь нужно проверить его работоспособность. Самый простой способ — установить приложение для Google Chrome — Tag Assistant.

После установки приложение появится в окне браузера. Нажимаем на Tag Assistant, жмём «Enable» и обновляем страницу. Видим какие скрипты подгружаются.

Если до этого вы не устанавливали никаких скриптов кроме GTM, появится только он
Если до этого вы не устанавливали никаких скриптов кроме GTM, появится только он

8. Мы убедились, что GTM установлен на сайте. Возвращаемся в его личный кабинет и нажимаем «Теги» — «Создать».

личный кабинет GTM

9. Вносим название тега (Facebook* Pixel) и нажимаем «Конфигурация тега».

нажимаем «Конфигурация тега»

10. Выбираем тип тега. GTM предложит много готовых вариантов, но нам нужен «Пользовательский HTML».

выбираем пользовательский HTML

11. Вставляем наш код Facebook* Pixel, который мы получили ранее.

вставляем код Facebook* Pixel

12. В расширенных настройках выбираем — «Один раз на страницу».

выбираем"один раз на страницу"

13. Выбираем стандартный триггер «All Pages» — «Просмотр страницы». Теперь Facebook*-пиксель будет работать на всех страницах сайта и передавать данные в Facebook*-кабинет.

пиксель будет работать на всех страницах

В следующей статье я расскажу, как создавать триггеры под различные события на сайте.

14. Нажимаем «Сохранить» и возвращаемся в рабочую область, чтобы проверить работу нашего пикселя. Нажимаем «Предварительный просмотр».

жмём "предварительный просмотр"

15. Переходим на свой сайт, видим окно с конфигурацией тегов.

В этом окне можно проверить работоспособность кода до публикации на сайте
В этом окне можно проверить работоспособность кода до публикации на сайте

16. В окне «Summary» — «Tags Fired On This Page» мы видим наш код — Facebook* Pixel (название которое вы вносили ранее). Здесь можно посмотреть и другие скрипты на странице.

17. Если вы увидели свой код, возвращайтесь в GTM и нажимайте кнопку «Отправить».

жмём "отправить"

18. Вносим названия для истории и нажимаем «Опубликовать».

публикуем пиксель

Поздравляю! Вы добавили пиксель Facebook* на сайт.

В следующей статье я рассказываю, как настраивать конверсии с помощью Facebook*-пикселя. Будем решать задачки вроде таких:

  • С помощью пикселя найти всех пользователей, которые зарегистрировались на мероприятие на сайте, и настроить на них рекламу в Facebook*.
  • Найти всех покупателей конкретного продукта и настроить рекомендации из сопутствующих товаров на Facebook*.

А пока у меня всё 🙂

Обновлено 9 июня 2020