Подключение и начальная настройка пикселя Фейсбука с помощью GTM. Пошаговая инструкция

 

Пиксель Фейсбука – это фрагмент JavaScript-кода, который встраивается на страницы сайта и позволяет отслеживать посещения и конверсии посетителей на сайте и в последствии таргетировать на них рекламу. Он собирает данные о действиях и конверсиях пользователей, которых можно собрать в аудитории для показов рекламы в Facebook и Instagram.

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

Для начала работы необходимо убедиться, что GTM присутствует в исходном коде страниц сайта. Затем приступаем к настройке.

Создание пикселя Facebook и вставка в Google Tag Manager

Для создания пикселя необходимо перейти на страницу Facebook Events Manager: https://business.facebook.com/events_manager/

В Источниках данных в Пикселе Facebook жмём кнопку Начать и переходим к подключению действий на сайте

Вводим название создаваемого пикселя и адрес сайта, к которому этот пиксель будет прикручен, жмём кнопку Продолжить и попадаем к вариантам подключения пикселя

Выбираем Google Tag Manager, жмём кнопку Партнер для настройки и попадаем к подключению аккаунта GTM

Здесь Фейсбук нас предупреждает о том, что необходимо будет один раз ввести данные учётной записи Google, которая имеет доступ к Менеджеру тегов Google.

Жмём Продолжить

Можно также включить или отключить автоматический расширенный поиск совпадений. Жмём Продолжить

После ввода данных учётной записи Гугла, которая имеет доступ к Google Tag Manager, выбираем нужный акканут ГТМ и контейнер, в который необходимо вставить код пикселя. После этого жмём Завершить настройку

Здесь необходимо ввести URL сайта, с которого пиксель будет собирать данные. Вводим и жмём Продолжить

После завершения этих настроек жмём Test Events in Events Manager и переходим к тестированию событий в реальном времени

Снова вводим URL сайта и жмём кнопку Открыть сайт. Когда сайт откроется, появится список полученных пикселем действий на сайте

 

Это значит, что тег работает корректно.

После этого переходим в контейнер GTM и видим новый тег Facebook Pixel ID, который создал мастер

Входим в него и видим код этого пикселя:

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '5116XXXXXXX8515');
fbq('set','agent','tmgoogletagmanager', '51161XXXXXXX8515');
fbq('track', "PageView");
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=5116XXXXXXX8515&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Настройка пикселя

Убираем строчку fbq(‘track’, “PageView”);

Теперь код должен выглядеть так:

После этого создаём тег, называем его Page ViewFacebook Pixel, тип: Пользовательский HTML

В нём пропишем скрипт отслеживания просмотров страниц (ту часть, которую мы убрали):

<script>
	fbq('track', "PageView");
<script>

Затем переходим в Порядок активации тегов и ставим галочку Активировать тег после тега Page View – Facebook Pixel, а в поле Тег cleanup выбираем тег Facebook Pixel ID

Сохраняем и публикуем контейнер

Теперь можно снова перейти на страницу тестирования событий, и при просмотре страниц эти страницы будут отображаться в списке Получение действий

Установка Facebook Pixel Helper в Google Chrome

Это расширение позволит показать, какие события отправляет пиксель.

Для установки необходимо найти его в расширениях Google Chrome и установить

После этого появится значок на панели расширений, который при посещении страниц сайта покажет информацию, которую собирает пиксель

Отчёты

Собранные данные пикселем Фейсбука можно посмотреть в Facebook Analytics https://www.facebook.com/analytics/

Отчёты в Facebook Analytics

Теперь всё готово!

Поделиться ссылкой:

 

Читайте также