Как создать и добавить код пиксель Facebook на сайт

Блог » Как создать и добавить код пиксель Facebook на сайт

Анализ целевой аудитории и точное понимание ее основных потребностей — залог эффективного таргетинга рекламы в Фейсбук*. Только хорошо зная своих пользователей, вы сможете сделать точную выборку из нескольких миллиардов людей, зарегистрированных в этой социальной сети. С этим вам поможет специальный инструмент — Facebook* Pixel.

Что такое пиксель Facebook* и что он делает 🤔

◼️ Что такое пиксель Facebook* 

Пиксель — это счетчик JavaScript, который выдают владельцу рекламного кабинета Facebook* для установки на площадку. Этот кусок JavaScript-кода добавляют на все страницы сайта. 

◼️ Что делает пиксель Facebook* 

Он запоминает и собирает данные всех пользователей, которые зашли на сайт, и их действиях, а затем передает их в AdsManager.

Для работы с пикселем нужно выполнить 2 важных условия:

  • Создать для компании сайт,
  • Иметь доступ к коду сайта, что вносить в него изменения.

◼️ Какие данные собирает пиксель Facebook* 

Пиксель Фейсбук* собирает:

  • информацию по всем зарегистрировавшимся на сайте пользователям, 
  • данные о просмотре страниц,
  • сведения по всем этапам заказа: от момента попадания товара в корзину до факта оплаты или ухода с сайта,
  • смотрит, какие пользователи заполняли заявку

и т.д.

Зачем нужен Facebook* Pixel

Пиксель Фейсбук* выполняет много полезных функций в рекламном аккаунте. Например:

  • Собирает данные о пользователях и их поведении на сайте. Например, посетитель перешел на лендинг и забросил товар в корзину. Если на сайте установлен пиксель, он внесет его в список, который затем можно будет использовать для анализа ЦА и более точной настройки таргетинга;
  • Оценивает конверсии трафика, результативность и окупаемость рекламной кампании. Соответствие товара или услуги интересам целевой аудитории всегда основано на гипотезах. Пиксель помогает понять, отвечает ли ваше предложение ожиданиям пользователей.
  • Увеличивает продажи и позволяет применять автоматические стратегии управления ставками. Благодаря собранным пикселем данным, Фейсбук* самостоятельно подбирает потенциальных клиентов, основываясь на полученных данных. Например, если поставить оптимизацию за конверсии, система подберет новых клиентов в автоматическом режиме;
  • Оптимизация промоакций. Алгоритмы Facebook* позволяют направить показы на пользователей, которые изначально заинтересованы в вашей продукции и с большей вероятностью совершат покупку. 
  • Настройка конверсии. Вы сможете увидеть, в какой момент посетитель достигает какой-либо цели: скачивает ценник, покупает товар или осуществляет регистрацию на мероприятие. В будущем по каждой категории клиентов можно запустить отдельную рекламу.
  • Ремаркетинг. Пиксель помогает настраивать подобные и комбинированные аудитории. Основываясь на данных о вашей аудитории, платформа поможет найти людей с такими же интересами внутри социальной сети. 

Как создать пиксель Facebook*

Чтобы создать пиксель Фейсбук*:

  1. Откройте Events Manager.
  2. Подключите новый источник данных нажав «+» и выберите источник «Интернет».
  3. Выберите пиксель Facebook* и нажмите «Подключить»
  4. Придумайте название для пикселя. Чаще всего пользователи выбирают названия исходя из сайта, на который будут устанавливать пиксель «Продолжить».

Где найти ID пикселя Фейсбука*

Код вашего пикселя можно увидеть в меню рекламного кабинета:

  1. Перейдите в «ManagerEvents»
  2. Кликните по вкладке с пикселями. 

Нужный вам ID расположен под его наименованием. Эти цифры можно записать или скопировать: достаточно просто кликнуть по ним. В Ads Manager можно создать 1 код, в бизнес менеджере – до 10.

Как добавить JS-код пикселя на сайт 👨🏻‍💻

  1. Зайдите в Ads Manager.
  2. Нажмите «Пиксели».Категория Пиксели
  3. Выберите вкладку «Добавить источник сведений» – «JS код Facebook*».Добавить новое событие Пикселя
  4. Внесите код пикселя на свой портал. Для этого можно использовать один из трёх вариантов добавления: вручную, через Google Tag Manager или отправив инструкцию с настройками профессиональному программисту. Чтобы разобраться в работе пикселя, выберите первый вариант.Установка пикселя
  5. В новом окне вы увидите рекомендации, которые помогут вам установить код на ресурс.Отсюда вы сможете скопировать JS код.
  6. Перейдите в Google Tag Manager (GTM) – это специальный сервис для работы с разными интернет-кодами. Займитесь установкой GTM, а другие коды добавьте через интерфейс. После загрузки страницы подгрузите код Facebook* и остальные скрипты, после чего зарегистрируйтесь на странице в GTM. После этого вам останется только добавить код GTM в разметку интернет-ресурса. Это может сделать верстальщик или вы сами.Google Tag Manager (GTM)
  7. Проверьте работоспособность. Для этого скачайте приложение GTM для Гугл Хром. После установки оно откроется на компьютере.
  8. Нажмите на расширение «Tag Assistant» – «Enable» и обновите страничку. Так вы увидите скрипты, которые загружаются. Если ранее установка каких-либо скриптов не выполнялась, вы увидите только GTM.Google Tag Assistant
  9. Убедившись в том, что GTM установлен, вернитесь в его личный кабинет и нажмите кнопки «Теги» – «Создать».Создать теги GTM
  10. Впишите наименование тега и нажмите «Разновидности».Разновидности
  11. Выберите разновидность тега. Среди нескольких вариантов, предлагаемых GTM, остановитесь на «Пользовательском HTML».Пользовательский HTML
  12. Вставьте полученный ранее код пикселя.Вставить код пикселя
  13. В окне с расширенными настройками выберите «1 раз на страницу».1 раз на страницу
  14. Поставьте значок возле классического триггера «All Pages» – «Просмотреть страницу».All Pages
  15. Сохраните изменения и вернитесь в рабочую область для проверки работы пикселя Фейсбук*. Для этого нужно нажать «Предварительный просмотр».Предварительный просмотр
  16. Зайдя на свой портал, откройте окно с тегами. Проверьте работу кода.Проверка работы кода пикселя
  17.  Найдя свой код в разделе «Summary» – «Tags Fired On This Page», вернитесь в GTM – «Отправить».Tags Fired On This Page
  18. Дайте истории имя и разместите ее.Имя истории
  19. На этом все ! Пиксель Facebook* добавлен на сайт.

Как вставить код на сайт вручную

◼️ Если вы будете устанавливать код самостоятельно

Чтобы вставить пиксель на сайт самостоятельно:

  1. Перейдите в Events Manager, выберите пиксель и нажмите «Продолжить настройку пикселя».
  2. Нажмите «Пиксель Facebook*» и далее – «Подключить».
  3. После этого выберете «Установить код вручную» и скопируйте код пикселя.
  4. Найдите заголовок сайта и вставьте код в конце раздела заголовка(перед закрывающим тегом </head>.
  5. Нажмите «Продолжить» и включить «Автоматический расширенный поиск совпадений». 
  6. Нажмите «Продолжить» после чего добавьте нужные вам события для пикселя. О событиях мы подробнее расскажем. 

◼️ Если код будет устанавливать другой человек:

Если у вас есть специалист, которому можно делегировать эту задачу, отправьте ему письмо с инструкцией по установке прямо из EventsManager. Для этого в Events Manager:

  1. Выберите пиксель.
  2. Нажмите «Продолжить настройку пикселя» и далее кликните «Отправить инструкцию по электронной почте».
  3. Перед вами откроется окно, в которое нужно вписать email получателя и нажать «Отправить». 

Как установить пиксель на разные сайты 🛠

WordPress

Этот сайт предлагает 2 способа установки: с помощью специального плагина или посредством ручного редактирования файлов. Выполнить эти действия могут только администраторы с доступом к панели управления сайта на WP. 

🔹Способ 1. Установка с помощью плагина

  1. Зайдите в раздел «Подключение действий на сайте с помощью пикселя».
  2. Кликните по блоку «Добавить код через партнерские интеграции».код через партнерские интеграции
  3. В открывшемся окне выберите нужный движок.
  4. Перед вами откроется экран «Подключение профиля WordPress» – нажмите здесь на «Продолжить».
  5. Кликните по строчке «Скачать» и загрузите архив с расширением для веб-ресурса.Скачать пиксель для WordPressСнова нажмите «Продолжить».
  6. Перейдите в консоль управления ресурса и в появившемся меню выберите раздел «Плагины» – «Добавить новый» – «Загрузить».
  7. Для продолжения загрузки нажмите «Выберите файл» и укажите архив со скачанным плагином.
  8. Завершите установку и активируйте плагин.
  9. Разместите на сайте пробный трафик – это позволит убедиться в том, что пиксель работает правильно.
  10. Нажмите «Продолжить» – на этом добавление пикселя окончено. Теперь вы можете закрыть эту страницу или продолжить отслеживать события на сайте.

🔹Способ 2. Ручная установка

Поставить пиксель Фейсбук на WordPress без дополнительного программного обеспечения можно следующим образом: если у вас относительно новая версия (от 4.4) или вы не планируете ставить туда очередной плагин, воспользуйтесь этой инструкцией:

  1. Зайдите в раздел «Подключение действий на ресурсе при помощи пикселя».
  2. Вам нужен пункт «Внести код пикселя вручную».
  3. Перейдите в окошко для продолжения установки.
  4. Скопируйте пиксель в буфер обмена.
  5. Откройте другую вкладку, войдите в панель управления ресурса на WP – меню «Вид» – «Редактирование тем».
  6. В списке с файлами выберите «Заголовок» и нажмите на него.
  7. После загрузки информации в редактор пропишите код пикселя перед тегом.
  8. Кликните по кнопке, указывающей на запуск файлового обновления.
  9. Снова перейдите в AdsManager и запустите пробный трафик.
  10. Нажав «Продолжить», настройте те события, которые нуждаются в отслеживании.Консоль WordPress

Tilda

Чтобы поставить пиксель Фейсбук* на сайт, который работает на движке Tilda, нужно вписать его код и отредактировать HTML ресурса. Оба варианта работают только в платных тарифах, но справиться с ними сможет даже начинающий пользователь:

  1. Войдите в профиль на Tilda.
  2. Укажите нужный сайт.
  3. Зайдите в настройки.
  4. В появившемся меню выберите раздел «Аналитика».
  5. Найдите поле Facebook*Pixel.
  6. Вставьте в него ID пикселя.
  7. Сохраните и разместите на сайте внесенные изменения.

Эту же процедуру можно выполнить вручную:

  1. Выберите «Еще» в стандартных настройках.
  2. Найдите раздел с HTML-кодами.
  3. Нажмите на строку для редактирования.
  4. Вставьте код пикселя.
  5. Сохраните и разместите на сайте внесенные изменения. Как только вы это сделаете, начнется передача данных с ресурса в Tilda на Facebook*.

Bitrix

Для добавления пикселя Фейсбук* на сайт, созданный в Bitrix, необходимо выполнить несколько простых шагов:

  1. Зайдите в профиль Facebook*Ads и скопируйте ID пикселя.
  2. Перейдите в Bitrix и найдите панель управления вашего сайта.
  3. Откройте меню с его настройками.
  4. Пролистайте вниз до строчки «Дополнительно …».
  5. Выберите раздел «Добавление пикселя».
  6. Поставьте «галочку» около чек-бокса «Facebook*».
  7. В текстовое поле впишите код пикселя.
  8. Сохраните и разместите на сайте внесенные данные.Установка кода ФБ в Bitrix

Wix

Так же можно настроить пиксель Фейсбук* на те интернет-ресурсы, которые работают на тарифе WixPremium и имеют собственный подключенный домен. В этом случае процесс занимает всего несколько минут:

  1. Авторизуйтесь в своем аккаунте на Wix.
  2. Перейдите в панель управления (она расположена в настройках) и нажмите на «Для маркетинга».Для маркетингаПеред вами откроется новое окно. Перейдите в раздел для проведения интеграции, выберите название пикселя и подключите его.Установка пикселя Фейсбука на Wix
  3. Добавьте JavaScript-код Facebook*.
  4. В новое окно вставьте его ID, кликните по «Применить» и завершите установку.

Opencart

Вставить пиксель Фейсбука* в Opencart можно следующим образом:

  1. Зайдите в Facebook*Ads.
  2. Выберите раздел «Добавить код через интеграцию с партнерами».
  3. В открывшемся списке отыщите OpenCart и кликните по нему.
  4. Перед вами откроется мастер подключения. Скачайте его и распакуйте ZIP-архив с нужным вам плагином.
  5. Откройте в интернете новую вкладку и авторизуйтесь в своем профиле движка.
  6. В меню кликните по «Extensions».
  7. Зайдите в раздел «Installer».
  8. Кликните по «Upload» и выберите скачанный недавно архив.
  9. Снова вернитесь в «Extensions».
  10. Около расширения FAE нажмите плюсик – он запустит процедуру установки.
  11. Кликните строчку «Начать» и сделайте все по инструкции.
  12. По окончанию процедуры вернитесь в панель рекламного кабинета и проверьте правильность действия кода.Как вставить пиксель Фейсбука в Opencart

Shopify

  1. Скопируйте в рекламном кабинете ID своего кода.
  2. Авторизуйтесь в аккаунте Shopify.
  3. В расположенном слева меню нажмите кнопку «OnlineStore».
  4. Перед вами откроются дополнительные подпункты – выберите «Preferences» – «PixelФейсбук».
  5. В текстовом поле пропишите ID пикселя и нажмите «Save».Установка пикселя Фейсбук в магазин Shopify

Joomla

  1. Войдите в аккаунт Joomla и в панели управления выберите блок «Расширения»(Extensions)
  2. Выберите «Управление»(Manage) после чего нажмите на «Установку»(Install)
  3. Найдите файл: Facebook*-pixel-for-joomla-<pixel ID>.zip.
  4. Нажмите «Управлять»
  5. Выполните поиск по фразе: Official Facebook* Pixel
  6. В столбце изменить статус пикселя с «Отключено» на «Включено».

Drupal

  1. Войдите в аккаунт Drupal и выберите «Модули»(Modules)
  2. Нажмите «+ Установить новый модуль»( Install new modules)
  3. Нажмите «Выбрать файл»(Choose file) и выберите: Facebook*-pixel-for-drupal-<pixel ID>.zip.
  4. Нажмите «Включить недавно добавленные модули» и установить флажок напротив «Официальный пиксель Facebook*». После этого сохраните конфигурацию.

Google Tag Manager

🔹Установка пикселя в Google Tag Manager

  1. Зайдите в свой аккаунт Google Tag Manager и выберите контейнер своего сайта. После этого нажмите «Добавить новый тег».
  2. Кликните на «Пользовательский тег HTML» и введите название тега
  3. Перейдите на страницу Facebook* Events Manager и нажмите «Добавить событие».
  4. Выберите «С нового сайта» и нажмите «Установить код вручную».
  5. Выберите «Копировать код», после чего вернитесь в Google Tag Manager и вставьте скопированный код в HTML-контейнер.
  6. В меню нажмите «Расширенные настройки» и в разделе «Настройки активации тега» выберите «Один раз на страницу».
  7. Откройте «Условия активации» и выберите «Все страницы». Далее нажмите «Создать тег».

🔹Создать тег для Google Tag Manager

Создав тег, вы сможете создать отдельные теги для разных страниц и тегов.

Для этого:

  1. Откройте Google Tag Manager и выберите контейнер своего сайта. 
  2. Вставьте фрагмент кода с нужным событием и переменные, которые вы хотите отслеживать. 
  3. Нажмите на «Пользовательский тег HTML» после чего введите название нужного тега.
  4. Скопируйте и вставьте фрагмент кода.
  5. Нажмите в меню «Расширенные настройки» и в разделе «Настройки активации тега» выберите «Один раз на событие».
  6. Откройте раздел «Порядок активации тегов» и поставьте флажок рядом с нужным пунктом для активации тега.
  7. В разделе «Условия активации» выберите нужный триггер и нажмите «Создать тег». Для создания других тегов повторите алгоритм выше. 
  8. После создания всех нужных тегов нажмите «Опубликовать».

Если все сделано правильно, и пиксель установлен правильно, он начнет сразу же передавать в статистику социальной сети информацию о том, что тот или иной посетитель делал на вашем сайте. 

Как проверить, правильно ли установлен пиксель? 🧐

Обязательный шаг при работе с пикселем: проверка корректности его работы. Сделать это можно двумя способами.

◼️ Способ 1. Тестирование событий

При отправке события в приложении через MobileMeasurementPartner или Facebook* SDK (если говорить о браузере, то с помощью пикселя Facebook*) этот инструмент тестирования поможет:

  • Убедиться в правильности отправления событий;
  • Проверить, все ли события настроены так, как надо;
  • Внести коррективы в случае проблем или подозрительных действий;
  • Просмотреть дедуплицированные и обработанные события;
  • Удостовериться в том, что дедупликациянастроена правильно (актуально только для веб-событий).

Пользоваться инструментом тестирования событий довольно просто:

  1. Зайдите в Events Manager.
  2. Найдите свое приложение или пиксель в разделе «Источники данных».
  3. Запустите процедуру тестирования. При этом помните о том, что закрывать веб-страницу нельзя – в противном случае регистрация действий будет остановлена.
  4. Чтобы проверить события в приложении, откройте его на смартфоне. Если вы хотите сделать это на интернет-ресурсе, зайдите во вкладку «Тестирование событий браузера», впишите URL сайта и кликните по «Открыть». После этого он откроется в отдельной вкладке или окне.
  5. Для тестирования уже настроенных событий проверьте, как они работают на сайте или в приложении. Действия будут отображаться в одноименной вкладке в течение 30 секунд.
  6. Чтобы выбрать типы действий и данные, которые вы хотите увидеть, выберите типы действий (они вам уже известны) и информацию о них (параметры, URL, актуальные проблемы).
  7. После окончания тестирования событий нажмите «Удалить действия». При этом они останутся доступны в Events Manager, результатах инструмента для создания аудиторий и отчетности по рекламе.

Сведения о проведенном анализе сохраняются во вкладке на протяжении суток, но при желании их можно удалить раньше. Если в инструменте тестирования ваши события не отображаются, проверьте сообщения об ошибках и устраните проблемы.

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

◼️ Способ 2. Используйте расширение Facebook* Pixel Helper

Чтобы осуществить проверку в браузере Chrome, установите Фейсбук* Пиксель Хелпер. Благодаря этому расширению также можно понять, правильно ли установлен пиксель и есть ли в его работе ошибки.

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

Если пиксель установлен правильно, он начнет сразу же передавать в статистику социальной сети информацию о том, что тот или иной посетитель делал на вашем сайте. Теперь вы можете настроить пиксель под свои задачи.

🔹Что такое события в Facebook*

Действия пользователя на сайте называют событием. Facebook*Ads делит их на несколько классов:

  • Стандартные – их пиксель ФБ распознает в автоматическом режиме;
  • С индивидуальными настройками – их пользователь выбирает самостоятельно, изменяя код пикселя;
  • Конверсии с индивидуальными настройками – это те события, которые будут отслеживаться только при переходе по указанному адресу. Работа с ними не нуждается в изменении кода пикселя на сайте;
  • События пикселя с автоматическим входом – включают в себя метаданные страницы, информацию о пикселе, метаданные HTML и данные о кликах по кнопке;
  • События в приложении «Автоматический вход» – отображают все, что связано с обработкой покупки, а также запуском или установкой приложения.

Ниже мы собрали основные инструкции по настройке пикселя, которые помогут повысить эффективность работы с Facebook* Pixel.

🔹Как отслеживать стандартные цели

  1. Зайдите в «Источник данных» и выберите пиксель. После этого нажмите «Добавить события».
  2. В открывшемся меню кликните «Из пикселя» после чего нажмите «Открыть инструмент настройки событий».
  3. Введите ссылку на ваш сайт(URL) и нажмите «Открыть сайт».
  4. После того как откроется ваш сайт, выберите событие, которое вы хотите отслеживать: «Отслеживать новую кнопку» или «Отслеживать URL»

🔹Как отслеживать специально настроенные конверсии

  1. Откройте раздел «Специально настроенные конверсии» и нажмите «Создать специально настроенную конверсию». 
  2. Придумайте название конверсии, выберите свой пиксель в «Источнике данных» и кликните на «Событие конверсии». 
  3. После этого можно:
  • создать конверсию с посещением различных URL. Для этого в блоке «Событие конверсии» выберите «Весь трафик для URL». Затем введите все URL через знак «+».
  • создать конверсию с разным набором событий. Например, отправил форму заказ звонка или купить.

🔹Как с помощью пикселя собирать аудиторию

Зная, где взять пиксель Фейсбука* и как правильно пользоваться этим инструментом, вы сможете собрать идеальную целевую аудиторию.

Чтобы собрать такую аудиторию из всех посетителей лендинга или сайта, нужно:

  1. Зайдите в кабинет для показа рекламы Facebook*.
  2. Перейдите в его меню (находится вверху слева).
  3. Кликните по вкладке «Ресурсы» – «ЦА».
  4. Нажмите «Создание личной аудитории».
  5. Выберите раздел «Сайт» – здесь по умолчанию стоит «Все посетители ресурса», но в случае необходимости можно добавить уточнение или что-то исключить (например, оставить только тех людей, которые заходили на какие-то страницы или посещают ваш ресурс с завидной регулярностью). Эти изменения будут актуальны в течение 30 дней, но срок каждого условия можно увеличить до 180 дней.
  6. Нажмите «Создание ЦА» и укажите ее название.
  7. Подтвердите операцию в соответствующем окошке – просто нажмите на кнопку «Готово».

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

Как работать с пикселем в 2022 году 🤓

Из-за признания компании Мета экстремистской организацией, актуальности использования пикселя в РФ пропала. При этом, вы можете продолжать работать с зарубежным заказчиками и запускать для них рекламу на за границей. 

Чтобы работать с Facebook* несмотря на ограничение, используйте антидетект браузер. В отдельных статьях мы рассказывали, как работает антидетект браузер и как выбрать правильный антидетект браузерЕсли нет времени читать, просто скачайте Dolphin{anty} и наслаждайтесь работой одного из лучших антидетект браузеров. 


** Компания Meta Platforms Inc., владеющая соцсетями Facebook* и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией. Деятельность организации на территории России запрещена.


Нужен антидетект браузер?

Мы вложили много сил в создание Dolphin{anty}, и с увереностью можем заявлять, что он является лидером на рынке и идеально подходит под твои задачи.

Подробнее