Как настроить пиксель Фэйсбук через Google Tag Manager?
Шаг 1. Подготовка нужных данных
Для успешной настройки пикселя Facebook через GTM Вам потребуется:
- Созданный пиксель ФБ
- Настроенный аккаунт Google Tag Manager (Регистрация >>> создание контейнера)
- Установленный код GTM на Вашем сайте
Шаг 2. Установка пикселя
- Войдите в аккаунт Google Tag Manager.
- Выберите контейнер вашего сайта и нажмите Add a new tag (Добавить новый тег).
- Выберите Custom HTML tag (Пользовательский HTML) и введите название для своего тега, например, «Facebook pixel base code».
- Перейдите в Events Manager и нажмите Подробнее для своего пикселя.
- Нажмите Настроить и выберите Установить код вручную.
- Скопируйте весь базовый код пикселя, как показано ниже..
- Вернитесь в Google Tag Manager и вставьте код в HTML-контейнер.
- Нажмите раскрывающийся список Advanced Settings (Расширенные настройки) и выберите Once per page (Один раз на страницу) в разделе Tag firing options (Параметры срабатывания тега).
- В разделе Fire On (Срабатывать на) выберите All Pages (Все страницы).
- Нажмите Create Tag (Создать тег).
Шаг 3. Настройка событий пикселя на сайте
После того, как вы установили базовый код пикселя скорее всего Вам нужно добавить отслеживание определенных событий на сайте. Стандартные события пикселя включают в себя следующие действия:
- Просмотр ключевой страницы / Просмотр контента
- Поиск по сайту
- Добавление в корзину
- Добавление в список желаний
- Начало оформления покупки
- Добавление платежной информации
- Совершение покупки
- Лид
- Завершение регистрации
Настройка стандартных события лид и просмотр контента
Рассмотрим пример добавления стандартных событий пикселя Фэйсбук через GTM. Добавим событие Просмотр контента (View Content) при посещении определенных страниц сайта и событие Лид (Lead) при успешной отправке формы.
Шаг 3.1 Лид и Просмотр контента (Facebook)
- Откройте вкладку Пиксели в Events Manager.
- Нажмите Настроить пиксель.
- Нажмите Установить код вручную.
- Нажмите Продолжить.
- Нажмите Установить события.
- Нажмите переключатель рядом с событием, которое вы хотите отслеживать.
- В нашем случает это «Lead» и «View Content»
- Просто копируйте предложенный код (если на этом этапе у вас возникнут проблемы — пожалуйста оставьте комментарий).
Шаг 3.2 Добавление событий пикселя в GTM
- Создаем новый тег «Пользовательский HTML» называем, например, «FB Lead«
- Вставляем код, полученный на шаге 3.1 для события «Lead»
- Раскройте дополнительные настройки и выберете, чтобы этот тег срабатывал один раз на страницу и только после того, как сработает основной код пикселя Фэйсбук
- Выбираем триггер. В рамках моего проекта подходящий триггер это успешная отправка веб-формы. Посетитель заполняет форму на сайте, отправляет ее, при этом будет срабатывать тег «Lead». Ок, то что нужно.
- Аналогичный образом создаем тег для события «Просмотр контента» —
- Новый тег «Пользовательский HTML»
- Вставляем код из шага 3.1 для события «Content View»
- Создаем триггеры для нужных страниц
-
Добавляем триггеры для нашего тега
Шаг 4. Проверка работы настроенных тегов GTM
- Включите режим предварительного просмотра
- Перейдите на Ваш сайт. Должна появится панель GTM
- На скрине выше видно, что сработали теги «Facebook pixel base code» и «YandexMetrica». Значит все верно. Базовый код пикселя должен срабатывать на всех страницах. Теперь перейдем на страницу, которая добавлена в событие «Content View», соответствующий тег должен сработать.
- Также проверяем тег «Lead» — заполняем форму, нажимает отправить, смотрим — тег должен сработать.
Если у вас возникли сложности при использовании этой инструкции, пожалуйста, напишите мне в комментариях ниже.
Здравствуйте!
А вы можете подсказать, как запрограммировать событие «ViewContent», чтобы фейсбук видел только тех, кто был на сайте больше 10 секунд?
Добрый день!
Стандартное событие пикселя, которым является ViewContent, редактировать нет возможности. Решение для вашей задачи довольно не тривиальное. Вот что нужно сделать:GitHub Link ):
1. Создать Custom HTML tag в GTM и настроить его срабатывание на всех страницах (Trigger all pages).
Вот код для этого тега (
2. Создать две переменные в GTM visibleTime и hiddenTime:
3. Создать еще один Custom HTML Tag в GTM со следующим кодом:
Здесь название события — «Time On Page» со следующими параметрами:
Page Visible Time: Время в течение которого страница была видна во вкладке браузера.
Page Hidden Time: Время в течение которого страница не была видна во вкладке браузера.
Задать триггер для этого тега » sendTimings» пользовательское событие.
4. Отметить последовательность выполнения тегов (чтобы наши теги сработали после базового тега пикселя)
5. Проверить тег с помощью pixel helper plugin.
6. После этого вы сможете сегментировать необходимую вам аудиторию (тех кто просмтривал страницу более 10 сек.)