ManyChat Help Portal
Submit a ticket

Обзор

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

Как это работает

Для работы пикселя ManyChat необходимо выполнить несколько действий — они нужны для сбора данных из внешних ресурсов.

  1. Создайте кнопку с вариантом «Открыть сайт», чтобы направлять контактов на внешний ресурс.
    • Теперь каждый контакт, нажавший на эту кнопку, будет неявным образом получать дополнительный параметр URL «mcp_token» (например, https://mysite.com/?utm_source=manychat&utm_medium=cpa&mcp_token=12312314232yg123jh1g3j1g23u12y3). В параметре MCP_token сохраняются шифрованные метаданные, идентифицирующие этого контакта и его действия на вашем сайте.
  2. Установите пиксель ManyChat (инструкция приведена ниже). На современных сайтах скрипт можно установить один раз для всего сайта, поскольку блок <head>...</head> обычно общий для всех страниц, впрочем, если вы не уверены, вы можете установить скрипт на каждую страницу, с которой вызываются события.
  3. Добавьте на сайт функции регистрации событий и передавайте в них корректно сформированные параметры (инструкция приведена ниже).
    Важно!!! Чтобы пиксель правильно сработал в первый раз, пользователь должен перейти на сайт с установленным пикселем из Messenger. После этого для пользователя создается сессия, действующая 28 дней. В течение этой сессии событие будет срабатывать каждый раз, когда пользователь будет посещать сайт с пикселем, в том числе если пользователь приходит не из Messenger.

Установка пикселя ManyChat

Прежде всего обратите внимание, что эта функция доступна только на тарифе Pro! Прежде чем устанавливать пиксель, не забудьте перейти на тариф Pro! Вот как это делается.

Шаг 1

Перейдите в раздел «Настройки → Пиксель». Должен появиться блок кода:

Шаг 2

Скопируйте код пикселя ManyChat и вставьте его на свой сайт:

<head>
...
<!-- ManyChat -->
<script src="//widget.manychat.com/100949504624148.js" async="async"></script>
</head>

Важно! Фрагмент из этой статьи работать не будет, копировать нужно код из вашего аккаунта ManyChat.

Настройка событий на сайте

Пиксель ManyChat поддерживает события двух типов: события конверсии и финансовые события. Чтобы вызвать срабатывание события, необходимо использовать правильную встроенную функцию и передать в нее необходимые параметры.

  1. Функция window.MC_PIXEL.fireLogMoneyEvent()  принимает 3 параметра: имя события, вес события и валюту (этот параметр можно опустить, тогда ManyChat по умолчанию будет использовать 'USD'). Готовая функция будет выглядеть следующим образом: window.MC_PIXEL.fireLogMoneyEvent('my_book_purchase', 10.7, 'EUR'). Таким образом вы указываете ManyChat, что необходимо записать в журнале, что контакт только что купил что-то за 10,7 евро. Можно использовать уже существующее имя события или ввести новое — в таком случае ManyChat создаст событие с этим новым именем.
  2. Функция window.MC_PIXEL.fireLogConversionEvent() принимаете один единственный параметр — имя события. Готовая функция будет выглядеть следующим образом: window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked'). Это даст ManyChat понять, что на вашем сайте что-то произошло, например посетитель нажал на определенную кнопку или ссылку. Можно использовать уже существующее имя события или ввести новое — в таком случае ManyChat создаст событие с этим новым именем. 

Примеры

Попробуем добавить события в журнал! Существует два популярных способа регистрации события: когда посетитель загружает определенную страницу (например, «страницу успешной оплаты») или нажимает на определенную кнопку или ссылку (например, «Подробнее» или «Купить»).


Регистрация события при завершении загрузки страницы
<!-- Этот синтаксис будет вызывать срабатывание события, когда страница полностью загрузится --> <body onload="window.MC_PIXEL.fireLogMoneyEvent('my_book_purchased', 10.7, 'EUR')"> ... </body>

Регистрация события при нажатии посетителем определенной кнопки или ссылки
<!--  Этот синтаксис будет вызывать срабатывание события, когда посетитель нажмет на кнопку -->
<button onclick="window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked')">
...
</button>
<!-- Этот синтаксис будет вызывать срабатывание события, когда посетитель нажмет на ссылку -->
<a href="#" onclick="window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked')">
...
</a>

Регистрация нескольких событий
<!-- Иногда бывает необходимо зарегистрировать несколько событий, особенно когда что-нибудь происходит 
(например, чтобы отправить события в несколько сторонних систем). В таком случае следует создать новую функцию,
инкапсулирующую несколько методов, и использовать ее -->
<body>
<!-- Этот скрипт создает функцию "myLogger()", 
которая при вызове совершает 3 действия: 
1. Вызовите событие в ManyChat
2. Введите в консоли слово «test» (консоль в инструментах разработки)
3. Откроется модальное окно со словом «test» 
Разумеется, вы можете изменить этот код так, чтобы срабатывало несколько событий -->
<script>
function myLogger() {
window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked');
console.log('test');
alert('test');
}
</script>
<!-- Здесь объявляется вызов функции "myLogger()" при нажатии на кнопку -->
<button onclick="myLogger()">
...
</button>
</body>

Резюме

Краткая инструкция выше — всё, что нужно для начала. Разумеется, существует много способов использования пикселя (можно даже назвать его SDK) — например, вы можете вызывать эти функции из своих собственных функций, чтобы преобразовывать данные, прежде чем отправить их в ManyChat. Однако об этом придется рассказать в другой раз.