Как подключить Facebook PIXEL к сайту на ТИЛЬДЕ

🗓️ Обновлено: 16.08.2021
💬Комментариев: 0
👁️Просмотров: 2347
web

В современной digital среде трудно себе представить сайт без подключения аналитики, Google Tag manager и Facebook Pixel. Без них сложно будет понять потребности аудитории сайта, их вовлеченность, отследить их действия и в дальнейшем конвертировать посетителя в клиента.

Собственно, Facebook Pixel создан для привлечения трафика и соц. сетей Facebook и Instagram. Речь идет, как о прямой рекламе продукта в соц.сетях, так и о «догонке» посетителей при помощи ремаркетинга.

Итак, что же нужно сделать, чтоб подключить Facebook Pixel к сайту на Tilda:

  1. Создание пикселя
  2. Подключение пикселя к Тильде
  3. Проверка работы Пикселя

Создание Пикселя

Перейдите по ссылке business.facebook.com/select. Если у вас есть уже созданная компания, в которой будет установлен пиксель, то выберите ее. Если нет, Создайте новую компанию:

После создания Новой компании, вам необходимо зайти во Все инструменты в меню слева и найти там раздел Events Manager:

Затем в панели слева нажмите зеленый Плюсик:

Теперь необходимо Подключить источники данных:

В новом диалоговом окне Facebook предложит вам варианты источников данных. Вам нужно выбрать источник «Интернет» и нажать кнопку Подключить:

После чего выберите Пиксель Facebook и нажмите кнопку «Подключить»:

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

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

Кстати, если вы предпочитаете более сложные варианты, то можно скопировать код пикселя и в настройках сайта на Тильде вставить полученный код в Head сайта. Для этого перейдите в Настройки сайта -> Еще -> HTML-код для вставки внутрь HEAD.

Итак, пиксель создан, теперь нам нужен его идентификатор. Взять его можно под названием пикселя в панели всех источников данных, как показано на скриншоте ниже:

Скопируйте этот идентификатор и дальше перемещаемся в Тильду.

Подключения пикселя к Тильде

Получив идентификатор Pixel, вам необходимо перейти в настройки сайта, на который будет поставлен этот Пиксель:

Перейдите в раздел Аналитика в левом меню:

Затем нужно найти раздел Facebook Pixel и ввести скопированный вами идентификатор:

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

Как проверить подключение Facebook Pixel к Тильде

Для проверки рекомендую использовать расширение Google Chrome от Facebook:

Facebook Pixel Helper

Установите себе это расширение, оно во многих вещах по работе с facebook и сайтом вам пригодится.

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

В панели управления компаниями Facebook вы также можете протестировать работу Пикселя. Для этого вернитесь в кабинет Facebook. Выберите созданный вами пиксель и нажмите на вкладку Тестирование событий. Введите адрес своего сайта и нажмите кнопку «Открыть сайт»:

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

После этого, вернитесь в кабинет Фейсбука и вы увидите все действия, которые были замечены базовыми настройками Пикселя. В моем случае вот такие:

Через минут 10 после установки пикселя (может быть и меньше) вы сможете перейти на вкладку Обзор, где будет отображена вся информация по взаимодействиям с сайтом в рамках работы пикселя:

Ничего сложного, но сколько всего можно сделать с помощью установки фейсбук пикселя на Тильду.

Видео

На всякий случай, скидываю вам видео про подключение фейсбук пикселя к сайту на Тильде. В видео есть все наглядные примеры и способы подключения, о которых говорилось в статье

А у вас все получилось?

Статья была полезной?
👍
Да - 1
👎
Нет - 1
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 56405
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 42569
Появление элементов при скролле
Просмотров: 41850
Как выровнять картинку по центру с помощью CSS
Просмотров: 29193
Как изменить цвет SVG в CSS
Просмотров: 29074
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Цвет 2023 года
Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.
#bb2649