Instalacja WP Pixel

Metody implementacji

✅ Wsparcie działu technicznego WP

Zdarzenia WP Pixel mogą zostać wdrożone przy pomocy działu technicznego WP. Implementacja tą metodą składa się z dwóch etapów:
1. Wdrożenie przez klienta skryptu osadzenia.
2. Kontakt do Opiekuna Klienta lub z Supportem WP Ads (support@ads.wp.pl) w celu przekazania prośby o implementację pozostałych zdarzeń przez dział techniczny Wirtualnej Polski.

✅ Integracja na platformie ecommerce za pomocą dedykowanej wtyczki

WP Pixel można wdrożyć za pomocą gotowych integracji z platformami ecommerce. Lista dostępnych integracji wraz z instrukcjami wdrożenia

✅ Implementacja skryptów wyłącznie przez klienta (lub jego zespół developerski)

Wdrożenie skryptu osadzenia.
Wdrożenie pozostałych skryptów, tj. zdarzeń e-commerce oraz zdarzeń dodatkowych

✅ Implementacja skryptów poprzez SDK aplikacji mobilnych

Wirtualna Polska przygotowała pakiet bibliotek SDK na potrzeby wdrożenia WP Pixel do aplikacji mobilnych. Dokumentacja wdrożenia WP Pixel tą metodą dostępna jest tutaj.

✅ Implementacja skryptów poprzez GTM

Jeśli masz konto Google Tag Manager powiązane ze swoją stroną internetową, możesz dodać skrypt osadzenia za jego pośrednictwem. Google Tag Manager (GTM, Menedżer tagów Google) to system zarządzania tagami umożliwiający szybkie i łatwe aktualizowanie kodów śledzenia i powiązanych fragmentów kodu, czyli tagów, w witrynie lub aplikacji mobilnej. Dowiedz się więcej tutaj.

Skrypt osadzenia

Implementacja na każdej stronie witryny. Rekomendowane jest, aby skrypt został umieszczony w sekcji <head> lub na koniec <body>. Łańcuch znaków PIXEL_ID, który pojawia się dwa razy w skrypcie, należy zastąpić wygenerowanym identyfikatorem.

Ponadto skrypt dopuszcza przekazanie dodatkowych parametrów. Parametry identyfikujące użytkownika nie są obowiązkowe, jednak zarówno em jak i ltid pozwolą aktywować kampanie w środowisku bez Third-Party Cookies - obecnie na przeglądarkach Safari, Firefox, ale w przyszłości również na przeglądarce Chrome.

W przypadku rezygnacji z przekazywania dodatkowych parametrów, należy usunąć zapis , DODATKOWE_PARAMETRY ze skryptu, jeśli się w nim znajduje.

Domyślny skrypt z polem na dodatkowe parametry

!function(w,p,e,v,n,t,s){w['WphTrackObject'] = n; w[n] = window[n] || function() {(w[n].queue=w[n].queue||[]).push(arguments)}, w[n].l = 1 * new Date(), t=p.createElement(e), s=p.getElementsByTagName(e)[0], t.async=1;t.src=v;s.parentNode.insertBefore(t,s)}(window,document,'script', 'https://pixel.wp.pl/w/PIXEL_ID/tr.js', 'wph'); wph('init', 'PIXEL_ID', DODATKOWE_PARAMETRY);

Osadź skrypt Pixla na swojej stronie w 3 prostych krokach (bez parametrów dodatkowych)

Wpisz w ramkę swój PIXEL_ID i zatwierdź: →

Skopiuj poniższy blok kodu

<script>
    !function(w,p,e,v,n,t,s){w['WphTrackObject'] = n;
    w[n] = window[n] || function() {(w[n].queue=w[n].queue||[]).push(arguments)},
    w[n].l = 1 * new Date(), t=p.createElement(e), s=p.getElementsByTagName(e)[0],
    t.async=1;t.src=v;s.parentNode.insertBefore(t,s)}(window,document,'script',
    'https://pixel.wp.pl/w/PIXEL_ID/tr.js', 'wph');
    wph('init', 'PIXEL_ID');
</script>

Wklej go w źródło strony lub w odpowiednie miejsce w wybranym modelu implementacji.
Poproś o weryfikację. Jeżeli na Twojej witrynie znajduje się już Google Analytics, bardzo prawdopodobne, że skrypt został zintegrowany poprawnie. Jednak, po osadzeniu skryptu proponujemy skontaktować się z opiekunem WP w celu weryfikacji. Gotowe!

Skrypty zdarzeń

Po wdrożeniu skryptu osadzenia, kolejnym etapem jest wdrożenie pozostałych kodów WP Pixel:

SPA i MPA

SPA (single-page application), czyli aplikacja jednostronicowa. Aplikacja jednostronicowa korzysta tylko z jednego pliku HTML i nie przeładowuje stron podczas jej obsługi. Cała jej zawartość może zostać przesłana za jednym razem, po nawiązaniu komunikacji z serwerem. Wprawdzie aplikacja wciąż komunikuje się z backendem, np. przez REST API lub graphQL, ale korzysta tylko z warstwy danych i nie musi renderować widoków na serwerze. Dzięki temu po kliknięciu w podstronę witryny, treści wyświetlane są błyskawicznie bez konieczności przesyłania dużych ilości danych z backendu.

⚠️ W kodzie źródłowym należy nasłuchiwać zmian routingu i wywoływać zdarzenie Pixla przy każdej zmianie widoku w aplikacji.

Od strony użytkownika działanie takiej aplikacji wydaje się szybsze, bardziej sprawne i proste. Dla działania procesów WP Pixel jest to niestety utrudnienie, gdyż o ile treść na stronie zmienia się płynnie i szybko, tak skrypty WP pozostają bez zmian. Wywołanie skryptów może niestety powodować dublowanie istniejącego już skryptu, dlatego utrudnieniem jest odświeżenie skryptów na takim poziomie, aby się nie nakładały, powodujac zwielokrotnienie wysłanych eventów lub błędy po stronie przeglądarki.

⚠️ Zaleca się implementować skrypt osadzenia jednorazowo, a następnie wysowływać wyłącznie skypty eventów. Wywołanie skryptów, musi być dopasowane w czasie do ładowania treści strony. Wiele informacji pobieramy z layoutu strony, to też wymusza na nas oczekiwanie na dokończenie ładowania treści na stronie. Części wypychane w postaci obiektów JSON (jak dataLayer), także często pojawiają się z lekkim opóźnieniem, stąd dopasowanie pobrania danych do wysłania w evencie jest kluczowe.

🔁 SPA nie odświeża strony, więc:
- Skrypty ładuje się raz.
- Zmiany routingu (adresów URL) należy śledzić ręcznie.
- Należy wywołać funkcje trackingowe przy każdej zmianie routingu - wph('track', '.....');
- Istnieją strony mieszane - witryna działa w MPA, lecz checkout działa w SPA.
- Skrypt główny (plus pozostałe wymagane skrypty w danej lokalizacji) należy dodawać przy załadowaniu aplikacji SPA do przeglądarki.
- Przy zmianie routingu należy dodawać skrypty zdarzeń (bez skryptu głównego jeżeli jest uprzednio osadzony i nie został wyjęty z kodu strony).
🔧 Zalecamy implementację ze wsparciem technicznym WP.
MPA (multi-page application) - tym modelu, zgodnie z nazwą, aplikacje i serwisy działają w oparciu o wiele stron i wiele plików HTML. Treść HTML generowana jest przez backend, a każde przejście między stronami wiąże się z wysłaniem żądania o pobranie nowej strony z serwera. Wiąże się to także z uruchomieniem skryptów na nowo. Zdecydowana większość popularnych platform dla sklepów on-line budowana jest na takim modelu.

Dla poprawnego działania systemu WP Pixel, przeładowanie skryptu jest kluczowe, zatem serwisy zbudowane na modelu MPA są zdecydowanie mniej problematyczne dla procesu integracji i późniejszego użytkowania.

Najczęściej zadawane pytania (FAQ)

Nie posiadasz PIXEL_ID?

Skontaktuj się ze swoim Opekunem Klienta.

Dane nie zbierają się poprawnie lub są problemy z działaniem Pixela

PIXEL_ID nie zostało podmienione na identyfikator w 2 miejscach w skrypcie osadzenia.

Błąd w przeglądarce "wph is not defined"

To błąd wynikający z faktu, iż na stronie nie istnieje kod osadzenia. Nie zaimplementowano obiektu "wph" i tym samym wywołania funkcji dla eventów Pixela nie znajdują odwołania. Kod osadzenia powinien zawsze poprzedzać wywołania kodów eventów.