Тема 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. В нём указывать дополнительные параметры: название товара и стоимость покупки. Код этого события можно найти в справке для разработчиков по ссылке. {ссылка на справку}
Вот пример готового ТЗ для разработчика. Это шаблон, его можно использовать в будущем для работы.