Jak ustawić standardowe zdarzenia w Meta (Facebook) Pixel?

przez Kacper Duras 4 lata temu lektura na 4 min

Meta (Facebook Pixel) to rozwiązanie o dużym potencjalne dla małych, średnich, jak i wielkich reklamodawców. Udostępnione narzędzie od Mety (Facebooka) umożliwia m.in. szczegółową analizę danych, segmentowanie użytkowników, czy integrację z całym systemem informacyjnym cyfrowego giganta, dzięki któremu możemy docierać w licznych formatach reklamowych do pożądanych przez nas odbiorców. Podstawy omówiłem w moim poprzednim wpisie:

Dziś opowiem, jak mierzyć prawidłowo dane za pomocą standardowych wydarzeń w Meta (Facebook) Pixel.

Zdarzenia i ich rodzaje

W wyżej wymienionym artykule napisałem:

Pixel to jest mały fragment kodu JavaScript, który odpowiada za mierzenie działań na stronie, nazywanych zdarzeniami.

Facebook w swojej dokumentacji odnośnie narzędzia informuje o dwóch rodzajach zdarzeń:

standardowe, tj. określone w oficjalnej specyfikacji, gdzie jest wymóg wysyłania odpowiednich informacji dla przesłania poszczególnego pakietu danych
niestandardowe, czyli definiowane samodzielnie przez użytkowników

Drugi rodzaj zdarzeń jest o wiele bardziej złożony i ma faktyczne zastosowanie przy mierzeniu niecodziennych interakcji i wskaźników na stronie, które mogą służyć jako mocno szczegółowe kryteria np. do segmentowania odbiorców w kierowaniu poszczególnych reklam. W praktyce ten typ ma zastosowanie głównie w sytuacji posiadania usługi z bardzo dużym ruchem, dlatego w większości przypadków sprawdzą się standardowe zdarzenia.

Z czego składają się zdarzenia standardowe?

Konstrukcja wygląda w następujący sposób:

fbq('track', '[event]', {
  param: value
});

Przy załączeniu kodu śledzącego Pixela definiowana jest funkcja fbq, za pomocą której możemy przesyłać informacje w standaryzowanej formie.

Pierwszym parametrem jest track, czyli informacja o tym, że dany fragment kodu ma służyć do wysyłania informacji o danym zdarzeniu. Następnie, w kolejnym parametrze należy dostarczyć informacje o tym, jaki rodzaj wydarzenia standardowego jest do przesłania. Pełna lista dostępnych wariantów znajduje się tutaj. Trzecim argumentem jest tzw. obiekt JSON, czyli specjalny format danych do wymiany informacji pomiędzy systemami informatycznymi. W tym elemencie umieszczamy wartości, potrzebne do prawidłowego pomiaru danych. Co ważne, nie musimy dostarczać identyfikatora użytkownika - Pixel dane przypisze do odbiorców w sposób automatyczny.

Przykład implementacji

<html>
  <head>
    <title>Przykładowa implementacja Facebook Pixel</title>
    <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]');
      fbq('track', 'PageView');
    </script>
  </head>
  
  <body>
    <button type="button" onclick="fbq('track', 'Purchase', {currency: "PLN", value: 50.00});
">Wyślij informacje o zakupie</button>
  </body>
</html>

Powyższy przykład to przykładowa strona napisana w języku HTML (i kodu JavaScripta, potrzebnego dla poprawnego działania rozszerzenia).

W sekcji head umieszczony jest oficjalny kod implementacyjny Pixela. Składa się on z trzech elementów:

zdefiniowanie funkcji fbq, dzięki której możemy przesłać dane
wysłanie polecenia init do docelowego Pixela
raportowanie podstawowego wydarzenia PageView, które informuje o załadowaniu się strony internetowej

Z kolei w sekcji body na potrzeby demonstracyjne przygotowałem przycisk, po którego kliknięciu wykonuje się kod z parametru onclick, który wygląda następująco:

fbq('track', 'Purchase', {currency: "PLN", value: 50.00});

Fragment definiuje to, że wysyłamy zdarzenie Purchase z dwiema informacjami: o walucie przykładowej transakcji (tj. PLN) i o wolumenie (tj. 50). Pełna lista parametrów dla każdego ze zdarzeń znajduje się tutaj.

Najważniejsze zdarzenia standardowe

Nie wszystkie zdarzenia standardowe należy implementować, jednak przy analizie konstrukcji strony internetowej szczególnie na te warto zwrócić uwagę, gdyż bardzo często będą pojawiały się przy pracy z narzędziami Mety (Facebooka):

PageView — podstawowe wydarzenie informujące o załadowaniu strony internetowej, dostarczane domyślnie w podstawowym kodzie Pixela
ViewContent — wyświetlenie ważnej zawartości, np. karty produktu
AddToCart — informacja o dodaniu produktu do koszyka (szczególnie przydatne w e-commerce)
AddPaymentInfo — dodanie danych do dostawy, płatności etc.
InitiateCheckout — rozpoczęcie procedury płatności
Purchase — końcowy zakup
Search — korzystanie z wewnętrznej wyszukiwarki w domenie
Contact — skorzystanie z formularza kontaktowego
Lead — informacja o wypełnieniu formularza (newsletterowego, zgłoszeniowego etc.)

Weryfikacja poprawności instalacji

Sama instalacja może być procesem skomplikowanym, dlatego przed wypuszczeniem usługi do działania produkcyjnego, warto zweryfikować czy zmiany na stronie załączyły się poprawnie. Do pomocy przychodzi wtyczka dla przeglądarki Google Chrome o nazwie Facebook Pixel Helper, która:

sprawdza, czy Pixel uruchamia się na stronie
weryfikuje, jakie wydarzenia są wysyłane
pokazuje informacje przesłane do Mety (Facebooka)

Rozszerzenie jest dostępne za darmo w Chrome Web Store.