Тема 3. Урок 1:Пиксель Фейсбука и ремаркетинг

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

Что такое пиксель

Это фрагмент кода. С ним можно собирать информацию о действиях пользователей на сайте, измерять результативность рекламы, оптимизировать её и создавать аудитории для новых кампаний. Пиксель позволяет сопоставить посетителей твоего сайта с людьми на Фейсбуке. Он даст точный ответ на вопрос «Сколько заявок или продаж принесла реклама на Фейсбуке?»
Пиксель Фейсбука использует куки-файлы. В них включаются данные, сохраняемые браузерами или устройствами, — версия браузера, модель устройства, версия ОС. А ещё идентификаторы устройств. В настройках задаётся использование куки-файлов.

Вот пример кода пикселя:

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'[https://connect.facebook.net/en_US/fbevents.js](https://connect.facebook.net/en_US/fbevents.js)');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="[https://www.facebook.com/tr?id=368736904326351&ev=PageView&noscript=1](https://www.facebook.com/tr?id=368736904326351&ev=PageView&noscript=1)"
/></noscript>
<!-- End Facebook Pixel Code -->

Важно ☝Для каждого рекламного аккаунта Ads Manager будет уникальный код пикселя. Нельзя копировать и вставлять первый попавшийся код.

Пиксель создан Фейсбуком для лучшей оптимизации и анализа рекламных кампаний. Если рекламодатели будут понимать отдачу от рекламы на платформе, то станут вкладывать в неё больше денег.

Как это работает?

Когда кто-то заходит на твой сайт, загружается код сайта и код пикселя. Система пытается сопоставить посетителя сайта с пользователем социальной сети. Если ей это удаётся, человек «попался». Вне зависимости от устройства или платформы: и на смартфоне, и на десктопе, и на Фейсбуке, и в Инстаграме. Теперь Фейсбук знает, что этот пользователь посещал твой сайт.

Пользователь выполняет на сайте некоторые действия. Например, что-то покупает. Пиксель Фейсбука фиксирует это событие. Благодаря этому трекингу мы узнаём, что пользователь совершил нужное нам действие после просмотра рекламы на Фейсбуке. Можем ещё раз показать рекламу группе пользователей, побывавших у нас на сайте, с помощью индивидуально настроенной аудитории. О настройках таких аудиторий поговорим в следующих уроках.

Рекомендация ☝Установи на сайт пиксель Фейсбука. Неважно, собираешься ли ты запускать рекламу в ближайшее время или нет. Пиксель будет собирать аудиторию, копить её, анализировать. Это поможет в момент, когда ты всё-таки запустишь рекламу.

Установка и настройка пикселя

Это три этапа:

установка основного кода пикселя на сайт;
настройка событий отслеживания;
тестирование корректности работы.

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

Установка основного кода пикселя на сайт

Работаем с пикселем, его событиями и данными в разделе Events Manager. Переходи в своём аккаунте.

В чистом рекламном кабинете пикселей ещё нет. Нужно создать с нуля. Жмём на большие синие кнопки. Повторяй за скринкастом.

После того, как пиксель создан, нужно взять его код и установить на сайт. Ниже — скринкаст такого процесса:

Скопировали код пикселя.
Получили инструкцию, куда его нужно вставлять: «Вставьте код пикселя внизу заголовка раздела вашего сайта, прямо над меткой </head>. Установите базовый код на каждой странице сайта».
Включили автоматический расширенный поиск совпадений. Так можно незаметно собирать больше информации о посетителях сайта и соотносить её с базой своих пользователей. Делаем это на основе электронной почты, номера телефона, пола, даты рождения и других характеристик. В общем, полезная функция — её всегда нужно включать.

Пиксель установили. Теперь посмотрим, корректно ли он работает.

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

Проще всего это сделать с помощью бесплатного расширения Facebook Pixel Helper для браузера Google Chrome. Установи его сейчас, потом пригодится.

После установки вернись к себе на сайт и обнови страницу. Должно появиться вот такое окно:

Если ты видишь зелёную галку напротив события PageView, пиксель успешно зафиксировал просмотр страницы.

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

В Events Manager можешь перейти в раздел «Тестирование событий». Как только откроешь раздел, перезагрузи страницу сайта. Увидишь там все события, которые сработали при первой загрузке. В нашем случае это только PageView:

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

Настройка событий отслеживания

Теперь самое интересное. Нам нужно разметить ключевые события на сайте с помощью встроенной системы событий на Фейсбуке. Ключевые события — всё то, что важно отслеживать в поведении пользователей. Давай на примерах.

Пример 1. Ты развиваешь интернет-магазин по продаже недостающих деталек от Лего. У тебя есть список популярных моделей и каталог деталей для каждой модели. Наиболее очевидные события, которые тебе нужно отслеживать:

просмотр карточки детальки;
добавление детальки в корзину;
успешная покупка.

Ты маркетолог в музыкальной школе — дети и взрослые учатся играть на гитаре и барабанах. У тебя на сайте есть расписание занятий и форма записи в группу. В этом случае тебе важно отслеживать:

просмотр расписания или страницы урока;
отправку заявки в ту или иную группу.

Два способа настройки событий:

через встроенный инструмент разметки;
с помощью установки кода на сайт.

Мы рассмотрим оба.

Последовательность шагов:

Указываем адрес сайта в интерфейсе настройки, сразу же переходим на него. Видим панель настроек в левом верхнем углу.
Задача — разметить ключевые события на сайте. Чаще всего это конверсии: отправка заявки, заказа, обратной связи. На все формы или кнопки назначаем одинаковое событие.
Также полезно размечать вспомогательные события. Они не ведут напрямую к конверсии, но указывают на вовлечение пользователя в работу с сайтом. Например, пользователь посмотрел видео или нужный нам элемент на странице. Мы можем настроить событие «Просмотр контента». Будет срабатывать в момент просмотра нужного нам контента на сайте.

Так настраиваются ключевые события на сайте. Буквально за несколько кликов. Если всё правильно, то в панели ты увидишь все настроенные события.

Можешь проверить их работоспособность на вкладке «Тестирование событий».

Важно ☝

У этого инструмента вот такие ограничения:

Можно отслеживать только кнопки, но не успешную отправку форм.
Нельзя отслеживать глубину просмотра страниц.
Нельзя отслеживать просмотр фото или видео.
Инструмент привязан к CSS-стилям, к тексту кнопки. При изменении текста на кнопке событие перестанет срабатывать.

Настройка с помощью установки кода на сайт

Более трудоёмкий способ, но с ним мы настроим всё. Понадобится помощь разработчика сайта или знания по работе с GTM. Мы пойдём первым путём и будем учиться писать грамотное техническое задание для разработчика сайта и указывать ссылки на техническую аргументацию.

С помощью пикселя можно отслеживать два типа событий:

Стандартные события — набор самых используемых событий на большинстве сайтов. Будем настраивать их в этом курсе.
Специально настроенные события — нестандартные действия, которые тебе важно отслеживать. Это продвинутая настройка. Мы не будем говорить о ней в этом курсе.

Так вот про стандартные события. Это заранее определённые действия пользователей — часто используемые операции на сайте. Например, поиск, просмотр или покупка.

В стандартных событиях можно передавать дополнительные параметры, чтобы Фейсбук собирал больше информации о пользователе и ещё лучше оптимизировал рекламу. А вот дополнительные параметры обычно — название товара, цена, валюта, количество.

Стандартные события отслеживаются с помощью функции fbq('track'). Такой вот формат кода для пикселя Фейсбука. Его добавляет разработчик в нужное место сайта. Твоя задача — сказать разработчику, куда конкретно его нужно добавить.

Давай познакомимся с самыми популярными стандартными событиями:

Полный список стандартных событий ты найдёшь в справке Facebook.

Вот так это работает в реальной жизни.

Ты пишешь техническое задание для разработчика сайта. Описываешь логику настройки. Например:

Пиксель Фейсбука должен вызывать событие Lead при успешной отправке формы заявки с сайта. Код этого события можно найти в справке для разработчиков по ссылке. {ссылка на справку}
При успешно оформленной покупке на сайте нужно вызывать событие Purchase. В нём указывать дополнительные параметры: название товара и стоимость покупки. Код этого события можно найти в справке для разработчиков по ссылке. {ссылка на справку}

Вот пример готового ТЗ для разработчика. Это шаблон, его можно использовать в будущем для работы.