Содержание [показать]

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

Как настроить пиксель 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.

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

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

Связываем аккаунт Google Tag Manager и Facebook.

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

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

способ “Установить код вручную” для настройки кода пикселя Фейсбук

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

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

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

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

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

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

Проверка правильности установки пикселя фейсбук

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

в панели отладчика пиксель должен быть в блоке “Tags Fired On This Page”

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

Facebook Pixel Helper

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

завершение настройки в интерфейсе Facebook - отправка тестового трафика

Видеоинструкция по установке пикселя Facebook с помощью GTM

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

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

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

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

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

настройка событий в Facebook

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

настройка события в Facebook - “Генерация лида”

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

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

В Google Tag Manager создаем новый тег типа “Пользовательский HTML” и вставляем сгенерированный системой фрагмент кода

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

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

задаем условие активации тега

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

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

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

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

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

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

Динамику поступления информации о событиях можно посмотреть в рекламном кабинете 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”.

использование встроенной переменной GTM “Scroll Depth Threshold” для передачи скроллинга

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

добавляем триггер активации

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

Проверяем работу тега

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

создание индивидуализированной аудитории

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