Как настроить пиксель Фейсбук Тильда 🎯 события через ГТМ

Пиксель Фейсбук на Тильде позволяет отслеживать аудитории и оптимизировать рекламу Фейсбук/Инстаграм под значимые сегменты.

Если у вас магазин на Тильде, вам позарез пригодятся стандартные события Фейсбука, которые мы с легкосью настоим при помощи Гугл Тег Менеджера (ГТМ).

Настроить события пикселя Фейсбук на Тильде — это просто

Потому что Тильда предусмотрела многое и отправляет значимую информацию со страницы через dataLayer. Мы имеем преднастроенными такие события:

• addToCart — когда пользователь жмет «Заказать» в карточке товара.
• initiateCheckout — оформление карточки заказа
• purchase — когда происходит отправка формы заказа.

Преднастроенные — значит все уже есть на вашем сайте Тильда, надо только вынуть это при помощи ГТМ.

1. Исследуем страницу Tilda при помощи Гугл Тег Менеджера

ГТМ уже установлен на сайт. Включаем режим предварительного просмотра и в том же браузере обновляем ваш сайт. Идем по шагам пользователя и доходим, допустим, до кнопки «Заказать». Нажимаем.

Дальше в Дебаг меню ГТМ, которое должно было открыться снизу на сайте, переходим во вкладку dataLayer и видим там примерно следующее:

Если вы еще в танке: представленная информация есть на вашем сайте (доступна), надо теперь ее передать в Гугл Тег Менеджер, а через него — использовать для стандартных событий Фейсбук. Или для любых других целей, например, передавать конверсии в Гугл Аналитикс.

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

Примерно так будет выглядить блок событий Фейсбук в вашем ГТМ после настройки:

Тут есть:

• базовый пиксель для отслеживания на всех страницах
• событие ViewContent — просмотр карточки товара
• AddToCart — уже знаем
• Purchase — уже знаем

Справа мы видим триггеры — условия, созданные внутри ГТМ, по которым должны срабатывать (отправляться в Фейсбук) те или иные события.

2. Установка базового пикселя Фейсбук-Инстаграм на Тильду

Тут долго нечего останавливаться. Берем из Рекламного аккаунта код вашего Пикселя ФБ:

• Если нет пикселя: создаем его в Ads Manager и копируем вручную.
• Если пиксель уже есть: заходим в Events Manager / Детали / Настройка / Установить пиксель и копируем код.

Далее в Гугл Тег Менеджере создаем кастом HTML тег с тригером по умолчанию Все страницы. И это все по пикселю.

3. Подключаем Стандартные события Фейсбук на Тильде

Стандартные события так называются, потому что они уже как-бы заданы Фейсбуком: заявка, лид, покупка, подписка и т.д.

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

3.1 Add To Cart событие на Tilda

В ГТМ создаем новый тег с названием FB — AddToCart (или ViewContent, Purchase) и типом кастом HTML, добавляем данные:

<script>
fbq('track', 'AddToCart');
</script>

В качестве триггера к тегу AddToCart создаем триггер типа кастомное событие со значением addToCart (внимание, с маленькой буквы!):

Готово.

3.2 Событие Фейсбук ViewContent на Тильде

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

На Тильде это действие — открытие карточки товара (открывается во всплывающем окне на той же странице).

Чтобы подобрать триггер к открытию карточки можно в режиме отладки ГТМ, собственно, открыть карточку. Затем выбрать нужное событие (Click) и посмотреть информацию по нему в Variables:

Вполне подходящим условием является класс клика t-store….. Главное, убедиться, чтобы это было какое-то уникальное значение для сайта.

Теперь создаем триггер (условие) для просмотра нашей карточки:

Данный тригер прилинковываем к нашему тегу FB — ViewContent — и готово.

Да, если вдруг после клика на сайте в режиме отладки ГТМ вы не видите событий Click в левом столбце, это значит у вас «пустой» контейнер. Нужно создать триггер с типом Клики на все элементы. Просто создать, никуда не прилинковывая. Потом его можно будет удалить.

3.3 Стандартное событие Покупка для сайта на Тильде

Рассмотрим добавление самого заковыристого тега Purchase, в котором мы будем передавать динамический параметр — цену заказа. Вот так выглядит тег покупки Фейсбук в ГТМ:

Но что это за {{dlv — price}} вместо цены?

{{dlv — price}} — это переменная ГТМ, которую нужно создать и настроить в соответствии с данными dataLayer вашего сайта (смотрим выше про Data Layer).

А выше был такой страшный блок про ecommerce {…} с кучей скобок. Это называется JSON данные.

Есть специальная методика, как вычленять из древовидной структуры JSON нужный параметр. Нам нужен параметр price. Решение такое:

• ecommerce.add.products.0.price

Если объяснять на пальцах, каждая точка подразумевает уровень вложенности в дереве JSON файла. «.0.» мы пишем, чтобы в определенном месте перескочить один уровень там, где надо. Хотите понять это получше, гуглите классного парня из analyticsmania.com.

Далее в ТегМенеджере на вкладке «Переменные» создаем новую переменную dlv — price с типом «переменная уровня данных»:

Круто. Теперь можно эту переменную использовать для нашего основного тега FB — Purchase. Если вы его еще не создали, то идем в Теги / Создать новый и пишем кастом HTML скрипт:

<script>
  fbq('track', 'Purchase', {value: {{dlv - price}}, currency: 'RUB'});
</script>

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

Триггер к тегу покупки на Тильде будет сделан на основе данных из dataLayer. Делаем триггер на кастом событие = «purchase».

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

Что дальше? Больше аналитики

Эй, а кто сказал, что надо ограничиваться отправкой данных в Фейсбук?!

Мы проделали главное — нашли подходящие триггеры для ключевых событий на сайте.

Теперь можно отправлять информацию по ним куда угодно: в Яндекс Метрику, Гугл Аналитикс и проч.

Конверсии в Гугл Аналитикс

Надо просто скопировать все теги ГТМ длф Фейсбук и поменять настройки. Все триггеры оставляем, как есть:

А так будет выглядеть тег Гугл Аналитикс на событие AddToCart:

Поскольку мы сменили тип триггера, пришлось заполнить поля Event (тип отслеживания) и Категория и Действие (лейбл опциональный).

Как видите, для Действия (Event Action) я решил дальше эксплуатировать насыщенный Тильдовский уровень данных, и создал дополнительную переменную name, в которой будет динамически передаваться название товара.

Но это немного другая история, поэтому с настройкой ГТМ под Тильду я закругляюсь. Читайте также про настройку целей ГА при помощи ГТМ.

Больших конверсий и жирных лидов!