Отслеживание конверсий является критически важным аспектом любой маркетинговой кампании. Facebook Pixel позволяет отслеживать действия пользователей на вашем сайте, что позволяет оптимизировать рекламные кампании и повышать их эффективность. Google Tag Manager (GTM) упрощает процесс добавления и управления пикселем Facebook, предоставляя централизованную платформу для управления всеми вашими тегами.
Зачем использовать Google Tag Manager для пикселя Facebook?
GTM предлагает несколько преимуществ:
- Централизованное управление: Управляйте всеми тегами (включая пиксель Facebook) в одном месте.
- Упрощенное внедрение: Не нужно редактировать код сайта напрямую для добавления или изменения пикселя.
- Контроль версий: GTM позволяет отслеживать изменения и возвращаться к предыдущим версиям.
- Тестирование: Предварительный просмотр и отладка перед публикацией изменений.
- Гибкость: Расширенные возможности настройки триггеров и переменных для отслеживания различных событий.
Предварительные требования: аккаунт Facebook Business Manager и Google Tag Manager
Прежде чем начать, убедитесь, что у вас есть:
- Аккаунт Facebook Business Manager с доступом к рекламному аккаунту.
- Аккаунт Google Tag Manager и контейнер, установленный на вашем сайте. Если у вас нет контейнера, создайте его и установите код GTM на все страницы вашего сайта.
Шаг 1: Настройка пикселя Facebook в Facebook Business Manager
Создание и настройка пикселя Facebook
- Перейдите в Facebook Business Manager.
- Выберите «Менеджер событий» (Events Manager).
- Нажмите «Подключить источник данных» и выберите «Интернет».
- Выберите «Пиксель Facebook» и нажмите «Подключить».
- Дайте название вашему пикселю и укажите URL вашего сайта.
- Примите условия и нажмите «Продолжить».
Получение ID пикселя Facebook
После создания пикселя вам потребуется его ID. Он находится в разделе «Настройки» вашего пикселя в Events Manager. ID пикселя представляет собой числовой идентификатор, который вы будете использовать в Google Tag Manager.
Шаг 2: Настройка Google Tag Manager (GTM)
Создание аккаунта GTM и контейнера (если еще не создан)
Если у вас еще нет аккаунта GTM, перейдите на сайт Google Tag Manager и создайте его. Затем создайте контейнер для вашего сайта. Контейнер — это место, где будут храниться все ваши теги, триггеры и переменные.
Установка кода GTM на сайт (обязательно!)
После создания контейнера GTM вам будет предоставлен код, который необходимо установить на все страницы вашего сайта. Этот код состоит из двух частей:
- Первая часть: Вставляется в
<head>вашего сайта. - Вторая часть: Вставляется сразу после открывающего тега
<body>.
Важно: Убедитесь, что код установлен правильно, иначе GTM не будет работать.
Шаг 3: Добавление пикселя Facebook в GTM
Создание нового тега в GTM
- Войдите в свой аккаунт Google Tag Manager.
- Выберите нужный контейнер.
- Нажмите «Теги» в левой навигационной панели.
- Нажмите кнопку «Создать».
Выбор типа тега: Пользовательский HTML
При создании нового тега выберите тип тега «Пользовательский HTML». Этот тип позволяет вставлять произвольный HTML-код, включая код пикселя Facebook.
Ввод кода пикселя Facebook и добавление ID пикселя
В поле HTML вставьте следующий код, заменив YOUR_PIXEL_ID на фактический ID вашего пикселя Facebook:
<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', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"
/></noscript>
Например, если ваш ID пикселя 1234567890, код будет выглядеть так:
<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', '1234567890');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1234567890&ev=PageView&noscript=1"
/></noscript>
Настройка триггера: активация пикселя на всех страницах (PageView)
Для того, чтобы пиксель срабатывал на каждой странице вашего сайта, необходимо настроить триггер. Выберите триггер «PageView» (Просмотр страницы) и убедитесь, что он активируется на всех страницах.
Шаг 4: Тестирование и публикация
Предварительный просмотр изменений в GTM
Перед публикацией убедитесь, что пиксель работает правильно. Нажмите кнопку «Предварительный просмотр» в GTM. Откройте свой сайт в новой вкладке браузера. В нижней части экрана появится панель GTM, показывающая, какие теги срабатывают на странице.
Проверка активации пикселя Facebook с помощью Facebook Pixel Helper
Установите расширение Facebook Pixel Helper для Chrome. Это расширение позволяет проверить, установлен ли пиксель Facebook на странице и правильно ли он работает. После установки Pixel Helper, откройте свой сайт и проверьте, активен ли пиксель.
Публикация контейнера GTM
Если все тесты пройдены успешно, нажмите кнопку «Отправить» в GTM и опубликуйте контейнер. Ваши изменения будут применены на сайте.
Дополнительные настройки: отслеживание событий Facebook
Настройка стандартных событий (например, ViewContent, AddToCart, Purchase)
Стандартные события позволяют отслеживать конкретные действия пользователей на вашем сайте, такие как просмотр контента (ViewContent), добавление товара в корзину (AddToCart) или совершение покупки (Purchase). Для настройки стандартных событий создайте новые теги в GTM с типом «Пользовательский HTML» и добавьте соответствующий код события. Например:
<script>
fbq('track', 'AddToCart', {
content_ids: ['PRODUCT_ID_123'],
content_type: 'product',
value: 49.99,
currency: 'USD'
});
</script>
Замените PRODUCT_ID_123, 49.99 и USD на фактические значения.
Создание пользовательских событий
Пользовательские события позволяют отслеживать действия, не предусмотренные стандартными событиями. Например, можно отслеживать отправку формы или скачивание файла.
// Пример пользовательского события в GTM
dataLayer.push({
'event': 'formSubmission',
'formName': 'Contact Form'
});
Затем создайте тег в GTM, который будет срабатывать при событии formSubmission и отправлять данные в Facebook Pixel.
<script>
fbq('trackCustom', 'ContactFormSubmitted', {
form_name: '{{formName}}'
});
</script>
Здесь {{formName}} — это переменная GTM, содержащая название формы.
Использование Data Layer для передачи данных о событиях
Data Layer — это объект JavaScript, который используется для хранения данных, которые вы хотите передать в GTM. Использование Data Layer позволяет сделать теги более гибкими и упрощает передачу информации о событиях. Пример использования Data Layer был показан выше при создании пользовательского события.