Установка пикселя facebook через google tag manager
Какие еще задачи можно решать посредством GTM
По аналогии с рассмотренными выше примерами с помощью Google Tag Manager можно отслеживать клики по разным элементам сайта, ссылкам на другие ресурсы, скроллинг страницы, просмотр и взаимодействие с видеороликом на странице, отправку форм, попадание определенных элементов в зоне видимости пользователя и другие. Большинство из возможностей отслеживания я разбирала в статьях нашего блога:
Третий материал из серии про установку пикселей соцсетей через Google Tag Manager от Mello. В нем специалист по контекстной рекламе Андрей Моисеев рассказал, как создать, опубликовать и проверить эффективность работы пикселя Facebook через GTM.
Пиксель Facebook — инструмент аналитики, с помощью которого можно изучать действия людей на сайте и оценивать эффективность рекламы. Установка пикселя на сайт дает возможность собирать аудиторию для рекламы, убедиться, что объявления показываются нужным людям, и получить доступ к дополнительным рекламным инструментам соцсети.
Традиционно установка пикселя Facebook через GTM состоит из трех этапов:
- создание пикселя в Facebook;
- публикация на сайте;
- проверка работоспособности.
Проверка работоспособности
8. Переходим на главную страницу Facebook: «Создать рекламу» — Ads Manager — «Пиксели».
Уже на этом этапе можно определить работоспособность пикселя по полученным событиям и зеленому кружочку напротив его названия. Чтобы посмотреть полную информацию по пикселю, жмем кнопку «Информация».
Проверка пикселя
9. На вкладке «Обзор» вы должны увидеть график, а внизу — показатель «Статус» — «Активен». Значит пиксель работает корректно и отправляет события на сервер.
Статус пикселя
Более подробную информацию можно прочитать в справке Facebook.
Корректность работы пикселя можно также отслеживать с помощью специального расширения для Google Chrome.
Последние комментарии
Супер! Теперь наши ITишники(после санкций с запада) голодные в очередях перепрофилируются и атакуют Озон :-) , а повезло.
Собираете бесплатный Валежник (после получения разрешения на него) и плетёте с него что-нибудь на Озон :-) , процентов 3.
Во сколько часов состоится тест?
Мое любимое это все-таки, как моей подруге рекламировали поминальные обеды после того, как она посмотрела, сколько кладб.
Первое, что приходит на ум - это впн, но и их тоже блокируют один за одним. В таком случае мне только одно решение пришл.
У вас ошибка: Производные предлоги — это такие предлоги, которые образованы, произведены из других частей речи, в данно.
Вы создали пиксель Facebook Ads и готовы перейти к установке. Если ваш сайт создан не на конструкторе, вам необходимо поставить код Google Tag Manager (GTM).
Вы создали пиксель Facebook Ads и готовы перейти к установке. Если ваш сайт создан не на конструкторе, вам необходимо поставить код Google Tag Manager (GTM). Установить пиксель удобнее всего будет именно через GTM.
Для этого после создания пикселя оставайтесь в рекламном кабинете Business Manager и следуйте нашей подробной инструкции.
1. Вы создали пиксель Facebook Ads и готовы перейти к установке. Если ваш сайт создан не на конструкторе, вам необходимо поставить код Google Tag Manager (GTM). Установить пиксель удобнее всего будет именно через GTM.
2. Выберите партнера Google Tag Manager.
3. Нажмите «Продолжить».
4. В следующем окне тоже нажмите «Продолжить».
5. Вы увидите поп-ап с выбором аккаунтов Google. Укажите тот аккаунт, на котором у вас создан GTM для вашего сайта.
6. Нажмите «Разрешить».
7. Подождите, пока выполнится вход в GTM.
8. Выберите из списка аккаунт GTM, который установлен на вашем сайте. Выберите контейнер. Нажмите «Завершить настройку».
9. Зайдите в тот аккаунт GTM, который вы создали под выбранный сайт. Код GTM на сайте у вас уже должен быть установлен. Теперь проверьте, появился ли у вас тег Фейсбука. Зайдите в «Теги» — и вы увидите, что пиксель Фейсбука уже появился.
10. Вернитесь в окно, где вы настраивали связь Фейсбука и GTM. Введите в строку ссылку на свой сайт и нажмите «Открыть сайт».
11. Если все работает, нажмите «Продолжить» и закройте окно. Если возникли какие-то сложности с установкой, вы всегда можете обратиться за помощью к специалистам «R-брокера».
Далее вы можете заняться настройкой специальных целей. Подробную инструкция вы найдете в статье «Как настроить стандартные цели для пикселя Facebook Ads».
Проверка сбора данных Facebook Pixel
Переходим в раздел пиксели, где будет указано количество действий (Page View).
Далее переходим в сам пиксель.
При детальном рассмотрении можно увидеть все события и количество посетивших сайт пользователей Facebook.
Получения кода пикселя Facebook
Для того, чтобы получить код пикселя Facebook и собрать целевую аудиторию сайта потребуется посетить рекламный кабинет (Ads Manager) и кликнуть на «Меню» (слева-сверху), после чего выбрать «Пиксели» (вкладка Events Manager).
На появившейся странице будут указаны все ранее добавленные счетчики, а для создания нового понадобиться кликнуть на «Добавить новый источник».
В выпавшем меню выбираем «Пиксель Facebook».
- Название пикселя;
- URL сайта (не обязательно).
Далее система предложит предпочтительный вариант установки, где нужно выбрать «Настроить вручную».
Теперь нужный нам код получен и потребуется сохранить его.
Отслеживание действий пользователей на сайте с помощью Google Tag Manager
Рассмотрим, как настроить отслеживание действий пользователей на сайте, например, время на странице, глубину скроллинга, клики, отправку форм и пр. с помощью Google Tag Manager.
Пример 1. Отслеживание времени, проведенного на странице
Для примера настроим событие, которое отправляется, если пользователь провел на странице не менее 30 секунд.
1. Добавляем триггер типа «Таймер».
В настройках таймера указываем «Интервал» – время, спустя которое должно активироваться событие. Время задается в миллисекундах. Также можно установить ограничение на число активаций события и сразу задать условия, при которых триггер будет включен.
2. Создаем новый тег типа «Google Analytics».
Тип отслеживания – событие. Указываем параметры события (»Категория», «Действие», «Ярлык», «Значение»).
В качестве действия для удобства последующего анализа можно указать переменную Page URL. Это позволит сразу в отчете по событиям посмотреть, на каких страницах отправлялись данные по таймеру.
В поле «Не взаимодействие» оставляем значение False, если вы хотите, чтобы отправка события влияла на показатель отказов сайта, то есть посещение сайта с данным событием не считалось отказом. В противном случае задаем значение True.
Условием активации выбираем созданный на предыдущем шаге триггер «Таймер».
Тестируем в режиме предварительного просмотра. Открыв страницу и подождав 30 секунд, вы заметите событие Timer и активацию тега отправки события в GA.
Помимо триггера активации, можно использовать также триггер исключения (или триггер блокировки), который служит для блокирования триггера при определенных условиях. Например, если я хочу, чтобы предыдущий тег срабатывал во всех случаях, кроме страницы «Контакты», я могу создать соответствующий триггер
и добавить его в качестве исключения.
Пример 2. Отправка события при клике на кнопку
Создаем новый триггер.
Так как я настраиваю отслеживание клика по кнопке, в качестве типа триггера укажу «Клик» – «Все элементы».
Далее задаем условие активации. По умолчанию установлено «все клики». Это значит, что триггер будет приводить в действие тег при любом клике на сайте. Мне же нужно отследить конкретный клик, поэтому я задам вариант «некоторые клики». В появившемся меню добавляем условие активации.
Тут нам необходимо идентифицировать элемент, по которому мы хотим отследить клик. Например, рассмотрим, как отследить клик по кнопке «Оставить заявку».
Идентифицировать эту кнопку можно с помощью одной из встроенных переменных группы «Клики»: Click ID, Click Classes, Click Text и др. В рассматриваемом примере самое простое и быстрое решение – привязаться к тексту кнопки: «ОСТАВИТЬ ЗАЯВКУ». То есть триггер будет выглядеть следующим образом:
В случае, когда необходимо настроить отслеживание клика по какому-либо элементу на веб-странице, а у этого элемента нет идентифицирующих его атрибутов (например, ID, class или URL), задачу отслеживания можно решить с помощью селекторов CSS.
Сохраняем триггер и создаем новый тег отправки данных в Google Analytics типа «Событие».
Указываем триггер активации и проверяем событие в режиме отладки. При клике на кнопку видим событие клика на панели слева и соответствующий тег, который активировался по этому событию.
Видеоинструкция по установке пикселя Facebook с помощью GTM
Установка Facebook Pixel через плагины и модули для CMS (Способ №3)
Самый простой способ, подразумевающий под собой внедрение дополнительного функционала, позволяющего без знаний кода внедрить сервис данный сервис аналитики.
Для примера устанавливаем сервис Official Facebook Pixel на сайт WordPress. В первую очередь заходит в административную панель сайта и выбираем вкладку «Плагины»->«Добавить новый», а в строке поиска вводим «facebook pixel» и устанавливаем плагин.
В настройках вводим ID выданного в первой части пикселя.
Как настроить пользовательские события Facebook в Google Tag Manager
Большинство задач отслеживания могут быть решены с помощью стандартных событий с параметрами. Если все же среди них вы не нашли подходящего для себя, всегда можно создать пользовательский ивент.
Для этого используется фрагмент кода вида:
где MyCustomEvent — название вашего события.
Чтобы было понятнее, как использовать собственные события, разберем пример. Давайте попробуем передать в Facebook факт скроллинга страницы вместе с кастомным параметром — значением глубины прокрутки.
Для этого создадим новый тег в GTM. Тип — “Пользовательский HTML”. В текстовом поле пишем фрагмент кода вида:
где ScrollEvent — название нашего пользовательского события, а Scroll Depth — глубина прокрутки. Чтобы передавать значение скроллинга страницы, будем использовать встроенную переменную GTM “Scroll Depth Threshold”.
Далее добавляем триггер активации. Алгоритм создания этого триггера я описывала тут.
Проверяем работу тега, используя помощник по пикселям. Видим, что по мере скроллинга в Facebook отправляются данные о факте прокрутки и ее значение.
Теперь на основании передаваемых событий можно создать индивидуализированную аудиторию.
На этом настройка закончена. Если у вас остались вопросы, пишите их в комментариях. Удачи!
Установка пикселя Facebook позволяет собирать аудиторию посетителей сайт и фиксировать их действия на сайте для запуска ремаркетинговых кампаний в социальной сети.
Установка пикселя Фейсбука через Google Tag Manager (Способ №2)
Если на сайте установлен менеджер тегов Google (GTM), то процесс установки будет значительно проще.
Заходим в аккаунт GTM для нужного сайта и выбираем вкладку «Теги» и нажимаем на кнопку «Создать»
Даем тегу название, например, «fb pixel» и выбираем конфигурацию тега.
Выбираем конфигурацию тега «Пользовательский HTML»
В появившемся редакторе вводим созданный код счетчика.
Теперь выбираем триггер для взаимодействия, который должен быть «All pages», что позволит подгружать счетчик на всех страницах сайта (где установлен Google Tag Manager).
После сохраняем тег.
Завершающий этап публикация новой версии, где также стоит указать, что основным отличием ее от предыдущей является появление тега fb-pixel.
Заполняем название и описание. Например, если Вы также публикуете и тег пикселя ВКонтакте, то можно описать как «fb+vk».
Все готово, счетчик установлен.
Ручная установка пикселя Facebook (Способ №1)
Ручная установка подойдет для тех, кто разбирается в структуре файлов своего сайта и обладает базовыми знаниями HTML.
Для установки потребуется внедрить код на все страницы сайта, как можно ближе к началу документа. Как правило, это элементы header (шапка сайта) или footer (подвал).
Для установки на WordPress потребуется зайти в «Внешний вид»-«Редактор» и найти файл head или footer и перед закрывающимся тегом установить счетчик.
Также это можно сделать через FTP или файловый менеджер хостинга. Путь для данных файлов выглядит как «/wp-content/themes/ваша-тема/header.php».
Для установки на Opencart необходимо зайти в файловый менеджер на хостинге или через FTP и изменить файл header.tpl, стандартный путь для файла «/catalog/view/theme/ваша-тема/template/common/header.tpl».
Создание пикселя
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-номеру
Как установить Facebook Pixel через Google Tag Manager
В Google Tag Manager есть встроенные теги, например, Google Ads, Google Optimize, и другие. Если необходимо добавить на сайт код системы, которой нет по умолчанию (например, Facebook Pixel), то можно это сделать с помощью пользовательского тега.
Как установить пиксель Фейсбук через GTM, я подробно описывала в этой статье. По аналогии с пикселем Фейсбук устанавливаются и другие теги, для которых не предусмотрены шаблоны в GTM.
О пользовательских тегах в Google Tag Manager.
Если вы часто используете какой-то пользовательский код, его можно обернуть в более понятный интерфейс и упростить себе или коллегам жизнь на будущее. Для этого в GTM существуют Custom Templates (пользовательские шаблоны). О своем опыте создания пользовательского шаблона я рассказала тут, возможно, вам он тоже пригодится.
Что такое Google Tag Manager (GTM) и для каких целей его можно использовать
В работе интернет-маркетолога есть множество задач, требующих установки на сайт дополнительных фрагментов отслеживания. Например, если вы запускаете рекламу в Facebook/Instagram, вам понадобится установить Facebook Pixel. При работе с контекстной рекламой в Google Ads, соответственно, пригодится тег этой системы. Для анализа эффективности привлекаемого трафика нужно установить код системы веб-аналитики, а то и не одной. Также вмешательство в код сайта понадобится, если вы захотите отслеживать не только просмотры страниц, а и взаимодействие пользователя с контентом: клики по кнопкам, отправки форм, просмотры видео и др.
Google Tag Manager – это система управления тегами, которая позволяет устанавливать и обновлять фрагменты кода различных рекламных систем и систем веб-аналитики на сайте или в мобильном приложении. Прелесть этого инструмента в том, что он позволяет подключать теги и управлять ими без постоянного привлечения веб-разработчика. Единожды установив код GTM на сайт, вы можете настроить большинство отслеживаний сами в удобном интерфейсе.
Как установить Google Analytics через Google Tag Manager
На текущий момент помимо существующей и уже привычной Google Universal Analytics в использование активно входит Google Analytics 4. Стандарт Google Analytics 4 представляет собой новую версию Google Analytics, основанную на типе ресурса App+Web. Новый подход позволяет отслеживать действия пользователей на сайте и в приложении согласно единой логике сбора данных и анализировать эту информацию в едином интерфейсе. Инструкцию, как настроить Google Analytics 4 с помощью Google Tag Manager, я выделила в отдельную статью.
Так как на сегодняшний день Google Analytics 4 еще не готова в полной мере заменить Universal Analytics (не все функции доступны, инструментарий постепенно только появляется в аккаунтах), то пока не стоит отказываться от старого стандарта аналитики. Лучше собирать данные в оба ресурса параллельно. Рассмотрим, как настроить Universal Analytics, используя GTM.
Создаем новый тег. Можно сделать это на странице «Обзор»
или на вкладке «Теги».
Выбираем тип тега «Google Аналитика – Universal Analytics».
Тип отслеживания – «Просмотр страницы».
Для того, чтобы указать, в какой ресурс Google Analytics нам нужно отправлять данные, создаем новую переменную «Настройки Google Analytics»
В поле «Идентификатор отслеживания» указываем ID ресурса аналитики.
Как найти ID ресурса Google Analytics:
Задаем триггер, по которому будут отправляться данные.
Триггер – это условие активации тега. В качестве триггера может выступать просмотр страницы сайта, какое-либо действие пользователя на сайте, например, клик по кнопке, отправка формы, нахождение на странице определенного времени и пр. Поскольку данные о просмотрах в Google Analytics отправляются со всех страниц, в качестве триггера выбираем «All Pages».
После сохранения тега для того, чтобы новая версия Google Tag Manager появилась на сайте, нужно ее опубликовать.
Очень удобно и полезно тестировать изменения перед публикацией с помощью инструмента предварительного просмотра и отладки. Эта функция в GTM позволяет проверить свои настройки до публикации на сайте и удостовериться, что ваше отслеживание настроено корректно и не провоцирует ошибок. Новая версия предварительного просмотра плотно интегрирована с расширением для браузера Tag Assistant (by Google), поэтому стоит сразу установить его.
Чтобы перейти к отладке, нужно войти в режим предпросмотра в правом верхнем углу.
После этого в новой вкладке браузера у вас появится всплывающее окно, в котором нужно указать ссылку на ваш сайт и нажать на Start.
В текущей вкладке появятся элементы отладки, а в новой вкладке откроется ваш сайт в режиме предварительного просмотра. Разберем основные части отладчика.
- Container Loaded (gtm.js) срабатывает как можно раньше после загрузки страницы;
- Событие DOM Ready (gtm.dom) срабатывает, когда модель DOM готова;
- Window Loaded (gtm.load) срабатывает, когда полностью загрузится первоначальный контент страницы.
В области 2 (Tags Fired) представлены теги, которые активированы на данной странице. Соответственно, в области 3 (Tags Not Fired) – теги, которые пока не активированы. Как только тег будет активирован действием на сайте, он переместится из этого раздела во второй.
В блоке Переменные можно посмотреть перечень значений переменных, которые они принимают в момент отправки события, а в блоке Data Layer – содержимое уровня данных.
При загрузке страницы в отладчике видим, как сработал созданный нами тег Google Analytics.
Если при проверке в отладчике вы убедились, что все работает правильно, можно публиковать новую версию.
Проверяем данные в Google Analytics, отчет «Режим реального времени».
Как установить пиксель Facebook через Google Tag Manager
Google Tag Manager (Диспетчер тегов Google) — это инструмент для управления тегами на вашем сайте. С его помощью можно быстро создавать и обновлять разные теги (Google Analytics, Яндекс Метрика, Facebook Pixel и пр.) в удобном и понятном интерфейсе, без необходимости вмешательства в код сайта. Если до сих пор на вашем сайте еще не установлен этот чудо-инструмент, срочно исправляйте это досадное недоразумение. Зарегистрировать аккаунт Google Tag Manager можно по ссылке. А прочесть информацию о настройке и преимуществах использования диспетчера тегов тут.
Чтобы установить базовый пиксель Facebook, который будет передавать данные о посещениях всех страниц сайта, нужно выполнить следующие действия:
В рекламном кабинете в основном меню переходим в раздел «Пиксели».
Создаём новый пиксель.
Если вы выбрали способ “Использовать интеграцию или Tag Manager”, потребуется авторизация в аккаунте, на который открыт доступ к GTM.
Связываем аккаунт Google Tag Manager и Facebook. После настройки связи в интерфейсе GTM появится тег вида:
Как мы видим на скриншоте, тип этого тега — “Пользовательский HTML”, условием активации выступает триггер “Все страницы”.
При выборе второго способа установки (“Установить код вручную”) Facebook предложит самостоятельно скопировать код отслеживания:
В аккаунте GTM нужно создать тег типа «Пользовательский HTML» и вставить полученный код в текстовое поле.
В расширенных настройках в блоке “Настройки активации тега” устанавливаем “Один раз на страницу”. Триггер активации — “Все страницы”.
Что такое пиксель Facebook и чем он может быть полезен
Пиксель Facebook (Facebook Pixel) — это код отслеживания (фрагмент кода JavaScript), с помощью которого можно измерять эффективность рекламы в Facebook/Instagram.
Настройка пикселя Facebook позволит:
- собирать информацию с сайта и анализировать его посещения;
- создавать аудитории ремаркетинга для рекламы в Facebook/Instagram;
- отслеживать достижение пользователями целевых действий;
- оптимизировать группы объявлений и управлять назначением ставок на основании конверсий.
В этой статье мы рассмотрим, как установить Facebook Pixel на сайт посредством Google Tag Manager. А также разберемся с настройкой отслеживания стандартных и пользовательских событий в Facebook через GTM.
Как убедиться, что пиксель установлен правильно
Для того, чтобы код начал собирать данные, его останется только опубликовать. Перед публикацией на сайт любых изменений, созданных в интерфейсе 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”), то в разделе “Порядок активации тегов” отметьте чекбокс “Активировать тег перед тегом” и выберите тег базового кода.
Далее задаем условие активации тега. В моем случае триггером активации будет выступать пользовательское событие, которое срабатывает при успешном заполнении формы.
Какие бывают триггеры активации, и как их создавать я подробно рассматривала в этих статьях:
Далее нам необходимо убедиться, что тег срабатывает при выполнении нужного действия. Для этого в режиме отладки переходим на сайт и совершаем тестовую отправку формы. В панели Tag Manager видим, что наш тег сработал в нужный момент.
Facebook Helper также показывает, что данные передаются правильно.
Динамику поступления информации о событиях можно посмотреть в рекламном кабинете Facebook на вкладке “События”.
Теперь на основании передаваемых событий можно создавать пользовательские аудитории и конверсии.
Читайте также:
- Устройство при помощи которого можно переслать фотографии на компьютер
- Можно ли ставить компьютер рядом с микроволновкой
- Ошибка при импорте файлов не удалось подключиться к серверу код 80072f7d 84
- Acgenral dll что это
- Что произойдет с измененным документом если во время работы компьютера отключается питание