Как установить пиксель Facebook, если сайт создан на Tilda и WordPress
В этом материале специалист по интернет-рекламе Ильхом Чакканбаев подробно рассказывает, как создать пиксель Facebook, что делать, если пиксель создан, но нужно еще, и какие возможности для установки пикселя предусмотрены в Tilda и WordPress.
WordPress и Tilda — это популярные платформы, на которых можно создавать посадочные страницы и сайты, даже если у вас мало опыта. В отличие от многих CMS, у этих систем уже есть готовые решения, которые помогут без дополнительных знаний подготовить сайт к запуску рекламы. В этой статье мы расскажем, как создать пиксель Facebook и установить его на сайтах, работающих на Tilda и WordPress.
Целый месяц рекламы в Facebook Ads без комиссии
Первый раз запускаете рекламу в Facebook и Instagram через eLama? Не возьмем с вас комиссию!
Что такое пиксель Facebook и для чего он нужен
Пиксель Facebook — это фрагмент кода, который устанавливается на вашем сайте и используется системой для отслеживания действий пользователя.
Благодаря пикселю можно:
Чтобы пиксель работал корректно и передавал системе необходимые данные, нужно настроить отслеживание событий (как стандартных, так и специально настроенных). Подробнее о том, как это сделать, эксперты eLama рассказывали на вебинаре.
Добавить пиксель на сайт можно разными способами в зависимости от разных факторов. Часто для таких настроек требуется помощь веб-мастера.
В Tilda и WordPress предусмотрены упрощенные варианты установки пикселя, о которых мы подробно расскажем. Но для начала необходимо создать сам код пикселя.
Как получить код пикселя
Facebook Ads позволяет добавить уже существующий пиксель или создать новый. Расскажем пошагово, как это сделать.
Создать новый код
Откройте Events Manager или выберите в своем аккаунте в Ads Manager соответствующую вкладку.
Затем добавьте новый источник данных — пиксель Facebook.
Дайте ему понятное название.
Facebook Ads предлагает несколько вариантов установки кода на сайт. Выберите добавление кода вручную. Остальные способы предполагают работу со стандартными CMS и, например, не подойдут для Tilda. А отправка инструкций разработчику лишь пришлет код с инструкцией на указанную почту.
Скопируйте появившийся на экране код. Сохраните ID пикселя. Найти его можно в указанных на изображении ниже местах.
Если счетчик уже создан
Расскажем, где найти код пикселя, если счетчик уже создан. Для начала выберите во вкладке Event Manager нужный вам счетчик.
В выпадающем списке настроек выберите «Установить пиксель».
Как и в предыдущем способе, укажите, что добавляете код пикселя на сайт вручную. Затем скопируйте код и сохраните ID счетчика.
Если пиксель уже создан, но нужно еще
Для одного рекламного аккаунта можно создать только один пиксель. Но что делать, если пиксель один, а сайтов больше? Такое может произойти в тех случаях, когда:
Во всех перечисленных ситуациях придерживайтесь следующих правил:
1. Если оба сайта работают в одном типе бизнеса, то лучше создать один счетчик, который будет собирать общую статистику, и отдельные счетчики для каждого поддомена/сайта.
2. Для каждого нового пикселя необходимо создавать новый рекламный аккаунт. А чтобы управлять ими, потребуется бизнес-менеджер Facebook. Подробнее о том, как его настроить, читайте в справке eLama.
После подготовительных работ можно приступать к добавлению пикселя на сайт.
Как установить пиксель на сайт, созданный на Tilda
Стандартный способ — через настройки
В интерфейсе Tilda откройте редактирование сайта и перейдите к настройкам.
Добавьте ID пикселя в соответствующей ячейке во вкладке «Аналитика».
Чтобы изменения вступили в силу, снова опубликуйте все страницы.
Готово — пиксель установлен на ваш сайт.
Второй способ — установка вручную
В этом случае вам пригодится код пикселя, о котором мы писали выше.
Выберите вкладку «Еще» в настройках сайта и нажмите на «Редактировать код» в разделе «HTML-код для вставки внутрь HEAD».
В появившемся окне вставьте скопированный код. Напомним, что он должен быть скопирован целиком.
Сохраните код и не забудьте переопубликовать все страницы, чтобы изменения применились.
Важно: установить пиксель для сайтов на Tilda можно лишь на платных тарифах.
Как установить пиксель на сайт, который создан на WordPress
Через код сайта
Чтобы установить Facebook Pixel через админку WordPress, перейдите во вкладку «Внешний вид» и в выпадающем списке выберите «Редактор тем».
Обновите файл и завершите установку пикселя.
С помощью плагина
Установите официальный плагин пикселя. Он разработан для сайтов, использующих WooCommerce — плагин для электронной коммерции с открытым исходным кодом. С его помощью можно создать и настроить интернет-магазин без глубоких знаний веб-разработки. Расскажем, как его установить.
Выберите в админке сайта вкладку «Плагины» и добавьте новый, в появившейся поисковой строке найдите необходимый плагин. Установите его, а затем активируйте.
Перейдите к настройкам. Запустите плагин во вкладке «Интеграция».
В появившемся окне войдите в свой профиль в Facebook и выберите страницу вашей компании.
Укажите нужный пиксель.
Если у вас уже создан каталог товаров, импортируйте его и завершите настройку.
Теперь пиксель на вашем сайте установлен, а вы можете переходить к запуску рекламы.
Как проверить работу пикселя
После того как пиксель добавлен, необходимо удостовериться, что он корректно передает данные системе. Это можно проверить с помощью расширения Facebook Pixel Helper — это быстро и удобно.
Если настройки корректны, то значок расширения в панели инструментов станет активным, а сама программа поделится информацией об установленных пикселях и событиях.
Если в настройках кода есть ошибка, система покажет вам соответствующее сообщение.
Вместо заключения
Пиксель не сможет передавать системе те данные, которые нужны для оптимизации кампаний, если не настроены события — действия пользователя, которые вы хотите отслеживать.
Tilda автоматически передает следующие события:
Если вы хотите отслеживать другие действия пользователей, дополнительно настройте отправку их событий. Подробнее о стандартных событиях читайте в справке Facebook.
Процесс создания событий для сайтов на WordPress не отличается от их настройки в других CMS. Подробнее об особенностях работы с событиями мы рассказали на вебинаре «Facebook Pixel: настройка и возможности».
Где в Facebook Ads код существующего пикселя найти?
Проверьте правильность базового кода пикселя. Если вы устанавливали пиксель в виде кода на своем сайте, убедитесь, что код между тегами в точности совпадает с базовым кодом пикселя. Если вы устанавливали пиксель с помощью диспетчера тегов, вы не увидите код на самой веб-странице, поэтому устранять проблему нужно будет в диспетчере тегов.
Убедитесь, что код события добавлен в правильное место. Вот пример кода сайта с установленным событием добавления товаров в корзину:
Первоначальный код сайта.
Базовый код пикселя.
Код стандартного события.
Убедитесь, что стандартные события в коде записаны без ошибок. В коде событий учитывается регистр, поэтому если вы по ошибке добавите на одну из страниц сайта неправильный код стандартного события (например, fbq(‘track’, ‘viewcontent’); вместо fbq(‘track’, ‘ViewContent’);), то в таблице специально настроенных событий появится событие с названием viewcontent.
После установки пикселя
Используйте инструмент тестирования событий, чтобы проверить настройку стандартных и специальных событий. Если вы обнаружите необычную активность, вы сможете выполнить отладку событий с помощью этого инструмента.
Изучите вкладку «Диагностика» в Events Manager на предмет проблем с настройкой событий. На этой вкладке вы также найдете рекомендации по их устранению.
Если у вас нет доступа к рекламному аккаунту с пикселем, который вы хотите протестировать, скачайте Помощник по пикселям Facebook. Появится всплывающее окно с информацией о том, какие пиксели и события были найдены на странице и успешно ли они загрузились. Если событие просмотра страницы, которое включается в базовый код пикселя автоматически, загружается на каждой веб-странице и все стандартные события загружаются успешно (только на тех страницах, на которые вы их добавили), то можно приступать к использованию пикселя.
Перейдите на веб-страницу, на которой установлен весь базовый код пикселя, в том числе событие просмотра страницы, которое включается в него автоматически. Если пиксель работает корректно, событие просмотра страницы будет отправлено Facebook и появится на странице пикселя Facebook в Events Manager. Статус пикселя изменится на Активно.
Если пиксель установлен правильно, можно начать использовать его для рекламы.
Примечание. Один пиксель можно использовать для всего сайта, в том числе на нескольких страницах. Однако иногда для одного сайта нужны два пикселя. Например, если ваша компания сотрудничает с двумя рекламными агентствами, каждому из них может понадобиться установить на ваш сайт отдельный пиксель. Подробнее об автоматической регистрации событий можно узнать на сайте Facebook for Developers.
Pixel Facebook: как «догнать» пользователей сайта в соцсетях
Таргетированная реклама дешевле контекстной рекламы, а для некоторых бизнесов даже эффективнее.
По данным отчёта Global Digital 2021, 42% россиян предпочитают покупать в соцсетях.
Ещё один аргумент для рекламы в социальных сетях – ремаркетинг (или ретаргетинг). По сути, это стратегия по возврату посетителей сайта к покупке через рекламные каналы. Один из таких каналов – Facebook и Instagram.
Ремаркетинг и ретаргетинг – в чём разница
Главная разница в том, что ремаркетинг – это стратегия по удержанию интереса к бренду у тех, кто уже им интересовался, а ретаргетинг – это часть стратегии, которая означает показ рекламы на эту аудиторию.
В некоторых случаях термины смешиваются, и ремаркетинг начинает означать то же, что и ретаргетинг. Например, в Google реклама на посетителей сайта, которые уже его посещали, называется ремаркетингом. Этот термин применяют и в Facebook. В Яндекс.Директ то же самое называется ретаргетингом.
Чтобы запускать ремаркетинг в Facebook и Instagram, сммщики и таргетологи используют специальный счётчик – Pixel Facebook. Пиксель помогает создавать новые лояльные аудитории для таргета на основе тех людей, которые уже были на сайте.
Давайте на примере. Представим, что Кирилл – свадебный видеограф. У него есть сайт-визитка на конструкторе Tilda. Зачем ему пиксель, как его настроить и что с ним делать потом?
Зачем нужен пиксель Facebook
Кирилл работает свадебным видеографом и запускает таргетированную рекламу, чтобы продавать свои услуги.
Кирилл сам продвигает сайт. Через Анализ конкурентов в Топвизоре он нашёл своих конкурентов и знает, что все они активно рекламируются в соцсетях. Значит, в этом есть смысл и для него.
Кирилл далёк от маркетинга и SMM и не знает, как устанавливать счётчики и собирать аудитории. Всё, что он хочет – чтобы реклама приносила заявки и окупалась. Знакомых программистов и таргетологов у него нет, поэтому будет во всём разбираться сам.
Сейчас он использует соцсети как обычно: выкладывает в Instagram пост или сториз, настраивает их прямо в приложении и запускает рекламу на аудиторию по возрасту и интересам. Это не приносит большого результата.
Вначале реклама долго обучается, а после крутится на «холодную» аудиторию, которая плохо конвертируется в заявки. Получается, Кирилл тратит много денег и получает мало заявок.
Что может улучшить ситуацию
Чтобы реклама в Instagram стала выгодной, Facebook придумал специальный инструмент – Pixel. Он отслеживает, какие кнопки пользователи нажимают на сайте и по каким ссылкам кликают, а после собирает эти данные в аналитику. Например, код считывает, сколько людей посмотрело портфолио Кирилла, а сколько – отзывы. Зачем это?
Благодаря пикселю Кирилл может настраивать рекламу в соцсетях на тех, кто уже был на сайте, посмотрел отзывы, но, например, не оставил заявку на видеосъемку. Это называется ретаргетингом. Ретаргетинговые объявления обучаются быстрее и стоят дешевле, потому что аудитория заранее известна.
Такая аудитория более «тёплая» и с большей вероятностью оставит заявку на сайте.
Как создать и настроить пиксель в Facebook
Чтобы начать использовать пиксель, Кириллу надо выполнить три шага:
Что такое «события» в Pixel Facebook?
События – это действия пользователя, которые будет отслеживать пиксель. Они привязываются к кнопкам и ссылкам на сайте. Кириллу надо будет «связать» кнопки на сайте с пикселем.
Шаг 1 – создание
Пиксель создаётся в Business Manager Facebook, в разделе Events Manager: Подключить источник данных → Интернет → Пиксель Facebook:
Раздел Events Manager в Business
Нажимаем на кнопку «Подключить источники данных» и выбираем «Интернет».
Окно выбора нового источника данных 
Выбор подключения нового источника данных
Способ подключения указываем «Пиксель Facebook».
Выбор способа подключения аналитики к сайту
Далее Кирилл придумывает пикселю название и указывает ссылку на свой сайт:
Ввод названия пикселя и ссылки на сайт
В следующем окне надо выбрать способ установки пикселя на сайт. Вот какие варианты есть:
Так как у Кирилла нет знакомых программистов, а Tilda, на которой создан его сайт, не является партнёром Facebook, устанавливать код ему придется через админ-панель Tilda.
Шаг 2 – установка
В Tilda установить пиксель можно через ID или через код. Установка через ID проще, но работает не у всех платформ. Поэтому рассмотрим оба варианта.
Через ID
Скопировать ID можно со страницы Events Manager в списке «Источники данных»:
Где найти ID пикселя в Events Manager в Facebook
ID пикселя вписывается в специальное поле в Настройках сайта на Tilda → Аналитика. В поле Pixel Facebook вставить ID пикселя – только цифры:
Как встроить пиксель в настройках сайта на Tilda
Через код
Чтобы вставить код на Tilda, нужно выбрать вариант установки «Добавить код пикселя вручную» и скопировать код.
В этом окне нужно скопировать код Pixel Facebook
Далее заходим на Tilda в Настройки сайта → Ещё. Ищем пункт «HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD», нажимаем «редактировать код», вставляем скопированный код и сохраняем изменения.
Так выглядит вставленный код пикселя на сайт
Что, если сайт сделан на платформе-партнёре Facebook
Тогда на этапе установке Кирилл бы выбрал пункт «Использовать партнёрскую интеграцию» и действовал по инструкции. Например, если сайт собран на Bitrix или Shopify, понадобилось бы указать ID пикселя в настройках сайтах в специальной графе, как в Tilda.
Представим, что сайт создан на Wix. ID указывается в Настройках: Мои сайты → Клик на сайт → Управлять и редактировать → Маркетинг → Интеграции → Facebook Pixel → Подключить.
Добавить Facebook Pixel ID
Через программиста
Если бы у Кирилла был программист, то он отправил бы ему код вместе с инструкцией по установке на почту.
Для этого нажимаем на ссылку внизу окна «Отправить инструкции по электронной почте», а в следующем окне указываем почту программиста:
Как отправить инструкцию по установке пикселя программисту
Теперь, чтобы всё работало, нужно настроить события – действия, совершаемые пользователями на сайте, которые будут записываться в счётчик.
Шаг 3 – настройка стандартных событий
Стандартные события отслеживают посещение страниц, нажатие на кнопки, добавления товара в корзину, указание платёжной информации или заполнение форм. А ещё быстро и легко настраиваются.
Для настройки открываем Events Manager, а затем «Добавить события». В выпадающем меню выбираем «Из пикселя»:
Как добавить события в пиксель Facebook
Следующий шаг – открыть инструмент настройки событий и указать ссылку на сайт:
В новой вкладке браузера откроется сайт, а в левом углу окно настройки событий.
Окно настройки событий пикселя на сайте
Настройка начинается с клика по «Отслеживать новую кнопку». После клика, на странице выделяются рамками все кнопки, которые доступны для событий. События можно «повесить» на любые активные элементы – кнопки или ссылки.
Вот так выделяются все активные кнопки на сайте:
Допустим, Кирилл хочет отслеживать всех людей, которые нажимают на кнопку «Заказать звонок». Для этого он навешивает на неё событие «Отправка заявки».
После добавления события на кнопку, оно появляется в окне справа:
Таким образом Кирилл проходится по всем кнопкам и ссылкам, клик на которые важно отследить, и добавляет на них события.
После этого все события попадают в Events Manager в Facebook:
Как проверить событие
Во вкладке «Обзор» видно, что событие «Отправить заявку» добавилось. Пока что оно равно нулю, но когда клиент кликнет на кнопку «Заказать звонок», то количество изменится.
Как проверить, что код работает
Прежде, чем использовать возможности пикселя, хорошо бы проверить, что все установилось и работает, как надо.
Для этого в Events Manager есть специальная вкладка «Тестирование событий». Там указываем ссылку на сайт и открываем его:
Вкладка для тестирования событий
Дальше всё просто: прокликиваем кнопки, на которые до этого навесили события. В разделе «Тестирование событий» видим, смог ли Facebook зафиксировать эти клики или нет:
Так как статус событий стал зелёным, значит всё получилось и события навешаны правильно.
Как использовать данные, собранные Pixel
Главное, для чего Кирилл устанавливал пиксель, – это для создания «тёплых» аудиторий, чтобы настроить на них рекламу и получить целевые заявки. Но пикселю нужно время, чтобы собрать достаточно данных.
Сколько конкретно времени нужно, зависит от посещаемости сайта. Нужно набрать около 1000 посещений. При меньшем количестве посещений аудитория получится небольшой и Facebook не запустит по ней рекламу.
Когда собрано достаточно данных, возвращаемся в Business Manager и переходим в раздел «Аудитории»:
Раздел «Аудитории» в Business Manager
Здесь мы создадим одну из двух типов аудиторий: «тёплую» пользовательскую из тех людей, которые уже были на сайте, и похожую на этих людей – look-a-like.
Создание пользовательской аудитории
Кликаем по кнопке «Создать аудиторию» и выбора в меню «Пользовательская аудитория».
«Пользовательская аудитория» в Facebook
В следующем окне выбираем «Сайт» и переходим к точечным настройкам:
Критерии
Есть два варианта: «Любые» или «Всем».
Если указать «Любые», то аудитория будет состоять из посетителей сайта, которые соответствуют хотя бы одной настройке. Например, если Кирилл захочет выбрать людей, которые нажимали на кнопку «Заказать звонок» и были на сайте в течение месяца, то в аудиторию попадут все, кто соответствует хотя бы одному из этих условий.
Если укажет «Всем», то попадут люди, которые соответствуют всем условиям: и клику по кнопке, и дате визита. Если одно из условий не выполнено, человек не попадёт в аудиторию.
События
В графе «События» выбираем те, по которым хотим собрать пользователей в аудиторию. Например, Lead – Лид или PageView – Просмотр страницы.
Настройка событий в Аудитории
Так же мы можем собрать людей с определённых или всех страниц. Например, указать «Все посетители сайта» и собрать всех людей, которые были на его сайте. Или «Люди, посещавшие определённые веб-страницы». Тогда Facebook предложит указать ссылки на эти страницы.
Как собрать только пользователей определённых страниц
Ещё мы можем выбрать параметр «Посетители с сортировкой по проведённому времени». В настройке надо указать процентили – 5%, 10% или 20%. Процентили указывают, сколько времени посетитель провел на сайте. 20% – это люди, которые были на сайте максимально долго.
Сортировка посетителей по времени на сайте
Также мы можем выбрать людей, которые совершали определённое событие: кликали на кнопку «Оставить заявку» или просматривали страницу с отзывами.
Частота
«Частота» позволяет выбрать людей, которые нажали на кнопку, например, «Отзывы наших клиентов», определённое количество раз. Дополнительные надстройки могут быть такими:
Настройка частоты
Сужение и расширение аудитории
Настройки «Включить ещё людей» и «Исключить людей» позволяют Кириллу сужать или расширять аудиторию. При нажатии на любую из них откроется окно, в котором нужно проделать те же действия: выбрать пиксель, указать события, удержания и выбрать дополнительные параметры.
Сужение или расширение Аудитории
Название Аудитории
На этом шаге указываем название аудитории и описание. Это важно, чтобы потом не запутаться.
Название Аудитории
Нажимаем «Создать аудиторию». Теперь Кирилл сможет настроить на неё рекламные объявления:
Создание look-a-like аудитории
Аудитория look-a-like настраивается в этом же разделе Business Manager.
Первый шаг – выбор пикселя, на основании которого будут находиться новые похожие люди. Второй шаг – выбор события. По умолчанию предлагается «Покупка», но можно указать любое, которое настроено:
На следующем шаге необходимо указать местоположение аудитории. А после – размер аудитории. Это делается за счёт специальной шкалы с процентами. Чем выше процент, тем больше аудитория, но тем меньше она похожа на ту, что собрал пиксель.
Facebook позволяет создать одновременно до 6 похожих аудиторий:
Создание похожих аудиторий
Это значит, что похожую аудиторию можно разделить на несколько сегментов по «похожести». Например, можно создать 4 вот таких аудитории:
Пример создания похожих аудиторий
Когда похожие аудитории созданы, можно запускать на них показ объявлений. Так Facebook поймает не только людей, которые уже были на сайте, но и самых похожих на них пользователей.
Теперь кратко
Пиксель позволяет собирать данные о действиях пользователей на сайте, чтобы потом настраивать на них рекламу в Facebook и Instagram. Его можно установить без помощи программиста. В итоге получается два вида аудитории: пользовательская и похожая на тех, кто уже был на сайте, – look-a-like. Это тёплая аудитория, поэтому реклама на таких людей будет работать лучше, а стоить дешевле.