Передача событий в Facebook Pixel с помощью Google Tag Manager

340
9 мин.

Введение

Каждый раз, когда пользователь взаимодействует с сайтом, это выражается в виде события (загрузка страницы, добавление товара в корзину, успешно отправленная форма, покупка и т.п.). Перед любым проектом, будь то простой лендинг или полноценный интернет-магазин, стоит важная задача — реализовать передачу данных о таких событиях в нужное место (рекламный кабинет, система аналитики, прочее ). В этой статье я покажу, как с помощью Google Tag Manager можно решить эту задачу для Facebook Pixel.

Существует два способа передачи информации о событиях в Facebook. Об этом сообщает сам Facebook, когда пользователь устанавливает связь с источником данных в рекламном кабинете:

Conversions API позволяет передавать данные о событиях непосредственно с сервера, в то время как Facebook Pixel — с клиента (браузера пользователя). Зачастую у специалистов digital-маркетинга есть возможность работать только с клиентской стороной, поэтому рассматривать метод Conversions API в рамках этой статьи не будем.

Теперь поговорим о событиях. События в Facebook Pixel по своей логике разделены на два типа: стандартные события и пользовательские события (специально настроенные события).

Стандартные события — это заранее определенные действия, которые Facebook Pixel может отслеживать и определять в своих рекламных продуктах. В некоторых случаях события передаются автоматически, но я все же рекомендую настраивать вручную: это гарантирует корректность сбора нужной информации. Полный перечень стандартных событий можно увидеть, перейдя по ссылке.

Пользовательские события — это действия, которые нужно определять самостоятельно. Для таких событий можно указать собственное имя и задать ряд пользовательских атрибутов, не предусмотренных по умолчанию. При этом пользовательские события поддерживают все стандартные атрибуты. Пример того, как может выглядеть код, передающий такое событие в Facebook Pixel:

Настройка событий в Facebook Pixel

Прежде чем приступить к настройке событий, покажу, как должен выглядеть основной код Facebook Pixel и его схематичное расположение в коде страницы:

Основной код Facebook Pixel

< ! - 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', '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>
<! - End Facebook Pixel Code ->

Схематичное расположение в коде страницы

1 - код страницы
2 - основной код Facebook Pixel
3 - код стандартного события

Установить основной код можно удобным способом, следуя простой инструкции.

Ниже приведены две таблицы: таблица стандартных событий и таблица атрибутов (свойств).

Таблица стандартных событий

Название события

Описание события

Атрибуты

AddPaymentInfo

Платежная информация добавляется в процессе оформления заказа.

 

Пример:

Человек нажимает кнопку подтверждения платежной информации.

Необязательные:

content_category, content_ids, contents, currency, value

AddToCart

Товар добавлен в корзину.

 

Пример:

Человек нажимает кнопку добавления в корзину.

Необязательные:

content_name, currency, value

Обязательные для динамического ремаркетинга: content_type и contents, или content_ids

AddToWishlist

Товар добавлен в список желаний.

 

Пример:

Человек нажимает кнопку добавления в список желаний.

Необязательные:

content_name, content_category, content_ids, contents, currency, value

CompleteRegistration

Регистрационная форма заполнена.

 

Пример:

Человек отправляет заполненную форму регистрации.

Необязательные:

content_name, currency, status, value

Contact

Человек устанавливает контакт с вашей компанией по телефону, SMS, электронной почте, в чате и т.д.

 

Пример:

Человек отправляет форму “обратный звонок”.

Отсутствуют

CustomizeProduct

Человек выбирает варианты продукта.

 

Пример:

Человек выбирает цвет футболки.

Отсутствуют

Donate

Человек жертвует средства вашей организации или делу.

 

Пример:

Человек добавляет в корзину пожертвование.

Отсутствуют

FindLocation

Человек ищет местоположение вашего магазина через веб-сайт или приложение с намерением посетить это место.

 

Пример:

Человек хочет найти конкретный товар в офлайн магазине.

Отсутствуют

InitiateCheckout

Человек начинает процесс оформления заказа.

 

Пример:

Человек переходит на страницу оформления заказа.

Необязательные:

content_category, content_ids, contents, currency, num_items, value

Lead

Отправлена заявка.

 

Пример:

Человек отправляет форму “оставить заявку”.

Необязательные:

content_category, content_name, currency, value

PageView

Это событие по умолчанию. Просмотр страницы.

 

Пример:

Человек попадает на страницу вашего сайта.

Отсутствуют

Purchase

Совершена покупка или процесс оформления заказа завершен.

 

Пример:

Человек завершил процесс покупки или оформления заказа и перешел на страницу благодарности или подтверждения.

Необязательные:

content_name, num_items

Обязательные: currency and value

Обязательные для динамического ремаркетинга: content_type и contents, или content_ids

Schedule

Человек записывается на прием, чтобы посетить одно из ваших мест.

 

Пример:

Человек выбирает дату и время для посещения.

Отсутствуют

Search

Производится поиск.

 

Пример:

Человек ищет товар на вашем сайте.

Необязательные:

content_category, content_ids, contents, currency, search_string, value

StartTrial

Человек запускает бесплатную пробную версию продукта или услуги, которые вы предлагаете.

 

Пример:

Человек активирует бесплатную неделю вашей программы.

Необязательные:

currency, predicted_ltv, value

SubmitApplication

Человек подает заявку на продукт, услугу или программу, которые вы предлагаете.

 

Пример:

Человек подает заявку на получение кредитной карты, образовательной программы или работы.

Отсутствуют

Subscribe

Человек подает заявку на подписку на продукт или услугу, которые вы предлагаете.

 

Пример:

Человек подписывается на вашу рассылку.

Необязательные:

currency, predicted_ltv, value

ViewContent

Посещение интересующей вас веб-страницы.

 

Пример:

Человек попадает на страницу с описанием продукта.

Необязательные:

content_ids, content_category, content_name, content_type, contents, currency, value

Обязательные для динамического ремаркетинга: content_type и contents, или content_ids

Таблица атрибутов

Ключ атрибута

Тип возвращаемого значения

Описание атрибута

content_category

Строка

Категория страницы или продукта

content_ids

Массив целых чисел или строк

ID продуктов, связанных событием, такие как SKU ([‘123’,’abc’,’abc123’])

content_name

Строка

Название страницы или продукта

content_type

Строка

Либо product, либо product_group на основе передаваемых content_ids или content. Если идентификаторы, передаваемые в параметре content_ids или contents — это идентификаторы продуктов, значение должно быть product. Если передаются идентификаторы группы продуктов, значение должно быть product_group.

contents

Массив объектов

Массив JSON-объектов, содержащих количество и идентификатор товара или контента. id и quantity — обязательные поля [{'id': 'ABC123', 'quantity': 2}, {'id': 'abc789', 'quantity': 2}].

currency

Строка

Код валюты в формате ISO-4217.

num_items

Целое число

Количество элементов в корзине в момент начала оформления заказа.

predicted_ltv

Целое число, число с плавающей запятой

Предполагаемая ценность подписчика, определенная рекламодателем и выраженная в виде точной стоимости.

search_string

Строка

Значение строки поиска.

status

Логическое значение

Показывает статус регистрации (пройдена или нет).

value

Целое число или число с плавающей запятой

Ценность события (цена купленного товара, ценность целевого действия).

Перейдем непосредственно к настройке данных событий внутри интерфейса Google Tag Manager (GTM). Настройка будет продемонстрирована на паре событий (purchase и lead), настройка остальных событий будет происходить аналогичным способом.

Событие Lead

Настройка событий, которые не имеют обязательных параметров или вовсе не имеют их, очень простая. Создаем новый тег, выбирая тип тега “Пользовательский HTML” (“Custom HTML”):

В поле для ввода записываем следующий код:

<script>
  fbq ( 'track', 'Lead');
</script>

Важно! Каждый раз, когда вы добавляете новое событие:

  1. Разместите код внутри тега <script>.
  2. Передача информации о событии происходит через вызов функции fbq (), которая принимает несколько параметров.
  3. Ключевое слово 'track' используется в качестве значения первого параметра, оно дает функции понять, что будут отслеживаться стандартные события (для отслеживания пользовательского события нужно было бы указать 'trackCustom').
  4. Укажите в качестве значения второго параметра слово Lead — имя нужного события. Это даст функции понять, какое конкретно событие она будет отслеживать.

Следующий шаг — создать нужный триггер. Это может быть клик на кнопку, видимость элемента, просмотр страницы, пользовательское событие или вообще любой другой тип триггера. Главное — срабатывание этого триггера должно означать, что желаемое событие произошло. В моем случае я использую пользовательское событие:

Сохраняем настройки тега и вуаля! Событие Lead успешно настроено. По аналогии можно настроить все остальные события без обязательных атрибутов. Основная задача — правильно настроить нужный триггер.

Событие Purchase

Теперь рассмотрим более сложное в реализации событие Purchase. Это событие можно назвать “особенным”, так как оно единственное имеет обязательные параметры value и currency. Также это событие имеет обязательные параметры для динамического ремаркетинга content_type, contents или content_ids. Поэтому настройка этого события включает в себя максимум сложностей, которые возможны при настройке событий в Facebook Pixel.

Начальные шаги совпадают с настройкой события Lead. Основным отличием будет наличие обязательных параметров в передаваемом объекте.

Поэтому стоит дополнить алгоритм выше и включить в него пару пунктов. Создаем новый тег, выбирая тип тега “Пользовательский HTML” (“Custom HTML”):

В поле для ввода записываем следующий код:

<script>
  fbq ( 'track', 'Purchase', 
      {value:{{Custom JavaScript _-_ Value - Thank You Page}},      
      currency: {{Custom JavaScript _-_ FB - Currency}},      
      content_ids: {{Custom JavaScript _-_ ID - Thank You Page}},    
      content_type: {{Custom JavaScript _-_ FB - Content   
  Type}},});
</script>
  1. Разместите код внутри тега <script>.
  2. Передача информации о событии происходит через вызов функции fbq (), которая принимает несколько параметров.
  3. В качестве значения первого параметра указываем слово 'track', даем функции понять, что будет происходить отслеживание стандартных событий.
  4. Указываем в качестве значения второго параметра слово Purchase — имя нужного события. Даем функции понять, какое конкретно событие она будет отслеживать.
  5. В качестве значения третьего параметра нужно указать объект “{...}”. Этот объект по факту является телом события, в котором нужно указать все обязательные атрибуты (value, currency, content_ids, content_type) и задать им значения ({{CustomJavaScript _-_ Value - Thank You Page}}, {{Custom JavaScript _- _ FB - Currency}}, {{Custom JavaScript _-_ ID - Thank You Page}} і {{Custom JavaScript _-_ FB - ContentType}}).

В двойных фигурных скобках находятся переменные GTM. Конечно же, можно обойтись без них, передавая нужное значение сразу в соответствующий атрибут. Например, вот так:

<script>
  fbq ( 'track', 'Purchase', 
      {value:1000.00,      
      currency: 'UAH',      
      content_ids: [ '123abc', 'xyz789'],    
      content_type:   
  'product',});
</script>

Но такие значения, как идентификатор товара, общая сумма покупки или даже валюта зачастую динамичны. Поэтому корректнее и эстетичнее использовать переменные GTM.

При настройке таких событий ключевым моментом будет реализация сбора нужных данных в эти переменные. Здесь, увы, без знания основ JavaScript придется сложно. Но всегда можно попросить помощи разработчиков или веб-мастеров.

Когда этап реализации нужных переменных пройден, остается только выбрать нужный триггер (загрузка страницы “спасибо за заказ” и т.п.). Получаем вот такой тег и сохраняем изменения:

Передача атрибутов для динамического ремаркетинга

Как вы могли заметить, у некоторых событий есть обязательные атрибуты для динамического ремаркетинга. Что это значит? Чтобы кампания динамического ремаркетинга могла корректно работать, Facebook понадобятся сведения о товарах или контенте, которые просматривал пользователь, чтобы сопоставлять их с товарами из продуктового фида и показывать рекламутим самим по соответствующим продуктам. Советую передавать эти атрибуты во всех событиях, которые их имеют, даже если они помечены как необязательные. Это дает возможность более гибко настроить аудиторию для ремаркетинга.

Использование переменных GTM для настройки тега “Ремаркетинг в Google Рекламе”.

Еще один плюс использования переменных GTM при настройке событий динамического ремаркетинга Facebook — эти же переменные можно использовать для настройки тега “Ремаркетинг в Google Рекламе”. Более подробно о том, как настроить этот тег, имея настроенные события в Facebook Pixel, можно узнать из этой статьи.

Выводы

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

Некоторые события имеют колоссальное значение в работе динамического ремаркетинга. Корректно собранные данные помогают показывать релевантные продукты и делают работу с аудиториями более гибкой.

Использование переменных GTM помогает выполнить две задачи сразу, при этом лишь незначительно увеличив затраченное время на их выполнение.

08 апреля 2021
4.8 / 5 (9 голосов)