Piksel Facebook – co to i jak działa?

Piksel Facebook – co to jest i jak działa?

Piksel Facebooka – brzmi niewinnie, a może odmienić sposób  w jaki patrzysz na Facebook Ads. To on umożliwia remarketing w kampaniach reklamowych na Facebooku, czyli docieranie z reklamą do osób które miały już styczność ze stroną internetową, a nawet dokonały konkretnych akcji.

Piksel to krótki skrypt (stworzony przy użyciu języka programowania JavaScript), który należy umieścić w końcówce sekcji Head twojej witryny.

(Dalszą część artykułu znajdziesz pod formularzem)

Zasada działania: piksel Facebook rejestruje osobę, która odwiedziła stronę internetową, a następnie próbuje powiązać ją z kontem na portalu Facebook. Gdy proces zakończy się pomyślnie, możesz umieścić taką osobę na swojej liście remarketingowej i wyświetlać jej reklamy na Facebooku.

Sam kod wygląda tak (każdy wygląda tak samo z wyjątkiem numeru ID danego piksela):

<!– Facebook piksel 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’, ’numer_ID_twojego_piksela’);

 fbq(’track’, 'PageView’);

</script>

<noscript><img height=”1″ width=”1″ style=”display:none”

 src=”https://www.facebook.com/tr?id=numer_ID_twojego_piksela&ev=PageView&noscript=1″

/></noscript>

<!– End Facebook piksel Code –>

To wszystko! Kilkanaście linijek, które potrafi zdziałać cuda w Twoich działaniach marketingowych, oczywiście w ramach platformy Marka Zuckerberga.

Piksel Facebook – czy Twoje kampanie go potrzebują? 

Jak już wspomniałem, piksel umożliwia docieranie z reklamą na Facebooku (ale również Instagramie, Messengerze i Audience Network) do osób, które weszły wcześcniej na Twoją stronę internetową. Dzięki temu możesz utworzyć tzw kampanie remarketingowe, których celem może być np. konwersja na stronie (w końcu osoby, które znają już twoją markę i odwiedziły stronę, chętniej dokonają konwersji niż osoba która marki nie zna) lub powrót do koszyka zakupowego w sklepie ecommerce – Tak, dzięki pikselowi możemy docierać do osób, które opuściły koszyk zakupowy!

Takich grup opartych o piksel można wymyślać dziesiątki:

• • Osoby, które odwiedziły Twoją stronę w ciągu ostatnich 7 dni? Nie ma problemu.

• • Osoby, które odwiedziły formularz ale go nie wysłały? Tak, piksel da Ci tę możliwość.

• • Osoby, które wczoraj opuściły koszyk? Trudno o lepszą grupę pod sprzedaż Twoich produktów!
  • Osoby, które odwiedziły Twoją stronę w ciągu miesiąca więcej niż 4 razy? jak wspomniane w tytule – piksel to tajna broń reklamy na Facebooku. 🙂

Warto wspomnieć, że piksel, choć zbiera dane, nie przechowuje ich w nieskończoność. Maksymalny zakres czasu magazynowania informacji o użytkowniku to 180 dni.

Więcej o Tworzeniu grup remarketingowych na Facebooku w tym wpisie.

Skąd nazwa “PIKSEL”?

Gdy przeglądarka blokuje skrypty piksela, ten nie może poprawnie zarejestrować danych o użytkowniku. Na końcu kodu znajduje się jednak kilka linijek, które zapobiec mają takiej sytuacji. Gdy kod jest blokowany, skrypt, który znajduje się w tagach <noscript></noscript> umieszcza na stronie niewidoczną grafikę w formie piksela o wysokości i szerokości równej 1. Gdy ten mini-obraz zostanie wyświetlony, informacja zostanie przesłana do niebieskiej platformy.

Piksel to jedno, ale czym są jego zdarzenia?

Sam podstawowy kod piksela, który został pokazany na początku tego artykułu, nie umożliwia nam śledzenia wszystkich interakcji na stronie. Sam “basic” kod umożliwia tworzenie grup opartych o link (URL). Oznacza to, że dotrzesz do osób, które załadowały konkretne linki w przeglądarce np. stronę główną lub zakładkę Kontakt. Nie możesz dotrzeć jednak do osób, które np. kliknęły przycisk “dodaj do koszyka” czy dokonały zakupu lub wysłały formularz (teoretycznie mógłbyś posłużyć się zdarzeniami niestandardowymi, ale o tym jak i kiedy z nich korzystać w następnych wpisach).

Tego typu AKCJE na stronie pozwalają mierzyć zdarzenia piksela. Są to dodatkowe kody umieszczone na konkretnych stronach lub przyciskach witryny internetowej (Osobiście myślę o nich jak o dzieciach piksela – mniejsze niż sam pixel i rozproszone po całej witrynie).

Przykłady zdarzeń które uruchamiają się po załadowaniu strony:

• • Zakup (Purchase) – zdarzenie umieszczone przeważnie na tzw. “Thank you page”, czyli stronie, która pokazuje się po dokonaniu płatności w sklepie.

• • Wyświetlenie Zawartości (ViewContent) – Zdarzenie, które odpala się na stronie z daną zawartością, np. na stronie postów na blogu lub stronach produktów w sklepie internetowym.
  • Dodaj informacje o płatności (AddPaymentInfo) – Przekazuje informacje o otworzeniu strony, na której użytkownik dodaje swoje informacje płatnicze podczas realizacji zamówienia.

Przykład zdarzeń umieszczonych na przyciskach:

• • Dodaj do koszyka (AddToCart) – Gdy ktoś dodał przeglądany przedmiot do koszyka przez wciśnięcie przycisku.

• • Kontakt (Lead) – Wysyłający informacje o przekazanym leadzie po kliknięciu przycisku “wyślij” w formularzu kontaktowym
  • Subskrybuj (Subscribe) – przy kliknięciu przycisku który umożliwia subskrybcje.

Każde zdarzenie można umieścić na stronie lub przycisku, powyżej umieściłem jedynie przykłady zdarzeń oraz miejsc, w których przeważnie się je instaluje. Zdarzenia Wyświetlenie Zawartości oraz Dodanie do koszyka mogą znajdować się na tej samej stronie – np. stronie z konkretnym modelem butów w sklepie online.
Pierwsze zdarzenie uruchomi się gdy po prostu użytkownik otworzy zakładkę z danym modelem i będzie go oglądał (stąd “wyświetlenie”), a drugi – czyli dodanie do koszyka – odpali się dopiero gdy klient naciśnie przycisk dodający buty do koszyka. Stąd rozróżnienie instalacji kodu tak, by uruchomił się po załadowaniu strony lub po wciśnięciu przycisku.

Pomyśl w którym miejscu na Twojej stronie mogłyby być zainstalowane zdarzenia.

W dużej mierze zależy to od budowy strony – jeśli przykładowo, po wysłaniu formularza na Twojej stronie nie zmienia się zakładka strony a pojawia się tylko komunikat o wysłaniu wiadomości, będziesz mógł zainstalować zdarzenie Lead jedynie na przycisku “wyślij”.

W innym przypadku mógłbyś umieścić zdarzenie na stronie “Thank you page” po wysłaniu formularza kontaktowego.   

Piksel i zdarzenia – skąd je wziąć?

Kod piksela i jego zdarzenia wygenerować możesz w menedżerze reklam Facebooka, przechodząc do zakładki “piksele” z rozwijanego menu. Jeśli nie utworzyłeś wcześniej piksela, Twoim oczom ukaże się zielony przycisk “Utwórz Piksel”. Postępując zgodnie z instrukcją, dotrzesz do momentu gdzie skopiować będziesz mógł swój indywidualny kod piksela, a w następnej zakładce znajdziesz skrypty zdarzeń.

Same skrypty zdarzeń są jeszcze krótsze niż kod piksela. Przykładowe zdarzenie “Dodanie do koszyka” (AddToCart):

<script>

 fbq(’track’, 'AddToCart’);

</script>

Powyższe zdarzenie będzie zawierać jedynie informację o dodaniu produktu do koszyka. Jeśli chciałbyś dodatkowo monitorować jaki konkretnie produkt o jakiej wartości został dodany, będziesz musiał dodać do zdarzenia jego parametry. (co umożliwi Ci remarketing dynamiczny).

Przykładowe zdarzenie wraz z parametrami, które niosą ze sobą informacje o produkcie będzie wyglądać w ten sposób:

<script>

 fbq(’track’, 'AddToCart’, {

   value: 159,

   currency: 'PLN’,

   content_ids: '12313212′,

   content_type: 'buty’,

 });

</script>

Jak widzisz, zdarzenie wyśle informację nie tylko o tym, że dodano produkt do koszyka ale również informacje o produkcie: produkt o wartości 159 PLN o identyfikatorze produktu: 123123123 i rodzaju “buty”.

Co to daje? A to, że do konkretnej osoby, która przeglądała lub dodała produkt do koszyka, możesz dotrzeć z reklamą pokazującą dokładnie ten produkt (remarketing dynamiczny).

Osoba ogląda produkt Y na stronie internetowej → na Facebooku następnie pokazuje jej się reklama właśnie z produktem Y.

Pamiętaj że zdarzenia będą działać tylko wtedy, jeśli zainstalowałeś wcześniej kod piksela!  

Piksel i zdarzenia – instalacja na stronie

Sam podstawowy kod piksela przywołany na początku tego artykułu, czyli kod w którym znajdują się również jego numer ID, instaluje się na końcu sekcji Head strony, tak jak w przykładzie poniżej:

<!– Przykład –>

<!DOCTYPE html>

<html lang=”PL”>

<head>

<script>…</script>

wstaw_tu_kod_piksela

</head>

Zdarzenie natomiast instaluje się na początku sekcji Body na konkretnej stronie, jeśli to ma uruchomić się po załadowaniu strony:

<!– Koniec kodu piksela Facebooka –>

</head>

<body>

<script>wstaw_kod_zdarzenia_tutaj</script>

Jeśli zdarzenie ma uruchomić się po wciśnięciu przycisku:

<button id=”addToCartButton”>Dodanie do koszyka</button>

<script type=”text/javascript”>

document.getElementById(addToCartButton).addEventListener(’click’, function() {

wstaw_tu_kod_zdarzenia;

…

}, false);

</script>

Dedykowane integracje

Jeśli korzystasz z konkretnych systemów na których oparta jest witryna internetowa, możesz skorzystać z dedykowanych integracji. Przykładowo, jeśli Twoja strona postawiona jest na WordPressie, nie musisz “grzebać” w kodzie by dodać skrypt. Wystarczy że ściągniesz wtyczkę np. Tracking Code Manager i tam wkleisz kod, który wygenerowałeś w menedżerze reklam. Z menedżera reklam możesz też pobrać zapakowany plik z pikselem którą wystarczy zainstalować jako wtyczkę na WordPressie.

Pomocnym narzędziem do instalowania jakichkolwiek kodów na stronie może okazać się Google Tag Manager. Dzięki temu narzędziu zainstalujesz również zdarzenia piksela.

Pixel Helper – sprawdź czy Twoja konkurencja używa piksela!

A gdyby tak zobaczyć czy Twoja konkurencja korzysta z piksela, a co więcej, sprawdzić jakich zdarzeń używa i w którym miejscu na stronie ma je zaimplementowane? Nic trudnego! Jeśli korzystasz z przeglądarki Chrome, zainstalować możesz wtyczkę Pixel Helper – darmową wtyczkę która pozwoli ci sprawdzić czy na dowolnej stronie zainstalowany jest piksel i czy zostało to zrobione prawidłowo. Znajdując się na stronie na której chciałbyś zbadać czy znajduje się piksel, wystarczy że aktywujesz wtyczkę, a ta pokaże Ci informacje o pikselu i zdarzeniach na aktualnie otwartej stronie.

Jak w grafice powyżej, Pixel Helper poinformuje Cię ile pikseli znajduje się na stronie (bo może być ich nawet kilka), jakie jest ich ID oraz jakie zdarzenia aktualnie działają. Na grafice widać, że na stronie zainstalowany jest jeden piksel, a zdarzenie, które rejestruje dane to zdarzenie PageView – informujące o odwiedzeniu strony. Zdarzenie to jest jedynym, które znajduje się bezpośrednio w podstawowym kodzie piksela. Resztę zdarzeń należy zaimplementować osobno.

Facebook Marketing Consultants

W ostatnim czasie Facebook uruchomił program skupiający ekspertów z całego świata, zajmujących się maksymalizowaniem efektywności reklam właśnie na tej platformie z wyszczególnieniem implementacji kodów piksela i jego zdarzeń, ustawianiem katalogów oraz innych technicznych aspektów kampanii reklamowych na Facebooku.

Od Marca 2019 Verseo znajduje się na liście konsultantów którzy chętnie podejmą się nawet najtrudniejszych technicznych zadań, z którymi potrzebujesz pomocy Ty i Twoja firma. Jeśli zatem implementacja zdarzeń na stronie wydaje Ci się zbyt skomplikowana, śmiało odezwij się a razem rozwiążemy Twój problem.

Możesz skontaktować się z nami na tej stronie 

Lub pisząc bezpośrednio do nas tutaj.

Wierzymy że uczestnictwo w programie pozwoli zmaksymalizować jakość naszych usług w obrębie Facebooka i pozwoli firmom zarówno z Polski, jak i z całego świata, czerpać maximum benefitów i satysfakcji z kampanii reklamowych właśnie na tej platformie.