Установка пикселя facebook через google tag manager
Пиксель Facebook –инструмент, без которого невозможно обойтись, если вы хотите эффективно привлекать на свой сайт потенциальных клиентов из Facebook или Instagram. В этой статье мы разберем основные вопросы, касающиеся пикселя, и рассмотрим несколько способов его установки.
Что такое пиксель Facebook и зачем он нужен?
Пиксель Facebook представляет собой небольшой фрагмент кода JavaScript, который после установки на сайт предоставляет три основные возможности:
- Анализ поведения посетителей
Вы можете настроить в пикселе отслеживание определенных действий (событий) на сайте, чтобы лучше понимать, как ведут себя посетители, и в дальнейшем использовать эту информацию для оптимизации маркетинга. - Автоматическая оптимизация рекламных кампаний
На основании полученных пикселем данных «умный» алгоритм Facebook будет показывать вашу рекламу тем, кто с наибольшей вероятностью совершит нужное вам действие (конверсию). - Создание пользовательских аудиторий
На основе событий пикселя можно создавать специально настроенные аудитории посетителей для ретаргетинга, а также находить других пользователей Facebook, похожих на ваших клиентов.
Установить пиксель Facebook на сайт можно разными способами, выбор конкретного из них может зависеть от нескольких факторов: платформа сайта, его размер и т.п. Давайте рассмотрим несколько популярных способов, а также их плюсы и минусы.
Установка пикселя Facebook непосредственно в код страниц сайта
Для начала нам необходимо получить сам код пикселя. Для этого в верхней панели меню рекламного кабинета Facebook выбираем раздел Пиксели.
Если в вашем рекламном аккаунте еще нет пикселя, у вас откроется окно, в котором нужно нажать кнопку Создать пиксель (Facebook постоянно вносит обновления, поэтому внешний вид окна может отличаться, но суть остается неизменной).
После этого в открывшемся окошке необходимо дать пикселю название и нажать кнопку Продолжить.
На следующем шаге открывается возможность выбора способа установки. Нажимаем Добавление кода пикселя на сайт вручную.
В открывшемся окне мы увидим поле с базовым кодом пикселя Facebook. Копируем его, вставляем в файл .txt и сохраняем.
После этого мы устанавливаем сохраненный код на все страницы сайта, которые хотим отслеживать. Согласно рекомендации Facebook, код пикселя должен располагаться в разделе заголовка, перед закрывающим тегом </head> .Это обеспечивает высокую точность статистики, потому что коды, установленные в разделе заголовка, загружаются первыми.
Способ установки пикселя Facebook непосредственно в код сайта обеспечивает высокую точность статистики и является довольно распространенным, но у него есть потенциальный минус – обилие различных скриптов (счетчиков Яндекс Метрики, Google Analytics и т.д., в том числе пикселя Facebook и его событий) в коде страниц может влиять на скорость их загрузки.
Установка пикселя Facebook при помощи Google Tag Manager
Сначала мы получаем базовый код пикселя в рекламном кабинете, как это описано в предыдущем способе (копируем код пикселя и сохраняем его в .txt файле), после чего переходим в установленный на сайте контейнер Google Tag Manager (GTM) и нажимаем на кнопку Добавить новый тег.
Затем кликаем на поле Конфигурация тега и в отрывшемся окне выбираем тип тега Пользовательский HTML.
В соответствующее поле вставляем базовый код пикселя Facebook из нашего .txt файла.
После этого нам нужно установить триггер активации тега. Прокручиваем страницу ниже, кликаем на поле Триггеры и в открывшемся окне выбираем All pages (Все страницы).
Даем название нашему тегу (например, FB pixel) и нажимаем кнопку Сохранить.
Если у вас большой сайт и много различных счетчиков, то установка пикселя через GTM является предпочтительной. Данный способ обладает двумя важными преимуществами:
- не требует специальных навыков или участия программиста,
- позволяет устанавливать большое количество различных тегов (кодов) на сайт без значительного влияния на скорость загрузки страниц.
Установка пикселя Facebook при помощи партнерских интеграций
Интерфейс установки пикселя Facebook позволяет добавить его на сайт посредством интеграции с популярными платформами – WordPress, Joomla, Wix и многих других. Для этого на шаге выбора способа установки нужно нажать Добавление кода с помощью партнерских интеграций.
На следующем шаге мы видим список доступных партнеров.
Выбрав в списке подходящую платформу, можно довольно быстро добавить пиксель на сайт, следуя простым и понятным пошаговым инструкциям Facebook.
При использовании этого способа установки нужно учитывать один нюанс. На одном из шагов Facebook предлагает настроить события пикселя при помощи специального инструмента, что не всегда является подходящим вариантом. Поэтому можно пропустить этот шаг и просто установить пиксель на сайт, а к настройке событий вернуться позднее (подробно настройку событий пикселя мы рассмотрим в одной из следующих статей).
Проверка правильности установки пикселя Facebook
После того, как мы добавили пиксель на сайт тем или иным способом, необходимо удостовериться, что установка прошла корректно и он работает должным образом. Сделать это можно двумя способами: отправкой тестового трафика из интерфейса Facebook и при помощи специального инструмента Pixel Helper (рекомендую использовать их оба).
Как проверить работу пикселя с помощью отправки тестового трафика
Затем выбираем Добавление кода пикселя на сайт вручную.
После этого возвращаемся обратно на вкладку Обзор на странице пикселя. Если на ней начнут отображаться просмотры страниц (это может занять какое-то время), значит, данные поступают, и пиксель установлен правильно.
Как проверить работу пикселя с помощью Pixel Helper
На приведенной ниже картинке видно, что Pixel Helper нашел на нашем сайте один пиксель, который успешно зарегистрировал событие PageView (Просмотр страницы).
Если у вас отображается эта информация, поздравляю! Пиксель правильно установлен и работает.
Итак, мы рассмотрели несколько способов установки пикселя Facebook на сайт, а также проверку его работоспособности. На следующем этапе для эффективной работы нужно будет настроить отслеживание событий пикселя, об этом мы в самое ближайшее время подробно расскажем в отдельной статье.
Подпишись и следи за выходом новых статей в нашем монстрограмме
Остались вопросы?
Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью? Задавайте вопросы и темы статей которые Вас интересуют в комментариях.
Третий материал из серии про установку пикселей соцсетей через Google Tag Manager от Mello. В нем специалист по контекстной рекламе Андрей Моисеев рассказал, как создать, опубликовать и проверить эффективность работы пикселя Facebook через GTM.
Пиксель Facebook — инструмент аналитики, с помощью которого можно изучать действия людей на сайте и оценивать эффективность рекламы. Установка пикселя на сайт дает возможность собирать аудиторию для рекламы, убедиться, что объявления показываются нужным людям, и получить доступ к дополнительным рекламным инструментам соцсети.
Традиционно установка пикселя Facebook через GTM состоит из трех этапов:
- создание пикселя в Facebook;
- публикация на сайте;
- проверка работоспособности.
Создание пикселя
1. На странице профиля переходим на главную, в левой части страницы находим «Создать» и выбираем «Рекламу».
Переход к созданию рекламы
2. Далее в верхнем левом углу жмем на меню Ads Manager — «Изменения и отчетность». Выбираем «Пиксели».
Выбор раздела «Пиксели»
3. После перехода на выбранную страницу, жмем «Создать пиксель» и в открывшемся окне заполняем поля «Название пикселя» и «URL сайта» (необязательно). Жмем кнопку «Создать» внизу справа.
Создание пикселя
4. Код пикселя создан. Дальше Facebook предлагает возможные варианты установки пикселя. Выбираем «Установить пиксель с использованием аккаунта Google Tag Manager».
Выбор установки пикселя
Публикация на сайте
5. Откроется новое поле для связи аккаунта Google Tag Manager с Facebook — в нем логинимся или выбираем уже залогиненный аккаунт с GTM. Не забываем проверить аккаунт и контейнер нужного нам сайта и жмем «Завершить настройку».
Завершение настройки
6. Проверяем созданный тег. Переходим в аккаунт GTM — «Теги». В списке находим тег под названием «Facebook Pixel ID . » — это и есть наш созданный тег. Номер после ID копируем.
Завершение настройки
7. Проверяем JS-код в коде сайта по скопированному ID. Данный ID-номер является уникальным в коде сайта, поэтому по нему легче всего найти код пикселя. Пример найденного JS-кода по ID-номеру показан на скриншоте:
Пример поиска по ID-номеру
Проверка работоспособности
8. Переходим на главную страницу Facebook: «Создать рекламу» — Ads Manager — «Пиксели».
Уже на этом этапе можно определить работоспособность пикселя по полученным событиям и зеленому кружочку напротив его названия. Чтобы посмотреть полную информацию по пикселю, жмем кнопку «Информация».
Проверка пикселя
9. На вкладке «Обзор» вы должны увидеть график, а внизу — показатель «Статус» — «Активен». Значит пиксель работает корректно и отправляет события на сервер.
Статус пикселя
Более подробную информацию можно прочитать в справке Facebook.
Корректность работы пикселя можно также отслеживать с помощью специального расширения для Google Chrome.
Что такое пиксель 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, который будет передавать данные о посещениях всех страниц сайта, нужно выполнить следующие действия:
В рекламном кабинете в основном меню переходим в раздел «Пиксели».
Создаём новый пиксель.
Если вы выбрали способ “Использовать интеграцию или Tag Manager”, потребуется авторизация в аккаунте, на который открыт доступ к GTM.
Связываем аккаунт Google Tag Manager и Facebook. После настройки связи в интерфейсе GTM появится тег вида:
При выборе второго способа установки (“Установить код вручную”) 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”), то в разделе “Порядок активации тегов” отметьте чекбокс “Активировать тег перед тегом” и выберите тег базового кода.
Далее задаем условие активации тега. В моем случае триггером активации будет выступать пользовательское событие, которое срабатывает при успешном заполнении формы.
Какие бывают триггеры активации, и как их создавать я подробно рассматривала в этих статьях:
Далее нам необходимо убедиться, что тег срабатывает при выполнении нужного действия. Для этого в режиме отладки переходим на сайт и совершаем тестовую отправку формы. В панели Tag Manager видим, что наш тег сработал в нужный момент.
Facebook Helper также показывает, что данные передаются правильно.
Динамику поступления информации о событиях можно посмотреть в рекламном кабинете Facebook на вкладке “События”.
Теперь на основании передаваемых событий можно создавать пользовательские аудитории и конверсии.
Как настроить пользовательские события Facebook в Google Tag Manager
Большинство задач отслеживания могут быть решены с помощью стандартных событий с параметрами. Если все же среди них вы не нашли подходящего для себя, всегда можно создать пользовательский ивент.
Для этого используется фрагмент кода вида:
Далее добавляем триггер активации. Алгоритм создания этого триггера я описывала тут.
Проверяем работу тега, используя помощник по пикселям. Видим, что по мере скроллинга в Facebook отправляются данные о факте прокрутки и ее значение.
Теперь на основании передаваемых событий можно создать индивидуализированную аудиторию.
На этом настройка закончена. Если у вас остались вопросы, пишите их в комментариях. Удачи!
Установка пикселя Facebook позволяет собирать аудиторию посетителей сайт и фиксировать их действия на сайте для запуска ремаркетинговых кампаний в социальной сети.
Получения кода пикселя Facebook
Для того, чтобы получить код пикселя Facebook потребуется посетить рекламный кабинет (Ads Manager) и кликнуть на «Меню» (слева-сверху), после чего выбрать «Пиксели» (вкладка Events Manager).
На появившейся странице будут указаны все ранее добавленные счетчики, а для создания нового понадобиться кликнуть на «Добавить новый источник».
В выпавшем меню выбираем «Пиксель Facebook».
- Название пикселя;
- URL сайта (не обязательно).
Далее система предложит предпочтительный вариант установки, где нужно выбрать «Настроить вручную».
Теперь нужный нам код получен и потребуется сохранить его.
Ручная установка пикселя Facebook (Способ №1)
Ручная установка подойдет для тех, кто разбирается в структуре файлов своего сайта и обладает базовыми знаниями HTML.
Для установки потребуется внедрить код на все страницы сайта, как можно ближе к началу документа. Как правило, это элементы header (шапка сайта) или footer (подвал).
Для установки на WordPress потребуется зайти в «Внешний вид»-«Редактор» и найти файл head или footer и перед закрывающимся тегом </head> установить счетчик.
Также это можно сделать через FTP или файловый менеджер хостинга. Путь для данных файлов выглядит как «/wp-content/themes/ваша-тема/header.php».
Для установки на Opencart необходимо зайти в файловый менеджер на хостинге или через FTP и изменить файл header.tpl, стандартный путь для файла «/catalog/view/theme/ваша-тема/template/common/header.tpl».
Установка пикселя Фейсбука через Google Tag Manager (Способ №2)
Если на сайте установлен менеджер тегов Google (GTM) , то процесс установки будет значительно проще.
Заходим в аккаунт GTM для нужного сайта и выбираем вкладку «Теги» и нажимаем на кнопку «Создать»
Даем тегу название, например, «fb pixel» и выбираем конфигурацию тега.
Выбираем конфигурацию тега «Пользовательский HTML»
В появившемся редакторе вводим созданный код счетчика.
Теперь выбираем триггер для взаимодействия, который должен быть «All pages», что позволит подгружать счетчик на всех страницах сайта (где установлен Google Tag Manager).
После сохраняем тег.
Завершающий этап публикация новой версии, где также стоит указать, что основным отличием ее от предыдущей является появление тега fb-pixel.
Заполняем название и описание. Например, если Вы также публикуете и тег пикселя ВКонтакте, то можно описать как «fb+vk».
Все готово, счетчик установлен.
Установка Facebook Pixel через плагины и модули для CMS (Способ №3)
Самый простой способ, подразумевающий под собой внедрение дополнительного функционала, позволяющего без знаний кода внедрить сервис данный сервис аналитики.
Для примера устанавливаем сервис Official Facebook Pixel на сайт WordPress. В первую очередь заходит в административную панель сайта и выбираем вкладку «Плагины»->«Добавить новый», а в строке поиска вводим «facebook pixel» и устанавливаем плагин.
Установка пикселя Facebook позволяет собирать аудиторию посетителей сайт и фиксировать их действия на сайте для запуска ремаркетинговых кампаний в социальной сети.
Получения кода пикселя Facebook
Для того, чтобы получить код пикселя Facebook и собрать целевую аудиторию сайта потребуется посетить рекламный кабинет (Ads Manager) и кликнуть на «Меню» (слева-сверху), после чего выбрать «Пиксели» (вкладка Events Manager).
На появившейся странице будут указаны все ранее добавленные счетчики, а для создания нового понадобиться кликнуть на «Добавить новый источник».
В выпавшем меню выбираем «Пиксель Facebook».
- Название пикселя;
- URL сайта (не обязательно).
Далее система предложит предпочтительный вариант установки, где нужно выбрать «Настроить вручную».
Теперь нужный нам код получен и потребуется сохранить его.
Ручная установка пикселя Facebook (Способ №1)
Ручная установка подойдет для тех, кто разбирается в структуре файлов своего сайта и обладает базовыми знаниями HTML.
Для установки потребуется внедрить код на все страницы сайта, как можно ближе к началу документа. Как правило, это элементы header (шапка сайта) или footer (подвал).
Для установки на WordPress потребуется зайти в «Внешний вид»-«Редактор» и найти файл head или footer и перед закрывающимся тегом </head> установить счетчик.
Также это можно сделать через FTP или файловый менеджер хостинга. Путь для данных файлов выглядит как «/wp-content/themes/ваша-тема/header.php».
Для установки на Opencart необходимо зайти в файловый менеджер на хостинге или через FTP и изменить файл header.tpl, стандартный путь для файла «/catalog/view/theme/ваша-тема/template/common/header.tpl».
Установка пикселя Фейсбука через Google Tag Manager (Способ №2)
Если на сайте установлен менеджер тегов Google (GTM), то процесс установки будет значительно проще.
Заходим в аккаунт GTM для нужного сайта и выбираем вкладку «Теги» и нажимаем на кнопку «Создать»
Даем тегу название, например, «fb pixel» и выбираем конфигурацию тега.
Выбираем конфигурацию тега «Пользовательский HTML»
В появившемся редакторе вводим созданный код счетчика.
Теперь выбираем триггер для взаимодействия, который должен быть «All pages», что позволит подгружать счетчик на всех страницах сайта (где установлен Google Tag Manager).
После сохраняем тег.
Завершающий этап публикация новой версии, где также стоит указать, что основным отличием ее от предыдущей является появление тега fb-pixel.
Заполняем название и описание. Например, если Вы также публикуете и тег пикселя ВКонтакте, то можно описать как «fb+vk».
Все готово, счетчик установлен.
Установка Facebook Pixel через плагины и модули для CMS (Способ №3)
Самый простой способ, подразумевающий под собой внедрение дополнительного функционала, позволяющего без знаний кода внедрить сервис данный сервис аналитики.
Для примера устанавливаем сервис Official Facebook Pixel на сайт WordPress. В первую очередь заходит в административную панель сайта и выбираем вкладку «Плагины»->«Добавить новый», а в строке поиска вводим «facebook pixel» и устанавливаем плагин.
В настройках вводим ID выданного в первой части пикселя.
Проверка сбора данных Facebook Pixel
Переходим в раздел пиксели, где будет указано количество действий (Page View).
Далее переходим в сам пиксель.
При детальном рассмотрении можно увидеть все события и количество посетивших сайт пользователей Facebook.
Читайте также: