Как настроить Meta Pixel (Facebook Pixel) с помощью Google Tag Manager

Хотите отслеживать активность пользователей на вашем сайте?

Установка Meta Pixel (ранее Facebook Pixel) на ваш веб-сайт является важной частью запуска рекламы в Facebook. Но что такое метапиксель? Это фрагмент кода, который загружает небольшую библиотеку функций всякий раз, когда посетитель совершает действие, которое вы хотите отслеживать (называемое конверсией).

Затем отслеживаемые конверсии можно использовать для измерения эффективности ваших объявлений. С установленными пикселями вы также можете определять пользовательские аудитории, настраивать динамические рекламные кампании и многое другое.

В этом посте мы покажем вам, как настроить Meta Pixel с помощью Google Tag Manager.

Вот краткий обзор того, что мы рассмотрим в этом руководстве:

• Настройка диспетчера тегов Google
• Создание тега PageView
• Применение триггера
• Тестирование

Настройка диспетчера тегов Google

Давайте сначала переведем вашу учетную запись Диспетчера тегов Google в режим предварительного просмотра.

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

Если у вас еще нет опубликованной версии, вам сначала будет предложено опубликовать пустую версию.

Нажмите на Опубликовать пустую версию.

Затем нажмите на Предварительный просмотр.

Откроется Google Tag Assistant на другой вкладке. Здесь вы подключите Tag Assistant к своему сайту.

Введите URL вашего сайта в отведенное место, затем нажмите Соединять.

Ваш сайт должен открыться на другой вкладке, и отладочная информация в Tag Assistant будет поступать с этой страницы.

Мы можем подтвердить, что вкладка подключена к Tag Assistant, если в правом нижнем углу страницы есть всплывающее окно.

Поскольку у нас пока нет ни тегов, ни переменных, ничего не сработает, и Tag Assistant будет пуст. Возвращаясь к нашему Диспетчеру тегов, мы получаем уведомление о том, что доступна новая версия контейнера.

Нажмите на Обновить рабочую область в левом нижнем углу страницы.

Затем нажмите на Обновлять.

Создание тега PageView

Существуют различные типы пикселей, которые вы можете использовать на своем веб-сайте. В этом руководстве мы научим вас, как настроить Meta Pixel для отслеживания событий PageView.

Для сайтов электронной коммерции вы можете использовать отслеживание покупок Meta Pixel. Чтобы не упустить важные данные о конверсиях, ознакомьтесь с нашим руководством по отслеживанию покупок и конверсий в Meta Pixel с помощью GTM.

Перейти к Теги → Новый.

Далее мы настроим наш тег. Официальный шаблон Meta Pixel отсутствует в списке шаблонов, предоставленных Google, но есть в галерее сообщества.

Нажмите на Конфигурация тега → Откройте для себя другие типы тегов в галерее шаблонов сообщества.

Отсюда ищите «Фейсбук” в строке поиска и выберите Пиксель Facebook шаблон.

Вы можете видеть, что галерея сообщества предоставляет несколько шаблонов, которые мы можем использовать. У нас есть шаблоны для API конверсий, поддержки клиентов и метапикселя.Они могут пригодиться вам в будущем, а пока давайте выберем шаблон Pixel от Facebook Incubator.

При выборе любого шаблона открывается окно, в котором можно просмотреть такие сведения, как краткое описание шаблона, последние изменения и конкретные действия, которые шаблон должен выполнять во время выполнения.

Нажми на Добавить в рабочую область кнопка.

Появится всплывающее окно с вопросом, хотите ли вы дать шаблону разрешение на выполнение списка определенных действий.

Мы примем это, нажав на Добавлять.

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

Далее нам нужно указать наш идентификатор метапикселя.

Чтобы найти наш Pixel ID, перейдите в Менеджер событий в нашем Meta Business Suite. На вкладке обзора нашего пикселя идентификатор пикселя может быть расположен с правой стороны. Вы можете удобно скопировать это значение, щелкнув по нему.

Вернитесь в Диспетчер тегов и вставьте наш Pixel ID в отведенное место.

Создание переменной для вашего Pixel ID

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

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

Сначала щелкните значок кирпича рядом с текстовым полем.

Откроется новое окно. Щелкните значок плюса (+) в правом верхнем углу, чтобы создать новую переменную.

Следующим шагом будет присвоение имени нашей переменной. Чтобы было легче узнать, какая переменная у нас есть, я назову переменную первой в имени, а затем, что это за переменная. Поскольку наш Pixel ID имеет постоянное значение, у нас будет постоянный тип переменной.

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

Введите имя в отведенном месте, затем нажмите Конфигурация переменных.

Прокрутите список и выберите Постоянный.

Введите идентификатор пикселя в значение, затем нажмите Сохранять.

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

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

Теперь мы можем перейти к остальным конфигурациям. Поскольку опция PageView выбрана по умолчанию, нам не нужно ничего менять в имени события. Давайте научимся применять триггер.

Применение триггера

Прокрутите вниз и нажмите на Запуск.

Поскольку мы создаем тег PageView, нам нужно, чтобы этот тег срабатывал на всех страницах при их открытии. Есть несколько предварительно настроенных параметров, и триггер для всех страниц — один из них.

Просто нажмите на Все страницы чтобы выбрать эту конфигурацию.

Теперь все, что нам нужно сделать, это назвать наш тег. Как и раньше, имя тега должно начинаться с названия инструмента, в данном случае Facebook, затем события и, наконец, типа события, которым является PageView.

Введите это имя, затем нажмите Сохранять.

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

Нажмите на Предварительный просмотр.

Мы будем перенаправлены на Tag Assistant. Когда наш сайт подключен, нажмите на Продолжать для просмотра нашей отладочной информации.

Здесь мы видим, что наше событие PageView успешно запущено.

Отлично, наш Meta Pixel, кажется, правильно развертывается в режиме предварительного просмотра.

Теперь последний шаг в настройке Meta Pixel — протестировать и отладить его, чтобы убедиться, что он успешно развернут.

Тестирование

Полезным инструментом, который может помочь нам в тестировании нашего метапикселя, является расширение Facebook Pixel Helper. Установка этого расширения в Google Chrome может предоставить информацию о вашем пикселе, о том, какие события отправляются на него, и если что-то пошло не так или было развернуто неправильно.

Мы можем найти эти детали, нажав на событие. Для иллюстрации давайте посмотрим на наше событие PageView.

Нажмите на расширение, затем на Вид страницы мероприятие.

Здесь мы увидим такие детали, как метод установки, вызываемый URL-адрес, время загрузки и местоположение пикселя. Мы также видим, что у него есть зеленая галочка, которая указывает, что событие PageView было запущено правильно.

Вы также увидите, что микроданные были обнаружены автоматически. Meta Pixel имеет функцию перехода на страницу, ее сканирования и поиска любой специальной информации на самой странице. Этими данными мы не можем манипулировать, это то, что Meta отслеживает автоматически.

Итак, наш помощник по пикселям Facebook показывает нам, что мы правильно активировали наш тег и все должно работать. Однако нам все еще нужно проверить, отправляет ли он данные в Meta.

Тестирование событий браузера

Мы должны посмотреть на наш менеджер событий и протестировать события нашего браузера.

Перейти к Тестовые события вкладка Прокрутите вниз и вставьте наш URL-адрес в отведенное место для тестирования событий браузера. Наконец, нажмите на Открыть веб-сайт.

Это установит файл cookie на ваш веб-сайт, который позволит ему отправлять данные в Meta. Наш сайт также откроется в другой вкладке. Однако эта вкладка не будет связана с нашим Tag Assistant. Поскольку наш тег еще не опубликован, событие PageView не будет отображаться в диспетчере событий.

Если мы откроем расширение Facebook Pixel Helper на этой вкладке, мы также увидим, что пиксель не развернут и ничего нельзя отследить.

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

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

Если мы вернемся к нашему диспетчеру событий, мы увидим, что событие PageView теперь отправляется в Meta.

Большой; все работает исправно! Давайте отправим живую версию, чтобы развернуть этот пиксель во всех браузерах и всех пользователей, которые заходят на наш сайт.

Издательский

Вернемся к Диспетчеру тегов и нажмем Представлять на рассмотрение.

Это действие открывает новое окно, в котором мы можем настроить отправку. Мы можем предоставить имя для этой версии, а также описание.

А пока давайте просто укажем имя и щелкнем Публиковать.

Теперь наш тег PageView должен быть активен на нашем веб-сайте. Теперь мы можем выйти из нашего помощника по тегам, чтобы наш сайт больше не был к нему подключен.

Перезагрузите наш веб-сайт на вкладке и откройте расширение Facebook Pixel Helper, чтобы проверить, правильно ли отправляется событие PageView.

Отлично, наш пиксель развертывается. Если вы не получаете таких же результатов, вам может потребоваться выполнить аппаратное обновление, нажав Cmd+Shift+R на Mac или Ctrl+Shift+R в Windows. Это действие удаляет кеш в вашем браузере, что должно решить проблему.

Теперь, для нашей окончательной проверки, вернитесь к нашему диспетчеру событий, где мы должны увидеть другое событие PageView.

Теперь мы успешно развернули отслеживание событий PageView для нашего метапикселя.

Резюме

Это шаги по настройке Meta Pixel с помощью Google Tag Manager. Мы создали тег PageView, создали переменную для идентификатора пикселя и протестировали наш тег с помощью расширения Facebook Pixel Helper и менеджера событий.

Это руководство является частью нашего курса по отслеживанию метапикселей на MeasureMasters. Если вы хотите делать больше со своим метапикселем, например, как настраивать пользовательские события, прикреплять динамические данные к вашим событиям и т. д., ознакомьтесь с членством.

Еще не готовы инвестировать в членство? Ознакомьтесь с нашим полным учебным пособием по отслеживанию метапикселей с помощью Диспетчера тегов Google. Здесь вы узнаете три способа установки Meta Pixels.

Какие еще пиксели вы установите на свой сайт? Какие типы конверсий вы хотите отслеживать? Дайте нам знать в комментариях ниже!