Как создать и добавить код пиксель 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 в разметку интернет-ресурса. Это может сделать верстальщик или вы сами.
7. Проверьте работоспособность. Для этого скачайте приложение GTM для Гугл Хром. После установки оно откроется на компьютере.
8. Нажмите на расширение «Tag Assistant» – «Enable» и обновите страничку. Так вы увидите скрипты, которые загружаются. Если ранее установка каких-либо скриптов не выполнялась, вы увидите только GTM.
9. Убедившись в том, что GTM установлен, вернитесь в его личный кабинет и нажмите кнопки «Теги» – «Создать».
10. Впишите наименование тега и нажмите «Разновидности».
11. Выберите разновидность тега. Среди нескольких вариантов, предлагаемых GTM, остановитесь на «Пользовательском HTML».
12. Вставьте полученный ранее код пикселя.
13. В окне с расширенными настройками выберите «1 раз на страницу».
14. Поставьте значок возле классического триггера «All Pages» – «Просмотреть страницу».
15. Сохраните изменения и вернитесь в рабочую область для проверки работы пикселя Фейсбук*. Для этого нужно нажать «Предварительный просмотр».
16. Зайдя на свой портал, откройте окно с тегами. Проверьте работу кода.
17.  Найдя свой код в разделе «Summary» – «Tags Fired On This Page», вернитесь в GTM – «Отправить».
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. Кликните по строчке «Скачать» и загрузите архив с расширением для веб-ресурса.Снова нажмите «Продолжить».
6. Перейдите в консоль управления ресурса и в появившемся меню выберите раздел «Плагины» – «Добавить новый» – «Загрузить».
7. Для продолжения загрузки нажмите «Выберите файл» и укажите архив со скачанным плагином.
8. Завершите установку и активируйте плагин.
9. Разместите на сайте пробный трафик – это позволит убедиться в том, что пиксель работает правильно.
10. Нажмите «Продолжить» – на этом добавление пикселя окончено. Теперь вы можете закрыть эту страницу или продолжить отслеживать события на сайте.

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

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

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

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. Сохраните и разместите на сайте внесенные данные.

Wix

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

1. Авторизуйтесь в своем аккаунте на Wix.
2. Перейдите в панель управления (она расположена в настройках) и нажмите на «Для маркетинга».Перед вами откроется новое окно. Перейдите в раздел для проведения интеграции, выберите название пикселя и подключите его.
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. По окончанию процедуры вернитесь в панель рекламного кабинета и проверьте правильность действия кода.

Shopify

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

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 признана экстремистской организацией. Деятельность организации на территории России запрещена.