Instalacja FastTony Pixel – instrukcja krok po kroku

instrukca wdrożenia pixela fasttony

FastTony Pixel to skrypt śledząc, który integruje się z witryną podobnie do piksela Facebooka. Aby działał prawidłowo i nie kolidował z innymi narzędziami, musi zostać dodany bezpośrednio w sekcji <head> strony (na każdej podstronie). Unikamy instalacji przez Google Tag Manager (GTM) – bezpośrednie osadzenie kodu w <head> zapewni szybsze i niezawodne działanie, eliminując opóźnienia i konflikty skryptów​. Poniżej znajdziesz szczegółowe instrukcje instalacji na najpopularniejszych platformach oraz konfiguracji zdarzeń e-commerce.

Kod do osadzenia (przykład):

<!-- FastTony Pixel Code -->
<script src="https://pixel.fasttony.com/761170ef2aad4a08a5189ebf753b5d2a" async defer></script>
<!-- End FastTony Pixel Code -->

Umieść powyższy fragment bezpośrednio w sekcji <head> każdej strony serwisu (zgodnie z instrukcjami dla danej platformy). Atrybuty async defer powodują, że skrypt ładuje się asynchronicznie i nie blokuje renderowania strony.

WordPress

Na WordPressie możesz dodać kod do sekcji <head> na dwa sposoby: za pomocą wtyczki lub ręcznie w plikach motywu. Wtyczka jest prostsza i pozwala zachować kod przy aktualizacji motywu.

Metoda 1: Wtyczka (np. Insert Headers and Footers / Head & Footer Code)

  1. Zainstaluj i włącz wtyczkę do wstawiania kodu w nagłówek (np. Head, Footer and Post Injections albo Insert Headers and Footers). W panelu WP przejdź do Wtyczki > Dodaj nową, wyszukaj wybraną wtyczkę i zainstaluj ją.
  2. Wstaw kod FastTony Pixel w nagłówku: Po aktywacji wtyczki przejdź do jej ustawień (np. Ustawienia > Header and Footer). W sekcji konfiguracji nagłówka znajdziesz pole, które zostanie wstrzyknięte na każdej stronie w obręb <head>. Wklej tam pełny kod FastTony Pixel i zapisz zmiany​. (Większość wtyczek oferuje pole ”Code to add on every page (before </head>)” – użyj właśnie tego pola​).
  3. Sprawdź, czy kod pojawił się na stronie (np. wyświetl źródło strony lub użyj narzędzia do weryfikacji – opis w sekcji Weryfikacja instalacji poniżej).

Metoda 2: Ręcznie w plikach motywu (dla zaawansowanych lub gdy nie możesz użyć wtyczki):

  1. Użyj motywu potomnego: Jeśli modyfikujesz pliki motywu, najlepiej utwórz motyw dziecko, by zmiany nie zniknęły po aktualizacji motywu​.
  2. Edytuj plik nagłówka: W edytorze plików znajdź plik odpowiedzialny za nagłówek HTML. Zazwyczaj jest to header.php lub w motywach blokowych odpowiednia sekcja HTML. Otwórz ten plik i tuż przed zamknięciem znacznika </head> wklej kod FastTony Pixel​. Zapisz zmiany.
  3. Odśwież cache (jeśli korzystasz z cache) i upewnij się, że kod jest w źródle strony.

Uwaga: Nie instalujemy FastTony Pixel przez Google Tag Manager na WordPressie – umieszczamy kod bezpośrednio w nagłówku. Dzięki temu będzie on ładował się najszybciej jak to możliwe i bez potencjalnych opóźnień spowodowanych przez GTM.

WooCommerce (WordPress)

WooCommerce to wtyczka e-commerce na WordPressie, więc instalacja podstawowego kodu FastTony Pixel odbywa się tak samo jak wyżej (przez wtyczkę do nagłówków lub ręcznie w header.php). Dodatkowo należy skonfigurować śledzenie zdarzeń e-commerce, aby Pixel przekazywał wymagane informacje o produktach do Facebooka.

Instalacja kodu podstawowego: Dodaj skrypt FastTony Pixel do sekcji <head> strony zgodnie z powyższą instrukcją dla WordPress. Kod będzie wówczas ładowany na wszystkich podstronach (w tym stronach produktów, koszyka, finalizacji zamówienia itp.).

Konfiguracja śledzenia zdarzeń w WooCommerce: Standardowy kod pikselowy po instalacji śledzi jedynie wyświetlenia stron (PageView). W sklepie internetowym musisz wysyłać także zdarzenia produktów, takie jak:

  • ViewContent (oglądanie produktu) – gdy użytkownik wejdzie na stronę szczegółów produktu,
  • AddToCart (dodanie do koszyka) – po kliknięciu przycisku dodaj do koszyka,
  • InitiateCheckout (rozpoczęcie realizacji zakupu) – gdy klient przechodzi do kasy,
  • Purchase (zakup) – na stronie potwierdzenia zamówienia (po zakupie).

Najprostszym sposobem jest skorzystanie z wtyczki wspierającej Pixel w WooCommerce, która automatycznie wyśle te zdarzenia. Przykładowo, wtyczka PixelYourSite pozwala podać ID piksela i automatycznie rejestruje zdarzenia e-commerce (oglądanie produktu, dodanie do koszyka, zakup itp.)​. Pamiętaj jednak, by nie dublować instalacji piksela – jeśli używasz wtyczki typu PixelYourSite, nie dodawaj już ręcznie skryptu w <head>, tylko skonfiguruj piksel w ramach tej wtyczki (podając ID). Alternatywnie, jeśli pozostajesz przy ręcznym kodzie FastTony w <head>, możesz wyłączyć w wtyczce dodawanie kodu podstawowego, a użyć jej jedynie do wysyłania zdarzeń (o ile to możliwe).

Jeżeli nie korzystasz z dodatkowej wtyczki, możesz ręcznie osadzić kody zdarzeń w odpowiednich miejscach WooCommerce:

  • Oglądanie produktu (ViewContent): edytuj szablon strony produktu (single-product.php lub odpowiedni hook) i dodaj tam skrypt wywołujący zdarzenie ViewContent z parametrami produktu (ID, nazwa, cena itp.).
  • Dodanie do koszyka (AddToCart): wywołaj zdarzenie w momencie kliknięcia przycisku “Dodaj do koszyka” – np. poprzez JavaScript nasłuchujący na ten klik (można dodać fragment JS w stopce strony produktów/kategorii, który wywoła fbq('track', 'AddToCart', {…}) po dodaniu).
  • Zakup (Purchase): w szablonie strony zamówienia (np. thankyou.php) dodaj skrypt wywołujący Purchase wraz z parametrami transakcji (wartość, waluta, ID zamówienia, lista kupionych produktów). WooCommerce udostępnia zmienne z danymi zamówienia, które można wpleść w kod JS.

Konfiguracja ręczna zdarzeń wymaga znajomości mechanizmów WooCommerce – jeśli nie czujesz się pewnie, skorzystaj z gotowej wtyczki do Pixel/Facebook Ads dla WooCommerce, która zrobi to za Ciebie. Kluczowe jest, by Pixel wysyłał pełen zakres zdarzeń e-commerce z odpowiednimi parametrami (np. identyfikatory produktów). Te identyfikatory muszą pokrywać się z identyfikatorami w Twoim katalogu produktów (product feed), aby Facebook mógł prawidłowo dopasowywać zdarzenia do produktów w reklamach dynamicznych.

IAI-Shop (IdoSell)

Platforma IAI (obecnie IdoSell) umożliwia integrację kodów w sekcji <head> poprzez swoje opcje administracyjne. Nie ograniczaj się do podania samego ID piksela w panelu IAI – zamiast tego wstaw pełny kod FastTony Pixel, aby mieć pełną kontrolę nad zdarzeniami.

Aby dodać kod do <head> w IdoSell:

  1. Zaloguj się do panelu IdoSell (administracja sklepu).
  2. Przejdź do sekcji Moderacja > Dodatki HTML i JavaScript. W IdoSell skrypty dodaje się jako tzw. “dodatki HTML/JS”. Jeśli nie masz utworzonej własnej kampanii dodatków, najpierw wybierz opcję Dodaj kampanię (kampania może grupować kilka skryptów)​. Następnie w ramach kampanii dodaj nowy dodatek.
  3. Dodaj nowy dodatek HTML: Wybierz Nowy dodatek i wypełnij pola: wpisz nazwę (np. “FastTony Pixel”), ustaw Aktywny: Tak i Pokazuj: Normalna i mobilna wersja strony​. Jako Typ dodatku wybierz HTML i w polu edycji HTML wklej pełny kod skryptu FastTony Pixel​.
  4. Wybierz miejsce wyświetlania: Ustaw Wyświetlaj w: sekcja head (nagłówek strony) oraz Wyświetlaj na podstronach: Wszystkich (aby kod był obecny na każdej podstronie sklepu)​.
  5. Zapisz dodatek i wyczyść cache sklepu, jeśli jest włączony. Od tego momentu skrypt będzie automatycznie dodawany do <head> każdej strony sklepu.

IdoSell posiada własną integrację Meta Pixel (Facebook Pixel) poprzez podanie ID, która domyślnie śledzi standardowe zdarzenia e-commerce (PageView, ViewContent, AddToCart, Purchase itp.). Jeśli jednak korzystasz z własnego kodu FastTony Pixel zamiast wbudowanej integracji, musisz zadbać o wysyłanie zdarzeń samodzielnie.

Dwie opcje to:

  • Korzystać równolegle z integracji IdoSell (ID piksela) – niezalecane, bo dubluje kod. Lepiej wybrać jedną metodę.
  • Dodać własne skrypty zdarzeń podobnie jak w WooCommerce: np. w ramach dodatków HTML/JS utwórz osobne skrypty wywołujące zdarzenia Purchase na stronie potwierdzenia zamówienia (można skorzystać z zmiennych IdoSell, np. placeholderów {order_id} itp. w kodzie – panel IAI pozwala wstawiać dynamiczne wartości w dodatkach), a ViewContent/AddToCart na stronach produktów i koszyka. IAI oferuje mechanizm modułu CPA, który pozwala uruchamiać kod dla konkretnych stron (np. tylko na “Thank you page”) – możesz z niego skorzystać do osadzenia kodu zakupu jeśli nie chcesz tworzyć własnej logiki rozpoznawania strony zamówienia​.

Dwie opcjePo poprawnej instalacji i konfiguracji, FastTony Pixel będzie zbierał dane o zachowaniu klientów w sklepie IdoSell. Upewnij się w Menedżerze zdarzeń Facebooka, że zdarzenia (zwłaszcza ViewContent, AddToCart, Purchase) są odnotowywane dla Twojego piksela.

Shoplo

W platformie Shoplo (starsza platforma e-commerce) dodawanie niestandardowych skryptów odbywa się przez panel administracyjny, w sekcji ustawień śledzenia.

Jak dodać FastTony Pixel w Shoplo:

  1. Zaloguj się do panelu Shoplo i przejdź do ustawień sklepu.
  2. Wybierz zakładkę “Konwersja i Śledzenie” – w tej sekcji możesz wklejać własne kody śledzące. (W menu bocznym Shoplo należy znaleźć odpowiednią pozycję, np. “Konwersja i śledzenie” zgodnie z instrukcją platformy​).
  3. Dodaj kod w sekcji HEAD: Odnajdź pole opisane jako “Dodatkowy kod w sekcji head” strony. Wklej cały kod FastTony Pixel w to pole​. Nie usuwaj przy tym żadnych istniejących kodów, które mogły już tam być – dopisz kod piksela poniżej, aby nie nadpisać innych integracji​.
  4. Zapisz zmiany konfiguracji (Zapisz powinien być dostępny np. w prawym dolnym rogu panelu​). Kod zostanie automatycznie dodany do <head> wszystkich stron Twojego sklepu.

Śledzenie zdarzeń w Shoplo: Shoplo umożliwia podanie ID Facebook Pixel w ustawieniach (co skutkuje automatycznym wdrożeniem podstawowych zdarzeń, jak PageView i zakupy). Jednak przy bezpośrednim kodzie FastTony może być konieczne własnoręczne dodanie skryptów zdarzeń:

  • Zakup (Purchase): W Shoplo prawdopodobnie jest osobne pole na kod śledzenia konwersji (np. “Skrypty na stronie z podziękowaniem za zamówienie”). Jeśli tak – wklej tam dodatkowy fragment kodu wywołujący zdarzenie Purchase z odpowiednimi danymi transakcji​. Dzięki temu po złożeniu zamówienia piksel wyśle zdarzenie zakupu.
  • Pozostałe zdarzenia (ViewContent, AddToCart): Sprawdź dokumentację Shoplo – platforma mogła automatycznie obsługiwać podstawowe zdarzenia dla wprowadzonego ID Pixel. Jeśli nie, rozważ dodanie skryptów: np. kod fbq('track', 'AddToCart', {...}) w szablonie karty produktu (po kliknięciu “dodaj do koszyka”) itp. W razie wątpliwości skontaktuj się z supportem Shoplo, aby dowiedzieć się, jakie zdarzenia są obsługiwane natywnie, a które trzeba dodać ręcznie.

Po instalacji kodu w Shoplo, zweryfikuj działanie piksela (opis w sekcji weryfikacji). Upewnij się, że zdarzenia e-commerce z Twojego sklepu są rejestrowane (przejrzyj Pixel Helper oraz Menedżer zdarzeń Facebooka).

Shopify (krótka instrukcja)

W Shopify możemy dodać kod piksela bezpośrednio do szablonu sklepu (plik theme.liquid) lub skorzystać z panelu administracyjnego. Zalecana jest edycja kodu motywu, aby umieścić piksel w <head>:

  1. Otwórz edycję kodu motywu: Zaloguj się do Shopify, przejdź do Online Store (Sklep online) > Themes (Motywy). Przy swoim aktywnym motywie kliknij Actions > Edit code (Edytuj kod)​.
  2. Zlokalizuj plik layoutu motywu: W edytorze kodu znajdź plik theme.liquid (w sekcji Layout). Jest to główny plik szablonu, zawierający m.in. nagłówek HTML całego sklepu​.
  3. Wstaw kod przed </head>: W pliku theme.liquid przewiń do końca sekcji <head> – znajdź znacznik zamykający </head>. Bezpośrednio przed </head> wklej skrypt FastTony Pixel​. Upewnij się, że został wklejony w całości (razem z <script ...></script>).
  4. Zapisz zmiany (przycisk Save w edytorze Shopify) i przejdź do podglądu sklepu. Kod będzie teraz ładowany na wszystkich stronach.

Shopify posiadał kiedyś opcję wpisania samego Pixel ID w ustawieniach (Preferences > Facebook Pixel ID), ale to rozwiązanie oferowało ograniczone śledzenie. Rekomendowane jest ręczne dodanie pełnego kodu, co już zrobiłeś. Konfiguracja zdarzeń: Jeśli korzystasz z nowszej integracji Facebooka w Shopify (przez Sales Channel “Facebook & Instagram”), Shopify automatycznie wyśle zdarzenia e-commerce (produkt wyświetlony, dodany do koszyka, zakup) do Twojego piksela. Przy własnoręcznie dodanym kodzie upewnij się, że te zdarzenia są nadal wyzwalane. Możesz to zrobić poprzez:

  • Test zamówienia i sprawdzenie w Pixel Helper, czy pojawia się zdarzenie Purchase,
  • Sprawdzenie w kodzie strony produktu, czy wywoływane jest fbq('track', 'ViewContent', ...) – Shopify zwykle umieszcza takie wywołania gdzieś w skrypcie szablonu produktu.

Jeżeli brakuje zdarzeń, rozważ dodanie ich ręcznie (analogicznie jak opisano dla WooCommerce) lub poprzez Shopify Scripts (np. skrypt w pliku product.liquid do ViewContent, skrypt w pliku cart/checkout do AddToCart/Purchase – choć tu uwaga: w Shopify standardowe checkout scripts są dostępne od planu Shopify Plus lub poprzez sekcję Additional Scripts na stronie potwierdzenia zamówienia).

Magento (krótka instrukcja)

W Magento dodanie kodu do <head> można wykonać przez panel administracyjny bez edycji plików (Magento 2.x):

  1. Przejdź do konfiguracji szablonu: Zaloguj się do Magento Admin. Wejdź w Content (Zawartość) > Design > Configuration (Konfiguracja). Wybierz swoją skórkę (store view), dla której chcesz dodać kod, i kliknij Edit (Edytuj)​.
  2. Edytuj ustawienia HTML head: Rozwiń sekcję HTML Head ustawień. Znajdziesz tam pole Scripts and Style Sheets (Skrypty i arkusze stylów). Wklej kod FastTony Pixel do tego pola. To pole pozwala na dołączenie dowolnego kodu HTML/JS do sekcji <head> strony na wybranym sklepie/skórce.
  3. Zapisz konfigurację i wyczyść cache Magento (w menu System > Cache Management), aby zmiany weszły w życie​

Po tej operacji skrypt piksela będzie obecny na wszystkich stronach sklepu. Uwaga: Magento często posiada rozszerzenia do integracji Facebook Pixel – upewnij się, że nie masz zainstalowanego modułu, który już dodaje piksel, aby nie dublować kodu.

Śledzenie zdarzeń: Jeśli korzystasz z oficjalnego modułu Facebooka dla Magento lub innego modułu do Pixel, może on automatycznie obsługiwać zdarzenia e-commerce (cofając się do ID Pixel). Gdy jednak dodajesz kod ręcznie, zadbaj o dodatkowe skrypty: np. w pliku szablonu potwierdzenia zamówienia dodaj kod Purchase, w szablonie produktu wywołaj ViewContent itd. (w Magento 2 można to zrobić poprzez rozszerzenie plików PHTML lub layout XML, co jednak wymaga wiedzy deweloperskiej). Celem jest pokrycie tych samych zdarzeń, o których była mowa wcześniej​– ViewContent, AddToCart, Purchase – z poprawnymi parametrami produktów.

PrestaShop (krótka instrukcja)

W PrestaShop najlepiej wkleić kod FastTony Pixel w szablon nagłówka motywu. Dla PrestaShop 1.7+ zrobisz to następująco:

  1. Zaloguj się do FTP lub menedżera plików PrestaShop (ew. w Panelu Presta, jeśli masz moduł do edycji plików szablonu).
  2. Znajdź plik nagłówka szablonu: Dla PS 1.7 domyślny motyw Classic ma plik /themes/classic/templates/_partials/head.tpl. W przypadku innego motywu ścieżka będzie podobna (/themes/nazwa_motywu/templates/_partials/head.tpl). Otwórz plik head.tpl w edycji​. (W PrestaShop 1.6 szukaj pliku header.tpl w katalogu motywu).
  3. Wklej kod przed zamknięciem head: W pliku head.tpl przejdź na sam dół. Nawet jeśli nie widzisz tam jawnie znacznika </head>, kod dodany na końcu tego pliku zostanie umieszczony tuż przed </head> podczas kompilacji szablonu​. Wklej tam skrypt FastTony Pixel i zapisz zmiany.
  4. Wyczyść cache PrestaShop: Jeśli cache szablonów jest aktywny (Smarty cache), wyczyść go w panelu (Zaawansowane > Wydajność > wyłącz cache lub wyczyść). Odśwież stronę sklepu i sprawdź, czy kod się pojawił.

Śledzenie zdarzeń: PrestaShop nie ma domyślnie wbudowanego Pixela, więc jeśli wkleiłeś tylko podstawowy kod, musisz też zadbać o zdarzenia. Możesz to zrobić poprzez moduły (np. moduł Facebook Pixel – wiele jest darmowych w Presta Addons – które po podaniu Pixel ID dodadzą odpowiednie wywołania zdarzeń ViewContent, AddToCart, Purchase). Alternatywnie, dodaj ręcznie w odpowiednich plikach szablonu:

  • w product.tpl (lub ekwiwalencie dla PS 1.7 może to być plik produktowy w katalogu templates/catalog) dodaj skrypt fbq('track', 'ViewContent', {contents: [...]}) z danymi produktu,
  • w skrypcie obsługi koszyka (np. plik cart.tpl lub poprzez JavaScript theme.js) wywołaj AddToCart po dodaniu,
  • na stronie order-confirmation.tpl dodaj kod Purchase z danymi zamówienia.

Jeśli to zbyt skomplikowane, skorzystaj z gotowego modułu Facebook Pixel dla PrestaShop – wiele z nich pozwala uniknąć kodowania. Ważne, by finalnie Pixel przesyłał standardowe zdarzenia e-commerce wymagane przez katalog produktów (Facebook dynamic ads).

Wix (krótka instrukcja)

W Wix możesz dodawać własne skrypty przez panel administracyjny, funkcję Custom Code:

  1. Wejdź do kokpitu swojego serwisu Wix i przejdź do Settings (Ustawienia) w panelu zarządzania stroną.
  2. Wybierz “Custom Code” (w sekcji Advanced, czyli Zaawansowane). Ta opcja pozwala osadzić niestandardowy kod na wszystkich lub wybranych stronach​.
  3. Dodaj nowy kod: Kliknij przycisk + Add Custom Code. W wyświetlonym oknie wklej cały kod FastTony Pixel w pole tekstowe​. Nadaj nazwę (np. “FastTony Pixel”), żeby łatwo rozpoznać ten kod w przyszłości​.
  4. Wybierz strony i miejsce: Ustaw Add Code to Pages = All pages (wszystkie strony)oraz Place Code in = Head (nagłówek)​. Dzięki temu kod będzie w sekcji <head> każdej podstrony, co jest wymagane.
  5. Zapisz i zastosuj kod (przycisk Apply). Teraz opublikuj stronę (jeśli wprowadzałeś zmiany w wersji roboczej). Wix doda skrypt automatycznie do publikowanego serwisu.

Wix a Pixel Facebooka: Wix ma integracje marketingowe, np. dedykowane pole na Google Analytics czy Meta Pixel. Uwaga: Według dokumentacji Wix, niektóre skrypty jak Google Tag Manager, Google Analytics czy Facebook Pixel nie działają poprawnie poprzez Custom Code i zaleca się ich dodawanie przez wbudowane integracje​. Jeśli Twój Wix oferuje natywne podpięcie Facebook Pixela (np. poprzez podanie ID w Marketing Integrations), rozważ użycie tego mechanizmu – ale wtedy dodawaj tylko ID w integracji, nie duplikuj ręcznie kodu. W kontekście FastTony Pixel (niestandardowy skrypt) najbezpieczniej jest jednak użyć metody Custom Code jak powyżej. Po dodaniu kodu sprawdź poprzez Pixel Helper, czy Wix go umieścił (powinien być widoczny w źródle strony).

Zdarzenia w Wix (jeśli dodano kod ręcznie) trzeba by dodać przez dodatkowy kod JavaScript (Wix Velo lub Google Tag Manager – ale GTM chcemy unikać). W praktyce, jeśli prowadzisz sklep na Wix (Wix Stores), użyj oficjalnej integracji Facebooka w Wix – zapewni to śledzenie zdarzeń e-commerce. Dla zwykłych stron Wix (bez sklepu) wystarczy PageView z podstawowego kodu.

Joomla (krótka instrukcja)

W Joomla brak wbudowanego mechanizmu wklejania kodu w <head> przez panel (chyba że używasz specjalnego pluginu). Najbardziej niezawodną metodą jest edycja plików szablonu albo użycie małego modułu typu „Custom Code”. Oto dwie opcje:

Opcja A: Edycja pliku szablonu

  1. Znajdź plik index.php motywu: Zaloguj się do panelu Joomla (administrator). Przejdź do System > Site Templates (Szablony witryny) i wybierz swój aktywny szablon, następnie opcję Edytuj. Otwórz plik główny szablonu – zazwyczaj index.php​. (W Joomla 4 interfejs edycji plików pozwala to zrobić wprost z panelu).
  2. Wstaw kod w <head>: W pliku index.php znajdź sekcję z nagłówkiem HTML. Najczęściej zobaczysz tam znaczniki <head> i na końcu </head>. Wklej kod FastTony Pixel tuż przed </head>​. Upewnij się, że jest we właściwym miejscu pomiędzy innymi meta tagami i skryptami.
  3. Zapisz zmiany pliku. Po odświeżeniu strony Joomla powinna mieć już osadzony piksel (sprawdź poprzez podgląd kodu strony lub Pixel Helper).

Opcja B: Własny moduł typu “HTML Custom” (bez edycji plików):

  1. W Joomla możesz utworzyć moduł, który wstrzyknie kod do nagłówka. Skorzystaj z rozszerzenia Custom Code in Head (dostępne w Joomla Extensions Directory) lub utwórz własny moduł typu HTML.
  2. Utwórz nowy moduł: W panelu admina Joomla przejdź do Rozszerzenia > Moduły > Nowy i wybierz typ Własny (Custom). W treści modułu włącz edycję HTML (przełącz edytor na tryb kodu) i wklej kod piksela w całości.
  3. Ustaw pozycję modułu na debug lub inną niewidoczną w szablonie oraz ustaw wyświetlanie na wszystkich stronach. Ważne: wiele szablonów ma pozycję debug lub podobną, która jest wyrenderowana wysoko w kodzie strony – moduł osadzony w takiej pozycji spowoduje dodanie kodu w sekcji head. (Jeśli używasz dedykowanego pluginu “Custom code in head”, on sam zadba o to, żeby kod znalazł się w <head>​). Zapisz i sprawdź stronę.

Śledzenie zdarzeń: Joomla sama w sobie nie ma sklepu (to raczej platforma CMS). Jeśli Twój serwis Joomla to np. witryna firmowa, wystarczy podstawowy kod (PageView). Jeśli korzystasz z komponentu sklepowego (VirtueMart, J2Store czy inny) – poszukaj integracji Facebook Pixel dla tego komponentu lub dodaj zdarzenia analogicznie jak dla innych platform (kod Purchase na stronie potwierdzenia zamówienia, itp.).

Pamiętaj, że bezpośrednie osadzenie skryptu w <head> jest preferowane – dzięki temu piksel ładuje się od razu przy wczytywaniu strony, co zapewnia większą skuteczność zbierania danych.

Weryfikacja poprawności instalacji

Po zainstalowaniu FastTony Pixel na stronie, należy sprawdzić, czy działa on prawidłowo:

  • Facebook Pixel Helper: Najprostszym sposobem jest użycie oficjalnej wtyczki do przeglądarki Meta (Facebook) Pixel Helper​. Dostępna jest dla Chrome (i innych popularnych przeglądarek). Po zainstalowaniu ikonka Pixel Helper pokaże, czy na danej stronie wykryto piksel i jakie zdarzenia zostały wysłane. Jeśli piksel został poprawnie osadzony w <head>, Pixel Helper powinien wykryć przynajmniej zdarzenie “PageView” przy wczytaniu strony​.
  • Podgląd w kodzie strony: Możesz także w przeglądarce wyświetlić źródło HTML swojej strony (prawy klik -> “Pokaż źródło strony”) i wyszukać fragment pixel.fasttony.com – jeśli znajduje się w sekcji <head>, oznacza to, że kod został dodany.
  • Menedżer zdarzeń Facebook (Events Manager): Wejdź do Facebook Business Manager > Menedżer zdarzeń i wybierz swojego Pixela. Skorzystaj z funkcji Testowanie zdarzeń – wpisz adres swojej strony i zobacz, czy Facebook odbiera zdarzenia w czasie rzeczywistym. Powinieneś zobaczyć pojawiające się zdarzenia PageView, a po wykonaniu akcji na stronie (dodanie produktu do koszyka, zakup testowy itp.) odpowiednie zdarzenia e-commerce.
  • Brak błędów w konsoli: Otwórz konsolę JavaScript na stronie (F12 w przeglądarce) i sprawdź, czy nie ma błędów związanych z pixelem (np. brakujący fbq lub inne). Jeśli dodałeś kod poprawnie, nie powinno być błędów – biblioteka piksela powinna załadować się z serwera FastTony.

Jeśli Pixel Helper nie wykrywa piksela, upewnij się, że: a) kod jest dokładnie taki, jak podany (żadnych literówek, np. cudzysłowów itp.), b) znalazł się wewnątrz <head>...</head> strony (nie w <body>), c) skrypt nie został zablokowany przez np. wtyczkę blokującą reklamy. Pamiętaj, aby na czas testów wyłączyć AdBlocka i inne blokery, gdyż potrafią one ukrywać obecność piksela.

Konfiguracja pełnego zakresu zdarzeń (product feed)

Aby w pełni wykorzystać FastTony Pixel (szczególnie do kampanii dynamicznych z katalogiem produktów), musisz zapewnić śledzenie pełnego zakresu standardowych zdarzeń e-commerce. Oznacza to, że piksel powinien wysyłać co najmniej: PageView, ViewContent (wyświetlenie szczegółów produktu), AddToCart, InitiateCheckout, Purchase, a opcjonalnie też Search, AddToWishlist – zależnie od funkcji sklepu. Każde z tych zdarzeń powinno zawierać parametry (zwłaszcza identyfikator produktu, czyli content_ids lub pojedynczy content_id, a także wartość transakcji przy zakupie, walutę itp.), które są zgodne z danymi w Twoim feedzie produktowym. Dzięki temu Facebook będzie mógł dopasować zdarzenia do konkretnych produktów w katalogu i kierować reklamy dynamiczne do osób, które oglądały lub dodały te produkty do koszyka​.

Jeśli Twoja platforma obsługiwała dotąd tylko podanie ID Pixel (np. poprzez panel administracyjny bez możliwości wklejenia własnych skryptów), to prawdopodobnie pewne zdarzenia były domyślnie wysyłane, ale nie zawsze wszystkie wymagane. Przykładowo, platforma mogła śledzić PageView i Purchase, ale brakowało zdarzeń ViewContent lub AddToCart – a te są krytyczne dla remarketingu dynamicznego. W takiej sytuacji:

Testuj w Menedżerze zdarzeń: Użyj zakładki Test Events w Facebook Events Manager, aby na bieżąco śledzić, które zdarzenia dochodzą podczas interakcji ze sklepem. Porównaj listę ze standardami Facebooka – wymagane są przede wszystkim: ViewContent, AddToCart, Purchase (do Advantage+ Catalog Ads)​. Brak któregoś – uzupełnij implementację.

Sprawdź dokumentację swojej platformy: dowiedz się, jakie zdarzenia są obsługiwane natywnie po wpisaniu ID Pixel.

Dodaj brakujące zdarzenia ręcznie: Jeśli platforma nie wysyła któregoś ze standardowych zdarzeń, wykorzystaj mechanizmy dodawania własnych skryptów (omówione powyżej dla każdej platformy) aby je wdrożyć. Np. dołóż skrypt fbq('track', 'AddToCart', {...}) tam, gdzie brakuje (po dodaniu produktu do koszyka) itp.

Pamiętaj też o parametrach zdarzeń: dla ViewContent/AddToCart/Purchase konieczne jest przesyłanie identyfikatora produktu (content_id lub content_ids) oraz np. jego wartości value i waluty currency dla Purchase. Identyfikator powinien dokładnie odpowiadać ID (lub SKU) używanemu w pliku produktowym (feed) załadowanym do katalogu Facebook. W przeciwnym razie Facebook nie “skojarzy” zdarzenia z produktem i reklamy dynamiczne nie zadziałają. Fragment kodu z parametrami może wyglądać np. tak (przykład ogólny):

<script>
  fbq('track', 'ViewContent', {
    content_ids: ['PROD123'],   // ID produktu zgodny z feedem
    content_type: 'product',
    currency: 'PLN',
    value: 199.99
  });
</script>

Analogicznie dla AddToCart i Purchase (Purchase dodatkowo zwykle num_items oraz suma transakcji). Upewnij się, że te wartości są dynamicznie wstawiane przez platformę (np. zmienne szablonu).

Jeśli masz trudność z samodzielnym dodaniem zdarzeń, rozważ skorzystanie z oficjalnych integracji Facebooka dla danej platformy (o ile nie powodują konfliktów) lub zasięgnij pomocy dewelopera znającego daną platformę. Pełny zakres zdarzeń i poprawne parametry są konieczne, aby FastTony Pixel mógł zasilać Twoje kampanie (np. remarketing dynamiczny) właściwymi danymi o zachowaniach klientów​.

Wskazówki dotyczące optymalizacji działania Pixela

  • Unikaj podwójnej instalacji: Upewnij się, że kod FastTony Pixel jest dodany tylko raz na stronie. Nie dodawaj go jednocześnie przez GTM i bezpośrednio, ani nie używaj równolegle wtyczki, która również osadza piksel (to prowadzi do dublowania zdarzeń). Podwójne piksele mogą powodować zafałszowanie danych (np. każde zdarzenie liczone dwa razy). Wybierz jedną metodę implementacji i konsekwentnie się jej trzymaj.
  • Asynchroniczne ładowanie: Powyższy kod zawiera atrybuty async defer, co oznacza, że przeglądarka ładuje skrypt FastTony w tle, nie blokując renderowania strony. Jest to najlepsza praktyka – jeśli dodajesz jakiekolwiek własne wywołania fbq(...); bezpośrednio w <head>, umieść je za tym skryptem lub w async do niego. Sam skrypt FastTony jest hostowany zewnętrznie – nie modyfikuj go, gdyż ewentualne zmiany mogłyby zakłócić jego asynchroniczne działanie​.
  • Lokalizacja kodu: Trzymaj kod piksela wysoko w sekcji <head> (najlepiej zaraz po znacznikach meta). Im wcześniej na stronie zostanie wywołany, tym większa szansa, że zdąży zarejestrować odwiedziny nawet użytkowników z bardzo krótką sesją. Facebook zaleca umieszczanie pixelu w <head> właśnie z tego względu – dzięki temu nawet jeśli użytkownik szybko opuści stronę, zdarzenie PageView zostanie wysłane.
  • Zaawansowane dopasowanie i CAPI: Rozważ włączenie tzw. Advanced Matching oraz Conversions API dla pełni danych. Advanced Matching to mechanizm dopasowujący użytkowników na podstawie np. adresu e-mail lub numeru telefonu (jeśli te dane zbierasz – np. w trakcie zakupu). Conversion API (CAPI) wysyła zdarzenia z serwera, omijając przeglądarkę. FastTony Pixel może oferować integrację z CAPI (warto to sprawdzić w dokumentacji FastTony – nazwa “Pixel i API” sugeruje, że może on łączyć działanie piksela i API konwersji). Jeśli tak, skonfiguruj token dostępu i włącz CAPI według instrukcji FastTony, aby zwiększyć odporność śledzenia na blokady (np. ITP, adblock). W przypadku np. wtyczki PixelYourSite opcje te na WordPressie włącza się jednym kliknięciem​. Sprawdź, czy FastTony Pixel automatycznie tego nie obsługuje – jeśli nie, skontaktuj się z supportem FastTony w celu instrukcji integracji CAPI.
  • Testuj wpływ na wydajność: Piksel Facebooka nie powinien znacząco obciążać strony, ale monitoruj ogólny czas ładowania. Narzędzia jak Chrome DevTools (zakładka Network) czy PageSpeed Insights pokażą, czy skrypt piksela nie wydłuża czasu ładowania. Dzięki async/defer wpływ powinien być minimalny​, ale jeśli zauważysz spowolnienie, upewnij się, że nie ma konfliktów z innymi skryptami.
  • Aktualizacje i zmiany: Jeśli z czasem zmienisz motyw, szablon lub platformę, pamiętaj o ponownej instalacji kodu FastTony Pixel w nowym środowisku (kod nie przeniesie się automatycznie). Również, gdy FastTony wyda aktualizacje lub nowe zalecenia implementacyjne, dostosuj swój kod (np. zmiana adresu skryptu czy dodanie dodatkowych parametrów) – bądź na bieżąco z komunikatami od FastTony.

Na koniec, upewnij się, że dane z piksela zbierają się prawidłowo w Menedżerze Reklam Facebooka. Dobrze skonfigurowany FastTony Pixel w <head> z pełnym zestawem zdarzeń pozwoli Ci precyzyjnie śledzić konwersje i budować grupy odbiorców, bez konfliktów z innymi skryptami. Powodzenia w implementacji!