Как установить пиксель Facebook на 3 способа установки и проверка работы пикселя

Как установить пиксель Facebook на сайт: 3 способа установки и проверка работы пикселя

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

Что такое пиксель Facebook и зачем он нужен?

Пиксель Facebook представляет собой небольшой фрагмент кода JavaScript, который после установки на сайт предоставляет три основные возможности:

• Анализ поведения посетителей
  Вы можете настроить в пикселе отслеживание определенных действий (событий) на сайте, чтобы лучше понимать, как ведут себя посетители, и в дальнейшем использовать эту информацию для оптимизации маркетинга.
• Автоматическая оптимизация рекламных кампаний
  На основании полученных пикселем данных «умный» алгоритм Facebook будет показывать вашу рекламу тем, кто с наибольшей вероятностью совершит нужное вам действие (конверсию).
• Создание пользовательских аудиторий
  На основе событий пикселя можно создавать специально настроенные аудитории посетителей для ретаргетинга, а также находить других пользователей Facebook, похожих на ваших клиентов.

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

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

Установка пикселя Facebook непосредственно в код страниц сайта

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

Если в вашем рекламном аккаунте еще нет пикселя, у вас откроется окно, в котором нужно нажать кнопку Создать пиксель (Facebook постоянно вносит обновления, поэтому внешний вид окна может отличаться, но суть остается неизменной).

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

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

В открывшемся окне мы увидим поле с базовым кодом пикселя Facebook. Копируем его, вставляем в файл .txt и сохраняем.

После этого мы устанавливаем сохраненный код на все страницы сайта, которые хотим отслеживать. Согласно рекомендации Facebook, код пикселя должен располагаться в разделе заголовка, перед закрывающим тегом </head> .Это обеспечивает высокую точность статистики, потому что коды, установленные в разделе заголовка, загружаются первыми.

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

Способ установки пикселя Facebook непосредственно в код сайта обеспечивает высокую точность статистики и является довольно распространенным, но у него есть потенциальный минус – обилие различных скриптов (счетчиков Яндекс Метрики, Google Analytics и т.д., в том числе пикселя Facebook и его событий) в коде страниц может влиять на скорость их загрузки.

Установка пикселя Facebook при помощи Google Tag Manager

Сначала мы получаем базовый код пикселя в рекламном кабинете, как это описано в предыдущем способе (копируем код пикселя и сохраняем его в .txt файле), после чего переходим в установленный на сайте контейнер Google Tag Manager (GTM) и нажимаем на кнопку Добавить новый тег.

Затем кликаем на поле Конфигурация тега и в отрывшемся окне выбираем тип тега Пользовательский HTML.

В соответствующее поле вставляем базовый код пикселя Facebook из нашего .txt файла.

После этого нам нужно установить триггер активации тега. Прокручиваем страницу ниже, кликаем на поле Триггеры и в открывшемся окне выбираем All pages (Все страницы).

Даем название нашему тегу (например, FB pixel) и нажимаем кнопку Сохранить.

Теперь тег настроен, нам остается только нажать кнопку Отправить и опубликовать контейнер.

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

• не требует специальных навыков или участия программиста,
• позволяет устанавливать большое количество различных тегов (кодов) на сайт без значительного влияния на скорость загрузки страниц.

Установка пикселя Facebook при помощи партнерских интеграций

Интерфейс установки пикселя Facebook позволяет добавить его на сайт посредством интеграции с популярными платформами – WordPress, Joomla, Wix и многих других. Для этого на шаге выбора способа установки нужно нажать Добавление кода с помощью партнерских интеграций.

На следующем шаге мы видим список доступных партнеров.

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

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

Проверка правильности установки пикселя Facebook

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

Как проверить работу пикселя с помощью отправки тестового трафика

Чтобы отправить тестовый трафик, нужно на странице пикселя на вкладке Обзор нажать на кнопку Настроить пиксель.

Затем выбираем Добавление кода пикселя на сайт вручную.

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

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

Как проверить работу пикселя с помощью Pixel Helper

Самый быстрый, простой и удобный способ проверки работы пикселя Facebook и его событий – использование специального бесплатного расширения для браузера Chrome — Pixel Helper. Установить его можно по этой ссылке.

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

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

На приведенной ниже картинке видно, что Pixel Helper нашел на нашем сайте один пиксель, который успешно зарегистрировал событие PageView (Просмотр страницы).

Если у вас отображается эта информация, поздравляю! Пиксель правильно установлен и работает.

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

Подпишись и следи за выходом новых статей в нашем монстрограмме

Остались вопросы?

Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью? Задавайте вопросы и темы статей которые Вас интересуют в комментариях.

Источник

Подключение пикселя партнерки через GTM

Недавно столкнулся с задачей интеграции партнерки на сайт, используя Google Tag Manager. По сути ничего сложного — нужно загрузить один пиксель на всех страницах сайта и второй пиксель на целевое действие пользователя, в данном случае на отправку формы. Нюанс лишь в том, что нужно учитывать атрибуцию трафика: партнерка работает по модели «Last Paid Click». Это означает что при повторных посещениях с бесплатных источников трафика, пиксель партнерки все равно должен сработать при отправке формы. Решения не нагуглилось, поэтому опишу подробнее.

1. Создаем переменную в которую будет записываться значение метки utm_source
2. Аналогично созадим переменнную с идентификатором партнерки, в данном случае это click_id
3. Создаем тег типа Custom HTML в котором запишем в куку значением из utm_source В качестве триггера выбираем pageview с дополнительным условием utm_source не должно быть равно значению undefined
4. Создаю аналогичный тег с идентификатором партнерки Триггер pageview с дополнительным условием что переменная utm_source равна cityads.
5. Теперь нам нужно создать еще две переменные click_id и utm_source только значения они должны брать не из url а из созданных нами кук. Переменная типа 1st-Party Cookie ставим имена созданных нами кук
6. Остается загрузить пиксель на целевое действие. Тег также Custom HTML. Код пикселя даст ваш менеджер в партнерке. В этот код подставляется значение переменной из предыдущего шага с идентификатором партнерки. Триггером служит pageview с дополнительными условиями Page URL равно посадочной странице куда пользователь попадает после успешной отправки формы, и значение utm_source из переменной из куки равно cityads

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

Если же пользователь придет на сайт без меток, то кука utm_source не будет перезаписана и тогда при отправке формы пиксель будет загружен.

В следующем посте расскажу как аналогичную задачу для ecom магазина решал через отправку postback запросов

Источник

Как установить пиксель Facebook Ads на сайт с помощью GTM

Вы создали пиксель Facebook Ads и готовы перейти к установке. Если ваш сайт создан не на конструкторе, вам необходимо поставить код Google Tag Manager (GTM). Установить пиксель удобнее всего будет именно через GTM.

Для этого после создания пикселя оставайтесь в рекламном кабинете Business Manager и следуйте нашей подробной инструкции.

1. Вы создали пиксель Facebook Ads и готовы перейти к установке. Если ваш сайт создан не на конструкторе, вам необходимо поставить код Google Tag Manager (GTM). Установить пиксель удобнее всего будет именно через GTM.

2. Выберите партнера Google Tag Manager.

3. Нажмите «Продолжить».

4. В следующем окне тоже нажмите «Продолжить».

5. Вы увидите поп-ап с выбором аккаунтов Google. Укажите тот аккаунт, на котором у вас создан GTM для вашего сайта.

6. Нажмите «Разрешить».

7. Подождите, пока выполнится вход в GTM.

8. Выберите из списка аккаунт GTM, который установлен на вашем сайте. Выберите контейнер. Нажмите «Завершить настройку».

9. Зайдите в тот аккаунт GTM, который вы создали под выбранный сайт. Код GTM на сайте у вас уже должен быть установлен. Теперь проверьте, появился ли у вас тег Фейсбука. Зайдите в «Теги» — и вы увидите, что пиксель Фейсбука уже появился.

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

10. Вернитесь в окно, где вы настраивали связь Facebook и GTM. Введите в строку ссылку на свой сайт и нажмите «Открыть сайт».

Источник

Как установить пиксель ВКонтакте на сайт

Установка пикселя ВКонтакте позволяет собирать аудиторию посетителей сайт и фиксировать их действия на сайте для запуска ретаргетинговых кампаний в социальной сети.

Получения кода пикселя ВК

Для того, чтобы получить код пикселя ВКонтакте потребуется посетить рекламный кабинет и кликнуть на «Ретаргенинг» (слева-сверху).

На появившейся странице переходим в «Пиксели» и кликаем на «Создать новый».

• Название пикселя;
• Разрешенный домен;
• Выбрать тематику сайта.

Далее мы получаем нужный нам код сайт, где ниже указан отдельно ID пикселя.

В зависимости от выбранного способа установки сохраняем нужный нам параметр.

Ручная установка пикселя Вконтакте (Способ №1)

Ручная установка подойдет для тех, кто разбирается в структуре файлов своего сайта и обладает базовыми знаниями HTML.

Для установки потребуется внедрить код на все страницы сайта, как можно ближе к началу документа. Как правило, это элементы header (шапка сайта) или footer (подвал).

Для установки на WordPress потребуется зайти в «Внешний вид»-«Редактор» и найти файл head или footer и перед закрывающимся тегом </head> установить счетчик.

Также это можно сделать через FTP или файловый менеджер хостинга. Путь для данных файлов выглядит как «/wp-content/themes/ваша-тема/header.php».

Для установки на Opencart необходимо зайти в файловый менеджер на хостинге или через FTP и изменить файл header.tpl, стандартный путь для файла «/catalog/view/theme/ваша-тема/template/common/header.tpl».

Установка пикселя VK через Google Tag Manager (Способ №2)

Если на сайте установлен менеджер тегов Google (GTM), то процесс установки будет значительно проще.

Заходим в аккаунт GTM для нужного сайта и выбираем вкладку «Теги» и нажимаем на кнопку «Создать»

Даем тегу название, например, «vk pixel» и выбираем конфигурацию тега.

Выбираем конфигурацию тега «Пользовательский HTML»

В появившемся редакторе вводим созданный код счетчика.

Теперь выбираем триггер для взаимодействия, который должен быть «All pages», что позволит подгружать счетчик на всех страницах сайта (где установлен Google Tag Manager).

После сохраняем тег.

Завершающий этап публикация новой версии, где также стоит указать, что основным отличием ее от предыдущей является появление тега «vk pixel».

Заполняем название и описание. Например, если Вы также публикуете и тег пикселя Facebook, то можно описать как «fb+vk».

Все готово, счетчик установлен.

Проверка сбора данных VK.com Pixel

Для этого открываем вкладку «Ремаркетинг»-«Пиксели», где должно быть указано, что счетчик «Работает».

Также стоит кликнуть на него и выбрать «Аудитория», после чего будет показано, в каких созданных аудиториях он используется.

Источник



Настройка и установка пикселей VK и FB в GTM

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

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

Если вы хотите поставить новый пиксель или хотите настроить цель,для всего этого нужен специалист, которого надо отвлекать от его текущих задач, ставить задачи, ждать выполнения.

Это все трудозатраты, а время как говорится деньги.

Чтобы упростить работу с пикселями, целями и событиями на помощь приходит GTM.

В GTM вы настраиваете все самостоятельно, без привлечения сторонних специалистов.

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

Итак как настроить GTM.

Для начала нам нужно создать контейнер. Контейнер это непосредственно код GTM, который позволяет через свой сервис Google Tag Manager устанавливать сторонние пиксели, настраивать цели на сайт.

Чтобы его поставить надо указать домен сайта и где он будет размещен.

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

После того как контейнер будет на сайте, попробуем поставить пиксель фейсбук и vk самостоятельно. Для этого идем в раздел переменные.

К переменным относятся все формы, клики, скролы и просмотры видео. Отметьте галочками необходимые параметры, которые вы хотите отслеживать.

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

Указываем название, домен и тематику.

Получаем кусок кода.

С этим кодом переходим в GTM и создаем тег. Тег — это правило, по которому будет срабатывать код.

Указываем название тега.

Далее выбираем конфигурацию тега. Конфигурация — это выбор типа кода, который вы собираетесь внести.

Чтобы установить пиксель ВКонтакте нам надо выбрать “Пользовательский html”

В поле html вставляем пиксель VK.

Далее выбор триггеров. Выбираем all pages и наш код будет срабатывать в на всех страницах сайта.

Сохраняем данные по кнопке.

Отправляем все на сайт и публикуем наши пиксели.

Точно также проходит настройка пикселя Facebook.

Таким образом мы поставили пиксели VK и Facebook на сайт без программистов.

Источник