Przejdź do głównej zawartości

WordPress

Zainstaluj snippet śledzący Selgeo na stronie WordPress. Snippet musi działać na każdej stronie Twojej witryny — odwiedzający mogą trafić na dowolny URL z parametrem ?ref=…, a snippet działający tylko na jednym wpisie lub stronie docelowej przeoczy większość kliknięć.

Wersja API: v1

Jeśli nie używasz WordPressa, zobacz przewodnik HTML / zwykłego skryptu, przewodnik Next.js lub przewodnik React (Vite).

Snippet MUSI być obecny w całej witrynie

Blok niestandardowego HTML Gutenberg o zakresie strony, umieszczony na pojedynczym wpisie lub stronie docelowej, nie jest akceptowalny. Parametr ?ref= może wylądować na dowolnym URL Twojej witryny — stronie głównej, stronie z cennikiem, wpisie na blogu udostępnionym przez partnera. Jeśli snippet nie jest obecny w całej witrynie, te kliknięcia są po cichu tracone. Skorzystaj z jednej z trzech ścieżek umieszczenia w całej witrynie poniżej.

Trzy ścieżki umieszczenia w całej witrynie

ŚcieżkaNajlepsza dlaEdycja
A. Edytor witryny (motywy blokowe)Nowoczesne motywy blokowe (Twenty Twenty-Three, Twenty Twenty-Four, Twenty Twenty-Five itp.)Bez kodu; używa Edytora witryny WordPress
B. footer.php (motywy klasyczne)Motywy klasyczne z footer.php (Astra, GeneratePress, OceanWP bez FSE, motywy niestandardowe)Bezpośrednia edycja pliku motywu
C. Wtyczka header-footerKażda witryna WordPress, w tym te bez dostępu do plików motywuBez kodu; interfejs wtyczki

Skorzystaj ze ścieżki pasującej do Twojego stacku. Wszystkie trzy prowadzą do tego, że ten sam snippet działa na każdej stronie.

Ścieżka A — Edytor witryny (motywy blokowe)

Dla motywów blokowych (Full Site Editing — FSE).

Krok 1: Otwórz Edytor witryny

W panelu administracyjnym WordPress przejdź do Wygląd > Edytor. Otworzy się Edytor witryny.

Krok 2: Otwórz część szablonu Stopka (lub Nagłówek)

W lewej nawigacji wybierz Wzorce > Części szablonu > Stopka (lub Nagłówek). Część szablonu stopki to standardowe miejsce na snippety śledzące, ponieważ ładuje się ona na każdej stronie.

WordPress Site Editor z otwartą częścią szablonu Footer, gotową do edycji

Krok 3: Wstaw blok niestandardowego HTML

Kliknij przycisk + dodaj-blok na końcu stopki, wyszukaj Niestandardowy HTML i wstaw blok.

Wklej snippet do treści bloku:

<script
async
src="https://cdn.selgeo.com/v1/selgeo.js"
data-merchant="pk_test_YOUR_KEY"
></script>

Zastąp pk_test_YOUR_KEY swoim publicznym kluczem API z Ustawienia > Klucze API w panelu Selgeo.

Krok 4: Zapisz część szablonu

Kliknij Zapisz w prawym górnym rogu. WordPress natychmiast stosuje zmianę w całej witrynie.

Nagłówek czy stopka?

Oba działają. Stopka jest preferowana, ponieważ nie blokuje pierwszego renderowania. Umieszczenie w nagłówku jest w porządku, jeśli Twoja stopka jest warunkowo ukrywana (rzadko).

Ścieżka B — footer.php (motywy klasyczne)

Dla motywów klasycznych (nie-FSE).

Użyj motywu potomnego

Bezpośrednia edycja footer.php motywu nadrzędnego oznacza, że Twoja edycja zostanie nadpisana przy kolejnej aktualizacji motywu. Użyj motywu potomnego lub jednej z dwóch pozostałych ścieżek.

Krok 1: Otwórz footer.php swojego motywu potomnego

Ścieżka: wp-content/themes/<twoj-motyw-potomny>/footer.php.

Jeśli plik nie istnieje w Twoim motywie potomnym, skopiuj go najpierw z motywu nadrzędnego.

Krok 2: Dodaj snippet tuż przed </body>

<?php
// ... Twój istniejący kod stopki ...
?>

<script
async
src="https://cdn.selgeo.com/v1/selgeo.js"
data-merchant="pk_test_YOUR_KEY"
></script>

<?php wp_footer(); ?>
</body>
</html>

Umieść tag <script> przed wp_footer(), aby snippet ładował się wystarczająco wcześnie, by przechwycić kliknięcia, ale wewnątrz tego samego zamykającego bloku </body>.

Krok 3: Prześlij i zweryfikuj

Prześlij edytowany footer.php na serwer (przez SFTP, edytor plików WordPress lub menedżer plików panelu hostingowego) i przeładuj witrynę.

footer.php w motywie potomnym z blokiem script Selgeo wstawionym powyżej wp_footer

Dla witryn bez dostępu do plików motywu lub operatorów, którzy preferują interfejs.

Dwie najpopularniejsze wtyczki to:

  • WPCode (wcześniej Insert Headers and Footers) — darmowy poziom pokrywa ten przypadek użycia.
  • Insert Headers and Footers od WPBeginner — minimalistyczna wtyczka o pojedynczym przeznaczeniu.

Instrukcje są w zasadzie identyczne; ta sekcja używa WPCode jako przykładu.

Krok 1: Zainstaluj i aktywuj wtyczkę

W panelu administracyjnym WordPress przejdź do Wtyczki > Dodaj nową, wyszukaj WPCode, zainstaluj i aktywuj.

Przejdź do Code Snippets > Header & Footer.

W polu tekstowym Footer wklej:

<script
async
src="https://cdn.selgeo.com/v1/selgeo.js"
data-merchant="pk_test_YOUR_KEY"
></script>

Zastąp pk_test_YOUR_KEY swoim publicznym kluczem API.

Krok 4: Zapisz zmiany

Kliknij Save Changes. Wtyczka wstrzyknie snippet w całej witrynie przy następnym ładowaniu strony.

Strona ustawień WPCode Headers &amp; Footers z wklejonym script Selgeo w polu Footer

Weryfikacja instalacji

  1. Otwórz witrynę w prywatnym / incognito oknie przeglądarki.
  2. Utwórz link śledzący w panelu Selgeo w Programy > Linki śledzące.
  3. Odwiedź witrynę za pomocą linku śledzącego, na przykład:
    https://twoja-strona.com/?ref=TWOJ_TESTOWY_REF
  4. Otwórz Narzędzia deweloperskie (F12). W karcie Elements wyszukaj selgeo.js — powinien pojawić się wewnątrz <body> lub tuż przed </body>.
  5. Z tymczasowo dodanym data-debug konsola pokaże:
    [selgeo] ref detected TWOJ_TESTOWY_REF
    [selgeo] click_id stored xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
  6. Wykonaj w konsoli:
    __selgeo.getClickId()
    Powinno to zwrócić ciąg UUID.
  7. Otwórz panel Selgeo. Kliknięcie powinno pojawić się w Analytics w ciągu kilku sekund.

Rozwiązywanie problemów

Snippet nie został załadowany

  • Otwórz wyrenderowane źródło strony (prawy klawisz > Pokaż źródło strony) i wyszukaj selgeo.js. Tag <script> musi pojawić się w HTML — jeśli nie, snippet nie dotarł do strony.
  • Dla Ścieżki A (Edytor witryny): potwierdź, że zapisałeś część szablonu, a nie tylko pojedynczą stronę. Ikona części szablonu w Edytorze witryny to mały „element układanki" — zapisanie strony nie propaguje.
  • Dla Ścieżki B (footer.php): potwierdź, że przesłałeś do motywu potomnego, że motyw potomny jest aktywny w Wygląd > Motywy i że żadna wtyczka pamięci podręcznej nie podaje przestarzałej kopii. Wyczyść pamięć podręczną po edycji.
  • Dla Ścieżki C (wtyczka): upewnij się, że wtyczka jest aktywna (nie tylko zainstalowana) w Wtyczki, a snippet został wklejony w obszar Footer, nie w pole niestandardowe strony.
  • Wtyczki kreatora stron (Elementor, Divi, Beaver Builder) czasami usuwają surowe tagi <script> ze swojego edytora. Jeśli umieściłeś snippet przez blok kreatora stron, przełącz się na jedną ze Ścieżek A / B / C — działają one na poziomie szablonu WordPress i przeżywają renderowanie kreatora stron.

Kliknięcie nie zostało zarejestrowane

  • Odwiedzający musi przybyć z ?ref=… przy początkowym ładowaniu strony. Przeładowania usuwają parametr (snippet przepisuje URL przy przechwyceniu).
  • Potwierdź, że data-merchant zawiera prawidłowy klucz pk_test_* lub pk_live_*. Brakujący klucz powoduje ciche niedziałanie.
  • Sprawdź, czy wtyczka pamięci podręcznej (WP Rocket, W3 Total Cache, LiteSpeed) przepisuje tagi <script>. Większość wtyczek pamięci podręcznej oferuje opcję wykluczenia skryptów z „optymalizacji JS" / „defer / combine" — wyklucz selgeo.js z tych reguł.
  • Zweryfikuj, że snippet działa w całej witrynie, nie tylko na jednej stronie (otwórz stronę główną i inną stronę, wyświetl źródło, potwierdź, że tag jest obecny w obu).

Blokowanie przez CSP

Jeśli Twój dostawca hostingu lub wtyczka zabezpieczeń (np. Wordfence, Sucuri) wstrzykuje nagłówek Content-Security-Policy, zezwól na pochodzenia Selgeo:

script-src 'self' https://cdn.selgeo.com;
connect-src 'self' https://api.selgeo.com;

Dla workspace'ów staging / dev, gdzie data-api-url wskazuje gdzie indziej, dodaj również to pochodzenie do connect-src.

Następne kroki

  • Stripe Payment Links — integracja Stripe bez backendu; szczególnie dobrze pasuje do witryn WordPress linkujących do buy.stripe.com.
  • Conversion API — śledź konwersje spoza Stripe (przesłania formularzy, webhooki wtyczek).
  • Konfiguracja snippeta — pełna referencja atrybutów i bazowy tag HTML.