Настройка отслеживания кнопок через код без страницы "Спасибо" в Facebook

Бывает, что при настройке конверсии на лендинге для Фейсбука необходимо отслеживать нажатие определенных кнопок (например, переход в Telegram или Whatsapp), расположенных на главной странице, т.е. странице, на которую идет трафик. А, так называемой, страницы "Спасибо" (на которую осуществляется переход после совершения конверсии) не предусмотрено.

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

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

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'ВАШ_PIXEL_ID');
fbq('track', 'PageView');

document.addEventListener('DOMContentLoaded', function() {
    var joinButton = document.querySelector('a[href*="ВАШ_ДОМЕН"]');
    if (joinButton) {
        joinButton.addEventListener('click', function() {
            fbq('track', 'Lead');
        });
    }
});
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=ВАШ_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>
<!-- End Meta Pixel Code -->

В коде есть строка, отвечающая за поиск ссылки или кнопки:

var joinButton = document.querySelector('a[href*="ВАШ_ДОМЕН"]');

Здесь ВАШ_ДОМЕН – это часть ссылки, по которой система определяет нужный элемент.

Как настроить под свой случай?

- Если отслеживаем Telegram, меняем ВАШ_ДОМЕН на t.me:

document.querySelector('a[href*="t.me"]');

Пример ссылки: https://t.me/yourchannel

- Если отслеживаем WhatsApp, используем wa.me:

  document.querySelector('a[href*="wa.me"]');

Пример ссылки: https://wa.me/123456789

- Если отслеживаем Instagram, используем instagram.com:

document.querySelector('a[href*="instagram.com"]');

Пример ссылки: https://instagram.com/yourprofile

Что делать, если кнопка не ссылка?

Если кнопка не является ссылкой <a>, а имеет id="join-button", то нужно указать ID кнопки:

document.querySelector('#join-button');

Это сработает для кнопки вида:

<button id="join-button">Присоединиться</button>

Как отслеживать несколько ссылок сразу?

Если нужно отслеживать сразу несколько платформ (например, Telegram и WhatsApp), используем querySelectorAll:

document.querySelectorAll('a[href*="t.me"], a[href*="wa.me"]');

Так Facebook Pixel будет фиксировать клики и на Telegram, и на WhatsApp.