Перевод статьи с блога Симо Ахава "Create Facebook Pixel Custom Tag Template".
В этой статье я хочу показать вам конкретный пример создания шаблона. Это будет более амбициозно, чем простое пошаговое руководство, которое я создавал в главном руководстве. На этот раз мы займемся созданием реального, функционального шаблона, который подходит для очень специфического случая использования: пикселя Facebook.
Эта статья не согласована Facebook и не поддерживается им в каком-либо официальном или неофициальном виде.
Мы не будем останавливаться на идеальном представлении пикселя Facebook. Однако у вас будут все инструменты, необходимые для расширения шаблона, чтобы охватить все функции, которые вам могут понадобиться, и доработать его с помощью какого-либо другого кода сторонних разработчиков.
Готовый к работе шаблон пикселя Facebook вы можете найти в репозитории GitHub.
Вы можете скачать файл экспорта шаблона здесь. Прочтите это, чтобы узнать, как импортировать его в пользовательские шаблоны. Вам необязательно использовать файл экспорта, но это может облегчить прохождение части статьи.
Что мы получим в итоге
Шаблон имеет следующие особенности:
- Возможность добавления нескольких идентификаторов пикселей, разделенных запятыми. Срабатывание тега будет отправлено всем идентификаторам пикселей, указанным в списке.
- Поддержка четырех событий: PageView, Lead, CompleteRegistration и Custom (пользовательское событие позволит вам указать имя события в соответствующем текстовом поле).
- Возможность добавления в хит любых свойств объекта.
- Можно будет установить флажок, чтобы отключить автоматическую настройку пикселя.
Шаг 1: Добавьте информацию о шаблоне
После создания нового шаблона так выглядит информационный экран. Не забудьте включить расширенные настройки редактора, чтобы вы могли редактировать поле с названием бренда.
Шаг 2: Добавление полей
В шаблоне будет четыре поля.
Поле 1: Текстовое поле "pixelid"
Убедитесь, что для поля ввода текста включены следующие конфигурации полей:
- Всегда в режиме сводки: Активировано.
- Отображаемое название: Facebook Pixel ID(s).
- Правила проверки данных: смотрите ниже.
- Пример значения: Пример: 12345678910.
Для правил проверки данных добавьте два правила:
- Это значение не должно быть пустым, с сообщением об ошибке "Вы должны указать ID пикселя".
- Это значение должно соответствовать регулярному выражению со значением ^[0-9,]+$ и сообщением об ошибке "Недопустимый формат ID пикселя".
Вы можете добавить поле "Сообщение об ошибке", нажав кнопку "Показать расширенные настройки" для каждого правила проверки.
Поле 2: Раскрывающееся меню "eventName"
Для поля должны быть активированы следующие поля:
- Всегда в режиме сводки: Активировано.
- Отображаемое название: Событие.
- Вложенные поля: смотрите ниже.
Добавьте следующие пункты меню:
- Название: PageView, Значение: PageView.
- Название: Lead, Значение: Lead.
- Название: CompleteRegistration, Значение: CompleteRegistration.
- Название: Custom, Значение: Custom.
Нажмите кнопку "Добавить поле" в разделе "Вложенные поля" и выберите "Текстовое поле". Назовите поле customEventName и свойства:
- Отображаемое название: Custom Event Name.
- Условия включения: eventName равно Custom.
Условие включения гарантирует, что Custom Event Name будет отображаться только в том случае, если в раскрывающемся меню выбрано “Custom”. Круто, да?
Поле 3: Группа "objectProperties"
Список свойств и их настройки:
- Стиль группы: Сворачиваемый раздел - Свернут.
- Отображаемое название: Свойства объекта.
- Вложенные поля: смотрите ниже.
Нажмите кнопку "Добавить поле" в разделе "Вложенные поля" и выберите "Простая таблица". Назовите поле propertyList и убедитесь, что включена настройка “Текст кнопки для создания строки".
Добавьте в таблицу два столбца. Оба должны быть столбцами текстового поля.
Первый столбец должен иметь следующие настройки:
- Название столбца: Имя свойства.
- Внутреннее имя: name.
- Проверять уникальность значения столбца: активировано. Это поле появится если включить расширенные настройки (вызывается в меню с тремя точками).
Настройки второго столбца:
- Название столбца: Значение свойства.
- Внутреннее имя: value.
Наконец, задайте текст кнопки для создания строки “Новая строка” для добавления свойства и оставьте параметр "Отображаемое название" пустым.
Поле 4: Группа "moreSettings"
Задайте следующие настройки группе:
- Стиль группы: Сворачиваемый раздел - Свернут.
- Отображаемое название: Дополнительные настройки.
- Вложенные поля: смотрите ниже.
Нажмите кнопку "Добавить поле" в разделе "Вложенные поля" и добавьте поле "Флажок". Назовите поле disableAutoConfig, и включите свойство "Текст справки".
- Текст справки: Отключить автоматическую настройку.
- Текст справки: Facebook автоматически собирает некоторые метаданные (например, структурированные данные) и информацию о поведении пользователей (например, клики). Активируйте этот флажок, чтобы отключить эту автоматическую настройку пикселя.
Шаг 3: Редактируем код
Перейдите на вкладку "Редактор" и замените содержимое следующим JavaScript:
Если вы внимательно посмотрите на код, то увидите, что он гораздо сложнее, чем пиксель Facebook. Причина этого - изолированный JavaScript, который используют пользовательские шаблоны. Например, фрагмент Facebook создает глобальный метод fbq() как-то так:
Это очень простой фрагмент кода, который просто передает аргументы, которые вы предоставляете в fbq() (например, 'track', 'PageView'), в одно из двух мест, в зависимости от того, загрузился SDK или нет.
Сделать это в пользовательском шаблоне гораздо сложнее. Вы не можете просто установить глобальную переменную, для этого вам нужно использовать API. Вы не можете просто проверить, существует ли глобальный метод, для этого вам нужен API. И вы не можете просто создать свойство queue для метода fbq(), для этого вам нужен API.
Давайте рассмотрим блок за блоком, чтобы понять, что делает код.
Инициализация необходимых API
Скрипту необходимые несколько API, которые инициализируются с помощью API require() :
Я объясню, как они работают, когда мы встретимся с ними в коде.
Выборка списка добавленных ID
Тут мы извлекаем список добавленных ID (хранящихся в пользовательском глобальном массиве _fbq_gtm_ids), а также извлекаем значение, введенное пользователем в поле pixelId из самого шаблона.
Утилита для правильного извлечения глобального метода "fbq"
ВАЖНО! Функция стрелки - это функция ES6, поддерживаемая пользовательскими шаблонами. const getFbq = () => { переводится в var getFbq = function() { в более старом варианте JavaScript.
Цель getFbq - вернуть представление глобального метода fbq, который передает аргументы в нужное место, аналогично тому, как работает обычный сниппет Facebook.
Первые строки проверяют, был ли fbq уже создан глобально, и в этом случае возвращает глобальный метод.
В случае, если глобальный метод не существует, он должен быть создан.
Здесь глобальный метод fbq инициализируется как новая функция. Эта функция сначала проверяет, существует ли уже метод fbq.callMethod (что означает, что FB SDK загрузился), и если да, то передает аргументы, отправленные методу fbq (например, 'track', 'PageView'), этому встроенному методу.
Если метод callMethod еще не создан, то он передает свои аргументы в fbq.queue в виде массива. Очередь - это, в основном, список ожидания для запроса пикселя, который стоит в очереди для Facebook SDK по мере его загрузки по сети. После загрузки SDK он обрабатывает сообщения в этой очереди и отправляет их в Facebook.
Последняя строка создает псевдоним метода fbq в другой глобальной переменной _fbq. Я не уверен, почему это необходимо, но это то, что делает сниппет Facebook.
Последние строки вызова API setInWindow создают глобальный массив fbq.queue, прежде чем окончательно вернуть текущее содержимое глобальной переменной fbq, которая является функцией, созданной выше.
Подготовка fbq
Эти строки сначала извлекают последнее представление глобального метода fbq, вызывая только что созданную функцию getFbq.
Далее строится содержимое команды fbq. API makeTableMap берет propertyList из вашей простой таблицы и преобразует каждую строку в пару ключ:значение, где ключ - это значение первого столбца (например, content_ids), а значение - это значение второго столбца (например, 123456). Это удобный API для преобразования формата таблицы шаблонов в вид, который ожидают многие библиотеки JavaScript.
Переменная command зависит от того, используете ли вы стандартное событие (например, PageView или Lead), в этом случае она имеет значение trackSingle. Если вы используете Custom событие, в этом случае оно имеет значение trackSingleCustom.
evntName принимает либо выбранное значение из раскрывающегося меню, если выбрано стандартное событие, либо значение поля ввода текста customEventName, если выбрано Custom событие.
Просматриваем в цикле все ID пикселей, определенные в теге, и отправляем команды
Весь процесс обернут в итератор, который перебирает все идентификаторы пикселей, добавленные пользователем в тег. Команды выполняются одинаково для каждого отдельного идентификатора пикселя в теге.
Во-первых, код проверяет, был ли ID пикселя уже инициализирован, просматривая содержимое массива initIds, созданного в самом начале кода. Не стоит инициализировать ID более одного раза, иначе есть риск столкнуться с проблемами с SDK Facebook.
Если пиксель не был инициализирован, то сначала параметру autoConfig присваивается значение false, если пользователь установил соответствующий флажок в шаблоне.
Далее выполняется команда fbq('init', pixelId), после чего ID пикселя помещается в массив инициализированных пикселей.
Наконец, команда fbq() выполняется с параметрами, созданными ранее.
Загружаем SDK Facebook
Самая последняя строка в редакторе кода загружает SDK Facebook и запускает либо data.gtmOnSuccess(), либо data.gtmOnFailure, в зависимости от того, загрузился SDK успешно или нет.
Шаг 4: Настраиваем разрешения
Поскольку вы используете много API с глобальным пространством имен, вам нужно будет добавить некоторые разрешения чтобы код шаблона работал.
Как вы можете видеть, каждая используемая глобальная переменная, либо напрямую (через copyFromWindow, callInWindow и т.д.), либо косвенно (через aliasFromWindow) должна быть указана в списке разрешений.
Аналогично, добавление скрипта самого SDK должно быть с использованием соответствующего разрешения.
Тестируем!
Чтобы проверить шаблрн, сохраните его, затем перейдите к тегам вашего контейнера и создайте новый тег. Вы должны увидеть созданный пиксель Facebook в меню тегов.
Заполните поля. Попробуйте выполнить несколько различных действий, таких как передача различных свойств объекта, использование пользовательских событий и добавление нескольких ID пикселей.
Попробуйте также создать несколько тегов с одним и тем же идентификатором пикселя, чтобы убедиться, что инициализация выполняется только один раз для каждого ID.
Используя режим предварительного просмотра GTM и Facebook's Pixel Helper, вы можете убедиться, что все работает так, как должно.
В заключение
Я надеюсь, что эта статья помогла демистифицировать пользовательские шаблоны.
Как вы можете видеть, работа с изолированным JavaScript -э то не просто вопрос копирования и вставки исходного кода и перезаписи вызовов методов. Это требует совершенно иного подхода, особенно при работе с глобальными переменными.
Есть вещи, которые, по моему мнению, должны сделать работу с шаблонами гибче. Например, оболочка функций, которую GTM автоматически добавляет при создании глобальной функции, проблематична, поскольку существуют случаи использования, когда вы можете захотеть добавить свойства к самой глобальной функции. В своем текущем формате пользовательские шаблоны не позволяют этого, поэтому вам нужно использовать API, такой как createQueue, чтобы установить fbq.queue в качестве массива.
Было бы лучше, если бы я мог просто запустить что-то вроде setInWindow('fbq.queue', [ ]), но прямо сейчас setInWindow позволяет устанавливать только переменную, а не ее отдельные свойства.
Кроме того, преимущество использования этого тега по сравнению с пользовательским HTML-тегом огромно: вы минимизируете риск ошибок кода из-за работы с шаблоном, и вы избегаете проблем в своей Политике безопасности контента.