Как настроить пиксель Facebook с помощью Google Tag Manager

Что такое пиксель Facebook и чем он может быть полезен

Пиксель Facebook (Facebook Pixel) — это код отслеживания (фрагмент кода JavaScript), с помощью которого можно измерять эффективность рекламы в Facebook/Instagram.

Настройка пикселя Facebook позволит:

• собирать информацию с сайта и анализировать его посещения;
• создавать аудитории ремаркетинга для рекламы в Facebook/Instagram;
• отслеживать достижение пользователями целевых действий;
• оптимизировать группы объявлений и управлять назначением ставок на основании конверсий.

В этой статье мы рассмотрим, как установить Facebook Pixel на сайт посредством Google Tag Manager. А также разберемся с настройкой отслеживания стандартных и пользовательских событий в Facebook через GTM.

Как установить пиксель Facebook через Google Tag Manager

Google Tag Manager (Диспетчер тегов Google) — это инструмент для управления тегами на вашем сайте. С его помощью можно быстро создавать и обновлять разные теги (Google Analytics, Яндекс Метрика, Facebook Pixel и пр.) в удобном и понятном интерфейсе, без необходимости вмешательства в код сайта. Если до сих пор на вашем сайте еще не установлен этот чудо-инструмент, срочно исправляйте это досадное недоразумение. Зарегистрировать аккаунт Google Tag Manager можно по ссылке. А прочесть информацию о настройке и преимуществах использования диспетчера тегов  тут.

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

В рекламном кабинете в основном меню переходим в раздел «Пиксели».

Создаём новый пиксель.

Facebook предложит вам выбрать способ настройки кода: “Использовать интеграцию или Tag Manager”,  “Установить код вручную” или “Отправить инструкции разработчику по эл. почте”.

Если вы выбрали способ “Использовать интеграцию или Tag Manager”, потребуется авторизация в аккаунте, на который открыт доступ к GTM.

Связываем аккаунт Google Tag Manager и Facebook. После настройки связи в интерфейсе GTM появится тег вида:

Как мы видим на скриншоте, тип этого тега — “Пользовательский HTML”, условием активации выступает триггер “Все страницы”.

При выборе второго способа установки (“Установить код вручную”) Facebook предложит самостоятельно скопировать код отслеживания:

В аккаунте GTM нужно создать тег типа «Пользовательский HTML» и вставить полученный код в текстовое поле.

В расширенных настройках в блоке “Настройки активации тега” устанавливаем “Один раз на страницу”. Триггер активации — “Все страницы”.

Как убедиться, что пиксель установлен правильно

Для того, чтобы код начал собирать данные, его останется только опубликовать. Перед публикацией на сайт любых изменений, созданных в интерфейсе Google Tag Manager, обязательно тестируйте настройки в режиме отладки. Чтобы перейти в отладчик, в правом верхнем углу аккаунта Google Tag Manager кликните на “Предварительный просмотр”

и перейдите на свой сайт. Внизу вы увидите панель отладчика, которая показывает теги в GTM. Ваш пиксель должен быть в блоке “Tags Fired On This Page” сразу при загрузке страницы.

Корректность установленного кода можно проверить с помощью  расширения для Google Chrome Facebook Pixel Helper. Если при проверке с помощью Facebook Pixel Helper напротив отправляемых данных вы видите зеленую галочку, значит данные передаются корректно.

Чтобы завершить настройку в интерфейсе Facebook, отправьте тестовый трафик.  Таким образом проверяется статус кода пикселя. Статус «Активен» означает, что код установлен корректно.

Как настроить события в Facebook

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

Отправлять данные о событиях также очень удобно и просто с помощью Google Tag Manager. Разберем, как это настроить.

В качестве примера рассмотрим настройку события успешной отправки формы заказа услуги на сайте OdesSeo.

Добавим новое событие.

Наиболее подходящей категорией для нашего события является “Генерация лида”.

Подробно о стандартных категориях событий Facebook можно прочитать тут. А  в этой статье хорошо описаны все параметры, которые можно передавать с событиями.

Затем в Google Tag Manager нужно создать новый тег типа “Пользовательский HTML” и вставить сгенерированный системой фрагмент кода в текстовое поле. В расширенных настройках в блоке “Настройки активации тега” устанавливаем “Один раз на событие”.

Важно! Коды отправки событий должны срабатывать после того, как сработает базовый код пикселя. Поэтому, если вам нужно отправлять ивент при загрузке страницы (например, событие “ViewContent”), то в  разделе “Порядок активации тегов” отметьте чекбокс “Активировать тег перед тегом” и выберите тег базового кода.

Далее задаем условие активации тега. В моем случае триггером активации будет выступать пользовательское событие, которое срабатывает при успешном заполнении формы.

Какие бывают триггеры активации, и как их создавать я подробно рассматривала в этих статьях:

1. Начало работы в Google Tag Manager;
2. Отслеживание взаимодействия пользователей с формами сайта;
3. Отслеживаем, что копируют на нашем сайте;
4. Отслеживание видимости элементов на сайте.

Далее нам необходимо убедиться, что тег срабатывает при выполнении нужного действия. Для этого в режиме отладки переходим на сайт и совершаем тестовую отправку формы. В панели Tag Manager видим, что наш тег сработал в нужный момент.

Facebook Helper также показывает, что данные передаются правильно.

Динамику поступления информации о событиях можно посмотреть в рекламном кабинете Facebook на вкладке “События”.

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

Как настроить пользовательские события Facebook в Google Tag Manager

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

Для этого используется фрагмент кода вида:

fbq('trackCustom', 'MyCustomEvent', {custom_param: 'custom_value'});

где MyCustomEvent — название вашего события.

Чтобы было понятнее, как использовать собственные события, разберем пример. Давайте попробуем передать в Facebook факт скроллинга страницы вместе с кастомным параметром — значением глубины прокрутки.

Для этого создадим новый тег в GTM. Тип — “Пользовательский HTML”. В текстовом поле пишем фрагмент кода вида:

<script>
fbq('trackCustom', 'ScrollEvent', {'Scroll Depth': {{Scroll Depth Threshold}}});
</script>

где ScrollEvent — название нашего пользовательского события, а Scroll Depth — глубина прокрутки. Чтобы передавать значение скроллинга страницы, будем использовать встроенную переменную GTM “Scroll Depth Threshold”.

Далее добавляем триггер активации. Алгоритм создания этого триггера я описывала тут.

Проверяем работу тега, используя помощник по пикселям. Видим, что по мере скроллинга в Facebook отправляются данные о факте прокрутки и ее значение.

Теперь на основании передаваемых событий можно создать индивидуализированную аудиторию.

На этом настройка закончена. Если у вас остались вопросы, пишите их в комментариях. Удачи!