Как настроить пиксель 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 с помощью GTM
Как настроить события в Facebook
Для того, чтобы отследить важные действия пользователей на сайте, можно использовать события. Благодаря настройке событий вы сможете показывать рекламу тем людям, которые с наибольшей вероятностью выполнят конверсию, а также создавать аудитории пользователей, которые совершили или не совершили определенное действие на сайте.
Отправлять данные о событиях также очень удобно и просто с помощью Google Tag Manager. Разберем, как это настроить.
В качестве примера рассмотрим настройку события успешной отправки формы заказа услуги на сайте OdesSeo.
Добавим новое событие.
Наиболее подходящей категорией для нашего события является “Генерация лида”.
Подробно о стандартных категориях событий Facebook можно прочитать тут. А в этой статье хорошо описаны все параметры, которые можно передавать с событиями.
Затем в Google Tag Manager нужно создать новый тег типа “Пользовательский HTML” и вставить сгенерированный системой фрагмент кода в текстовое поле. В расширенных настройках в блоке “Настройки активации тега” устанавливаем “Один раз на событие”.
Важно! Коды отправки событий должны срабатывать после того, как сработает базовый код пикселя. Поэтому, если вам нужно отправлять ивент при загрузке страницы (например, событие “ViewContent”), то в разделе “Порядок активации тегов” отметьте чекбокс “Активировать тег перед тегом” и выберите тег базового кода.
Далее задаем условие активации тега. В моем случае триггером активации будет выступать пользовательское событие, которое срабатывает при успешном заполнении формы.
Какие бывают триггеры активации, и как их создавать я подробно рассматривала в этих статьях:
- Начало работы в Google Tag Manager;
- Отслеживание взаимодействия пользователей с формами сайта;
- Отслеживаем, что копируют на нашем сайте;
- Отслеживание видимости элементов на сайте.
Далее нам необходимо убедиться, что тег срабатывает при выполнении нужного действия. Для этого в режиме отладки переходим на сайт и совершаем тестовую отправку формы. В панели Tag Manager видим, что наш тег сработал в нужный момент.
Facebook Helper также показывает, что данные передаются правильно.
Динамику поступления информации о событиях можно посмотреть в рекламном кабинете Facebook на вкладке “События”.
Теперь на основании передаваемых событий можно создавать пользовательские аудитории и конверсии.
Как настроить пользовательские события Facebook в Google Tag Manager
Большинство задач отслеживания могут быть решены с помощью стандартных событий с параметрами. Если все же среди них вы не нашли подходящего для себя, всегда можно создать пользовательский ивент.
Для этого используется фрагмент кода вида:
|
1 |
fbq('trackCustom', 'MyCustomEvent', {custom_param: 'custom_value'}); |
где MyCustomEvent — название вашего события.
Чтобы было понятнее, как использовать собственные события, разберем пример. Давайте попробуем передать в Facebook факт скроллинга страницы вместе с кастомным параметром — значением глубины прокрутки.
Для этого создадим новый тег в GTM. Тип — “Пользовательский HTML”. В текстовом поле пишем фрагмент кода вида:
|
1 2 3 |
<script> fbq('trackCustom', 'ScrollEvent', {'Scroll Depth': {{Scroll Depth Threshold}}}); </script> |
где ScrollEvent — название нашего пользовательского события, а Scroll Depth — глубина прокрутки. Чтобы передавать значение скроллинга страницы, будем использовать встроенную переменную GTM “Scroll Depth Threshold”.
Далее добавляем триггер активации. Алгоритм создания этого триггера я описывала тут.
Проверяем работу тега, используя помощник по пикселям. Видим, что по мере скроллинга в Facebook отправляются данные о факте прокрутки и ее значение.
Теперь на основании передаваемых событий можно создать индивидуализированную аудиторию.
На этом настройка закончена. Если у вас остались вопросы, пишите их в комментариях. Удачи!
У Вас интересная информация
Спасибо!
Здравствуйте, спасибо за подробный разбор, пожалуй, самое лучшее, что я нашла на эту тему.)
Можете подсказать, что делать, если в Хелпере отражается желтый треугольник отражается, и в фб нет отражения событий.
PageView
WARNINGS
We detected event code but the pixel has not activated for this event, so no information was sent to Facebook. This could be due to an error in the code, but could also occur if the pixel fires on a dynamic event such as a button click.Learn more
EVENT INFO
Setup Method: Manual
Pixel Code: Show
Pixel Location: Show
Frame: Window
Вот так написано…
Ни у кого не видела такой ситуации описания…
Хотела скрин прицепить — не получается.. Помогите пожалуйста!!
Добрый день, Антонина. Спасибо!
Не сталкивалась с такой проблемой, наверняка не скажу. Из того, что сразу нагуглила, часто ваша ошибка возникает при включенном adblock. Попробуйте перейти на Learn more, возможно, там более детально описана проблема: https://prnt.sc/un21w4
Подскажите, пожалуйста, как настроить событие на 20 секунд? То есть на те, кто побыл на странице минимум 20 сек? спасибо огромное
Добрый день!
Посмотрите эту статью: https://odesseo.com.ua/uchimsya-rabotat-v-gtm-v2/
Тут я подробно рассказывала про события по таймеру. Пункт «Отправка событий по таймеру в GTM».
Здравствуйте!
Хочу отследить на каком этапе заполнения данных для доставки пользователь отваливается. Как настроить сбор по событию «заполнение поля» ?
Добрый день, Александра!
Посмотрите эту мою статью по отслеживанию взаимодействия с формами, думаю, в ней есть ответы на ваши вопросы. https://odesseo.com.ua/otslezhivanie-form-v-ga-gtm/
Подскажите пожалуйста, как поставить тег Search при введенном запросе в поиске по сайту через гугл тег менеджер? https://gyazo.com/d8d0f7c7a1d8cd9269107875980f1120
Добрый день!
Если я правильно поняла вопрос, вам нужно написать функцию, которая получает значение поискового запроса. Тело функции будет зависеть от того, как реализован поиск конкретно на вашем сайте. Посмотрите эту статью: https://odesseo.com.ua/otslezhivanie-form-v-ga-gtm/ Тут нет отслеживания поиска, но много примеров функций, в которых реализовано получение различных полей форм, это поможет вам разобраться и решить вашу задачу.
Подскажите пожалуйста, как настроить через GTM событие ViewContent для страниц карточек товара, с передачей параметров для динамического ремаркетинга.
Добрый день!
На странице карточки товара при загрузке страницы вместе с событием ViewContent вам нужно настроить передачу параметров для работы дин. ремаркетинга, а именно, обязательных параметров: content_type и content_ids. Также есть необязательные параметры, например, content_category, value. Они тоже могут быть вам полезны. Код отправки данных о просмотренном товаре будет выглядеть примерно так:
fbq(‘track’, ‘ViewContent’, {
content_ids: [‘1111’],
content_type: ‘product’,
});
content_ids хранит значение идентификатора просмотренного товара. Чтобы получить значение этого идентификатора, можно либо передавать его в dataLayer, либо, если он присутствует в коде страницы сайта, взять его с помощью селектора.
О том, что такое dataLayer и как с ним работать: https://odesseo.com.ua/datalayer-v-google-tag-manager-chto-eto-takoe-i-kak-rabotaet/
О том, как использовать селекторы: https://odesseo.com.ua/selektory-v-google-tag-manager/
Создала пиксель для рекламного аккаунта, на основном лендинге и странице благодарности он работает (Пиксель Хелпер тому подтверждение). На Фб. он тоже активный, даже статистику вижу. Но есть проблема. При создании рекламной компании с целью конверсия пиксель не отображается, предлагает Создать пиксель. Как сделать, чтобы подтянулся мой активный пиксель, который работает на лендинге?
Лилия, добрый день!
Для того, чтобы использовать пиксель при создании рекламной кампании, нужно создать пиксель из-под того же рекламного аккаунта. Скорее всего, вы создали пиксель в каком-то другом аккаунте.
Можно ли отследить, сколько принесла стаття в Google Adsense и увидеть автора статьи, с помощью Facebook Pixel?
Добрый день!
Не подскажу, с Google Adsense не работала.
Здравствуйте, очень подробный контент. Подскажите как настроить задержку срабатывания контейнера Google Tag Manager на 10-15 секунд? В контейнере установлен Пиксель Facebook с событием Просмотр контента. Это нужно чтобы факт просмотра страницы лендинга Пиксель видел с задержкой. Помогите, пожалуйста.
Здравствуйте, Виталий.
Для таких целей можно использовать триггер Таймер.
Спасибо. Просто спасибо. Долго искал такую вот простую и понятную инструкцию)
Добрый день!
Подскажите, пожалуйста, какой триггер настраивать для события ViewContent?
Евгений, добрый день!
Если вам нужно передать просто факт просмотра какой-либо страницы, то в качестве триггера можно использовать событие загрузки страницы.
Если речь о просмотре карточки товара и помимо факта просмотра нужно передавать различные атрибуты товара, то событие следует отправлять в момент, когда у вас есть значения всех этих атрибутов.
Здравствуйте, подскажите пожалуйста, как передавать информацию с пикселя маил через ГТМ в фейсбук для ретаргета?
Анастасия, большое вам спасибо за ваши статьи. Вы лучшая!!!!
Уже не первый раз с помощью вашего материала решаю для себя задачи и все получается.
Еще раз спасибо.
Денис, спасибо за такие добрые слова!
Очень приятно осознавать, что твоя работа полезна=)
Доброго времени суток.
Мой рекламный аккаунт заблокировали.
Я пытаюсь передать пиксель на другой аккаунт. И вроде все хорошо, я в другом аккаунте его вижу, но при создании рекламы его использовать не предлагает. Уже все перепробывал. Статистика пикселя есть, он работает, но использовать его не понимаю как.
Причем создаю рекламу в business.facebook с одним ID(там где этот пиксель) как компания, а при создании рекламы используеться другой ID.(уже как пользователь от компании)
Не знаете что делать?
Спасибо
Добрый вечер!
Как вариант, создайте пиксель для нового аккаунта и используйте его данные в рекламе.
Здравствуйте!
Спасибо за статью, пользуюсь случаем хотел у вас спросить:
Если мы ставим код пикселя на сайт то мы будем видеть информацию всю в аналитике фейс бука. А если мы настраиваем пиксель через Гугл тег менеджер то куда будет передаваться информация? в аналитику гугла или куда? или в аналитику фейсбука? Если в гугл аналитику где тогда создавать списки ремаркитинга в вейсбуке или в аналитике гугла?
Заранее благодарю за ответ.
Здравствуйте!
Независимо от способа установки (напрямую на сайт или через тег менеджер) данные будут отправляться в Facebook.
Чтобы данные отправлялись в Google Analytics, нужно установить код отслеживания этой системы.