Установка Facebook Pixel на сайт

Михайленко
  • 267
  • 0

Маркетинговые исследования показывают, что 49% специалистов признают социальные медиа самым эффективным digital-каналом. Но в то же время его считают сложным в реализации.

Facebook доминирует в мире, а по охвату в СНГ уступает только ВК, но ситуация стремительно меняется в пользу первого. Потому реклама в Фейсбуке сейчас очень хороша. То и дело мы слышим о кейсах, которые подняли ROI/любой другой KPI проекта в сотни раз, и, конечно, хотим ощутить такой прирост сами. А когда некоторые рекламные каналы отпадают по независящим от нас причинам, возникает задача разнообразить свою маркетинговую стратегию. Этот же вопрос актуален и для тех, кто испытывает застой или потерю трафика, снижение конверсии и т.п.

Фейсбук-пиксель что это?

Где реклама, там и аналитика. Чтобы деньги не ушли в никуда, понадобится Facebook Pixel. Это небольшой код отслеживания на JS, встраивающий на сайт 1px-ное изображение для сбора информации, работы с аудиторией и повышения эффективности рекламных кампаний в соответствующей соцсети. После добавления кода на сайте ничего видимого не появится, он будет отправлять посетителям куки и отслеживать действия, чтобы потом использовать их для ретаргетинга. Этот способ рекламы сейчас считается одним из самых дешевых, т.к. направлен на заинтересованную аудиторию. Суть примерно в следующем: фиксируется заход человека на сайт и его поведение, далее этому посетителю показывается реклама сайта в его фейсбучной ленте. Все остальное зависит от настроек, которые будут заданы.

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

Сегментация – создание аудиторий под ваши цели.

Пиксель собирает информацию о людях, посетивших нужные вам страницы сайта или выполнивших желаемое действие, которые при этом являются пользователями ФБ. Из них создается индивидуализированная аудитория.

Аналитика – отслеживание целевых действий на сайте.

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

Оптимизация – повышение эффективности рекламы.

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

Чтобы начать пользоваться всеми благами Пикселя Facebook, нужно внедрить его в ваш сайт.

Как установить Пиксель Фейсбука на сайт

Данный пример справедлив для OkayCMS, а также может быть совместим с другими системами.

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

2. Откройте шаблон вашего сайта и вставьте код в шапку перед закрывающим тегом </head>. Он должен быть на каждой странице.

Базовый код имеет такой вид, и его не нужно изменять:

<!-- Facebook 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', 'ВАШ ID'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1266641596747951&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

После того как основной код установлен, данные о посетителях и просмотрах страницы (PageView) уже собираются.

  1. Добавьте коды стандартных событий сайта, которые умеет отслеживать пиксель. Они размещаются на целевых страницах между тегами скрипта в коде пикселя:
  • Просмотр содержимого страницы (ViewContent);
  • Поиск (Search);
  • Добавление в корзину (AddToCart);
  • Добавление в список желаний (AddToWishlist);
  • Начало оформления покупки (InitiateCheckout);
  • Добавление платежной информации (AddPaymentInfo);
  • Совершение покупки (Purchase) – здесь хорошо будет настроить пареметры value – цена и currency – валюта, в которой она считается.
  • Лид (Lead);
  • Завершение регистрации (CompleteRegistration).

ViewContent, AddToCart и Purchase (воронка) обязательны для динамического ремаркетинга.

Существует 3 типа события (обычный, расширенный и рекомендуемый). Если никаких указаний от клиента не было, ставим рекомендуемый вариант.

Примеры того, как может выглядеть установленный код:

{if $smarty.get.module == "ProductView" || $smarty.get.module == "ProductsView" || $smarty.get.module == "MainView"}
    <script>
        $(document).on('submit', '.fn-variants.okaycms', function(e) {
            e.preventDefault();
            if($(this).find('input[name=variant]:checked').size() > 0 ) {
                variant = $(this).find('input[name=variant]:checked').val();
            } else if($(this ).find('input[name=variant]').size() > 0 ) {
                variant = $(this).find('input[name=variant]').val();
            } else if($(this).find('select[name=variant]').size() > 0 ) {
                variant = $(this).find('select[name=variant]').val();
                price = $(this).find('select[name=variant] option:selected').data("price");
            } else if($(this).closest('.product_inner').find('select[name=variant]').size() > 0 ) {
                variant = $(this).closest('.product_inner').find('select[name=variant]').val();
                price =  $(this).closest('.product_inner').find('select[name=variant] option:selected').data("price");
                /* Кол-во */
            }
            fbq('track', 'AddToCart', {
                content_ids: variant,
                content_type: 'product',
                value: price,
                currency: 'UAH'
            });
        });
 
    </script>
{/if}
 
{if $smarty.get.module == "ProductView"}
    <script>
        fbq('track', 'ViewContent', {
            content_ids: '{$product->id}',
            content_type: 'product',
            value: {$product->variant->price|convert},
            currency: 'UAH'
        });
    </script>
{/if}
{if $smarty.get.module == "BlogView" && $post}
    <script>
        fbq('track', 'ViewContent', {
            content_ids: '{$post->id}',
            content_type: 'article'
        });
    </script>
{/if}
{if $smarty.get.module == "CartView"}
    <script>
        fbq('track', 'InitiateCheckout');
    </script>
{/if}
{if $smarty.get.module == 'OrderView'}
    {literal}
        <script>
        fbq('track', 'Purchase', {
        value: {/literal}{$order->total_price}{literal},
        currency: 'UAH',
        content_ids: [{/literal}{foreach $purchases as $purchase}'{$purchase->product_id}'{if !$purchase@last},{/if}{/foreach}]{literal},
        content_type: 'product',
        });
        </script>
 
    {/literal}
{/if}

Чтобы использовать всю собранную информацию для ремаркетинга, настраиваются аудитории. На соответствующей вкладке → создать новую индивидуально настроенную аудиторию → выбрать тип «Трафик веб-сайта» → уточнить сегмент:

  • все посетители сайта;
  • пользователи, побывавшие на определенных страницах;
  • только пользователи, которые посещают определенные страницы;
  • пользователи, которые не были на сайте заданный период;
  • кастомная аудитория.

И далее добавляется то, что потребует выбранный пункт: URL, время и т.д. При необходимости задаются исключения.

Какое-то время пройдет, пока Facebook начнет собирать аудитории и наберет 20+ человек. Данные появятся не сразу. Это норма, но убедиться, что пиксель активен необходимо. О том, что ваш код работает, можно узнать из специального дополнения для Хрома.

Результат будет выглядеть примерно вот так:

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

Если вы совсем не в теме, чтобы не остаться без столь полезного инструмента, обращайтесь за настройкой к нашим специалистам.

 

 

Заказать установку Pixel

Рассказать друзьям:


Написать комментарий

captcha

Пока нет комментариев