Как добавить пиксель на сайт

Иван Ярославцев
Иван Ярославцев
22.06.2022

 

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

В руководстве расскажем: 

— что такое пиксель;

— зачем он нужен;

— как получить пиксель; 

— как установить пиксель на сайт.

 

Что такое пиксель

Пиксель — JS-скрипт, с помощью которого можно собирать информацию о посетителях вашего веб-сайта и их действиях — посещениях страницах, нажатиях кнопок, заполнении форм, покупке товаров и т.п. Свое название код получил в честь небольшой картинки размером 1px. 

В совокупности скрипт собирает следующую информацию:

— посещение и просмотр внутренних веб-страниц портала;

— внутренние поисковые запросы пользователя, вводимые на сайте;

— взаимодействия с товарами – добавление в избранное, желаемое, корзину;

— оформление заказов;

— указание способов оплаты во время оформления;

— совершение покупок;

— отправку данных из формы;

— регистрация и вход на сайт.

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

Для отслеживания поведения пиксель определяет связь между посетителем сайта и его аккаунтом в соцсетях. Идентификация достигается с помощью использования куки-файлов. 

Для чего нужен пиксель

Благодаря этому инструменту можно:

— Проводить ретаргетинг. Благодаря ему, вы сможете показывать рекламные объявления пользователям, которые уже посещали веб-сайт, но не совершили нужное целевое действие (или, наоборот, совершили, но остались еще действия, которые они могут совершить). Это могут быть посетители, которые положили товар в корзину и не купили его, или отправили заявку, но не связались с менеджером по продажам, и т.д. 

— Привлекать больше посетителей на сайт. Создавая сегменты целевой аудитории, похожие на основную, вы сможете попробовать запустить рекламу для look-alike ЦА. 

— Оценивать эффективность рекламы и проводить ее оптимизацию. Поняв, какие действия посетители совершают с объявлениями, вы сможете решить, нужно ли повышать или понижать ставки для сегмента ЦА, собранной скриптом.

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

Хотя многие возможности по оценке, например: 

  1.  количество переходов по рекламе;

  2. ID кампаний и объявлений;

  3. проценты конверсий и отказов.

Автоматически предоставляются системами веб-аналитики — Яндекс.Метрикой и Google Analytics. 

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

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

Существует 2 основных пикселя, предоставляемых соцсетями — от ВКонтакте и Facebook. Рассмотрим оба способа получения.

Важно! После получения, встраивать пиксель нужно будет на каждую страницу веб-сайта.

Получение пикселя VK

Чтобы получить пиксель соцсети «ВКонтакте»:

 
  1. Перейдите в кабинет управления рекламой.

  2. В левом меню выберите раздел ретаргетинга.

  3. В верхнем меню перейдите в подпункт «Пиксели» .

  4. Нажмите на кнопку создания пикселя.

 

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

 

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

Получение пикселя Facebook 

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

  1. Перейдите в рекламный кабинет социальной сети.

  2. Кликните на меню, оно расположено в левой верхней части.

  3. Выберите подпункт меню «Pixels».

  4. Откроется новая страница. В левом меню кликните «Add new source» и выберите Facebook Pixel.

  5. Укажите название пикселя и URL сайта, для которого предназначен скрипт.

  6. Выберите предпочитаемый способ установки: например, пиксель можно добавить с помощью Google Tags Manager, либо вручную.

Совет: если у вас заблокирован Facebook, используйте VPN или прокси для обхода блокировки. 

Как установить пиксель на разные виды CMS

Установка пикселя на разные системы управления контентом может отличаться. Рассмотрим наиболее популярные CMS и способы добавления пикселя в их структуру.

Обратите внимание: для многих систем управления контентом вам понадобится ID пикселя ВКонтакте или Facebook. Получить пиксель от ВК можно в меню редактирования скрипта:

 

 

Пиксель Facebook можно получить в рекламном кабинете, в верхнем меню вкладке Overview:

 

Предварительно скопируйте идентификатор, он вам еще пригодится.

1С-Bitrix как установить пиксель

Чтобы установить пиксель на CMS «1C-Битрикс»:

  1. Выберите нужный сайт из списка.

  2. Откройте всплывающее меню, нажав на вкладку «Действие». 

  3. Выберите пункт «Настроить».

 

Далее в настройках пролистайте до тех пор, пока не увидите поле «Размещение пикселя». Вставьте скопированный ID в соответствующее поле:

 

 

Tilda как установить пиксель

Для добавления пиксель-кода на сайт, созданный на основе CMS «Tilda»:

 

 
  1. Войдите в ваш аккаунт в системе управления контентом.

  2. Перейдите в настройки сайта, выберите пункт меню «Аналитика». 

  3. Вставьте идентификатор пикселя, предварительно скопированный ранее из соцсети. 

Важно: после установки кода заново опубликуйте страницу, чтобы пиксель добавился в структуру веб-страницы.

Prestashop как установить пиксель

Чтобы добавить пиксель в CMS «Prestashop»:

  1. Войдите в систему.

  2. Откройте настройки сайта, перейдите в папку установленной теме.

  3. Выберите файл header.tpl. Скачайте его, откройте в удобном редакторе кода.

  4. Вставьте код самостоятельно. Его можно получить на странице редактирования (именно код, а не ID). 

  5. Сохраните файл и загрузите его обратно в CMS. Не забудьте выбрать кодировку UTF-8. 

Если у вас возникли проблемы с добавлением пикселя в систему управления контентом — попробуйте почистить кеш или включить в параметрах опцию «Принудительная перекомпиляция» (пункт меню «Производительность»). 

WordPress как установить пиксель

Если вы не собираетесь устанавливать pixel от Facebook, вам придется делать все самостоятельно, без использования сторонних плагинов. Для установки:

  1. Предварительно скопируйте программный код пиксель-скрипта..

  2. Зайдите в административную панель WordPress. 

  3. Перейдите в редактор из меню.

  4. Найдите файл заголовка, обычно он выделен в системе управления контентом как «Заголовок».

  5. Найдите конец тега «</header>» и вставьте программный код прямо перед ним.

  6. Обновите файл.

OpenCart как установить пиксель

Добавлять пиксель придётся самостоятельно. Выполните следующие шаги:

  1. Зайдите в административную панель OpenCart.

  2. Откройте нужный сайт.

  3. Найдите файл header.tpl. Он расположен в папке с вашей темой. 

  4. Скачайте файл и откройте в редакторе кода.

  5. Вставьте код программного обеспечения в тег <head>, перед его концом. 

  6. Залейте файл обратно.

Wix как установить пиксель

Перед установкой пикселя вам понадобится премиум-тариф.  Чтобы добавить программный код на сайт, созданный на CMS:

  1. Войдите в аккаунт в системе управления контентом.

  2. Перейдите в раздел маркетинговых инструментов (Marketing Tools).

  3. Выберите подпункт «Маркетинговые интеграции», прокрутите до самого конца. 

  4. В правом нижнем углу  выберите блок «Pixel VK». 

  5. В правом верхнем углу новой страницы нажмите кнопку «Подключить ВК».

  6. Откроется pop-up окно. Введите в него ID от пикселя. Его можно получить в РК ВКонтакте через редактирование скрипта.

  7. Нажмите кнопку «Apply».  

Алгоритм для получения пикселя Facebook:

  1. Войдите в учетную запись Wix.

  2. Перейдите в раздел Marketing Tools.

  3. Выберите пункт «New Tool» и пункт вставки пикселя от Facebook.

  4. Укажите цифровой ID.

  5. Нажмите кнопку «Apply». 

Итоги

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

Но перед подключением его на сайт убедитесь, что он прогружается на 100-500 мс позднее и не забивает основной поток сайта, иначе это может привести к замедлению скорости загрузки — все-таки, pixel это сторонний скрипт и его надо устанавливать аккуратно. 

Читайте далее
Разработка
Как провести нагрузочное тестирование: по шагам на примере сайта Alto
Как провести нагрузочное тестирование сайта
Разработка
Как провести автоматическое тестирование сайта: кейсы, что нужно
Как провести автоматическое тестирование сайта
Разработка
Настраиваем web-сервера, nginx и apache на одном сервере
Настраиваем веб-сервер — nginx и apache на одном сервере
Разработка
Инструкция по работе с Gulp: установка, создание проекта, основные команды
Что такое Gulp: инструкция по работе с Gulp
Разработка
Подключение JS в Bitrix: все способы в системе управления 1С-Битрикс
Как подключить JS в Bitrix
Разработка
Резервное копирование и восстановление сайта на 1С-Битрикс: все способы восстановления и создания бэкапа
Резервное копирование и восстановление сайта на 1С-Битрикс
Разработка
Как перенести сайта Битрикс на другой хостинг: пошаговая инструкция
Перенос сайта Битрикс на другой хостинг
Разработка
Как добавить пиксель на сайт своими руками в 2022 году?
Как добавить пиксель на сайт
Разработка
Кэширование данных в Bitrix: настройка, как это работает, что это такое
Кэширование данных в Bitrix
Разработка
Cron в Битриксе - функционал Агентов для регулярных задач
Cron в Битриксе