# Wstrzykiwanie kodu w nagłówku i stopce (CSS/JS): kompletny przewodnik

> Wprowadzenie Moduł Wstrzykiwanie kodu Header/Footer dodaje kod CSS, JavaScript lub HTML do sklepu PrestaShop bez modyfikowania plików motywu. Każdy blok kodu to snippet zarządzany z panelu administracyjnego, z własnym miejscem,…

- Strona: <https://www.datafirefly.com/pl/documentation/dfcodeinjector/>
- Język: pl
- Zaktualizowano: 2026-10-11
- Inne języki: [fr](https://www.datafirefly.com/documentation/dfcodeinjector/index.md), [en](https://www.datafirefly.com/en/documentation/dfcodeinjector/index.md), [es](https://www.datafirefly.com/es/documentation/dfcodeinjector/index.md), [de](https://www.datafirefly.com/de/documentation/dfcodeinjector/index.md), [it](https://www.datafirefly.com/it/documentation/dfcodeinjector/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfcodeinjector/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfcodeinjector/index.md)
- Indeks: <https://www.datafirefly.com/pl/documentation/llms.txt>

## Wprowadzenie

Moduł **Wstrzykiwanie kodu Header/Footer** dodaje kod CSS, JavaScript lub HTML do sklepu PrestaShop bez modyfikowania plików motywu. Każdy blok kodu to _snippet_ zarządzany z panelu administracyjnego, z własnym miejscem, stronami docelowymi, kolejnością wstawiania i statusem.

Typowe zastosowania: Google Tag Manager, Google Analytics, Meta Pixel, tagi weryfikacyjne (Search Console, Pinterest), własny CSS, widżet czatu.

## Instalacja

1. Pobierz archiwum `dfcodeinjector.zip` ze swojego konta DataFirefly.
2. W panelu otwórz **Moduły > Menedżer modułów**, kliknij **Załaduj moduł** i upuść archiwum.
3. Kliknij **Konfiguruj**, aby otworzyć listę snippetów.

Zgodny z PrestaShop od 8.0 do 9.x i z multisklepem. Interfejs dostępny po francusku, angielsku, hiszpańsku, niemiecku, włosku, niderlandzku, polsku i portugalsku.

## Aktualizacja z wersji 1.0.0

Załaduj nowe archiwum przez menedżer modułów: aktualizacja uruchamia się automatycznie, a snippety zostają zachowane. Snippet ograniczony wcześniej do wybranych stron otrzymuje tryb **Tylko wybrane strony**, pozostałe tryb **Wszystkie strony**.

## Tworzenie snippetu

Na liście kliknij **Dodaj snippet**.

### Pola formularza

- **Nazwa**: nazwa wewnętrzna, na przykład „Google Tag Manager”.
- **Miejsce**: gdzie kod jest wstawiany (patrz niżej).
- **Kod**: pełny kod razem ze znacznikami. Jest wstawiany bez zmian. W tym polu klawisz Tab wstawia 4 spacje; naciśnij Escape, a potem Tab, aby przejść do następnego pola.
- **Strony docelowe**, **Strony** i **Inne strony**: strony, na których działa snippet.
- **Kolejność**: kolejność wstawiania w obrębie jednego miejsca. Puste pole umieszcza snippet na końcu.
- **Tryb testowy**: ogranicza wstawianie do adresów IP serwisowych.
- **Aktywny**: włącza lub wyłącza snippet bez usuwania go.
- **Sklep** (tylko multisklep): wszystkie sklepy lub jeden.

### Trzy miejsca

- **Header (znacznik head)**: style, tagi meta, tagi weryfikacyjne, główny skrypt GTM. Hook `displayHeader`.
- **Początek body**: tuż po otwarciu znacznika body, na część noscript GTM. Hook `displayAfterBodyOpeningTag`.
- **Koniec body**: tuż przed zamknięciem znacznika body, na skrypty śledzące i czatu. Hook `displayBeforeBodyClosingTag`.

Jeśli motyw nie wywołuje hooków początku lub końca body, moduł wstawia kod bezpośrednio do gotowego HTML strony w tym samym miejscu (hook `actionOutputHTMLBefore`). Wszystkie trzy miejsca działają więc z każdym motywem, bez żadnych ustawień.

### Wybór stron

Pole **Strony docelowe** oferuje trzy tryby: **Wszystkie strony**, **Tylko wybrane strony** lub **Wszystkie strony oprócz wybranych**.

Lista **Strony** zawiera 30 stron PrestaShop: stronę główną, kategorię, stronę produktu, CMS, wyszukiwanie, koszyk, składanie zamówienia, potwierdzenie zamówienia, logowanie, moje konto, historię zamówień, kontakt, stronę 404 i inne. Pole **Inne strony** przyjmuje kolejne techniczne nazwy stron, oddzielone przecinkami. Dla strony modułu format to `module-nazwamodulu-kontroler`.

Techniczną nazwę strony znajdziesz w jej kodzie źródłowym: w motywie Classic i motywach pochodnych to atrybut `id` znacznika body.

### Tryb testowy

Snippet w trybie testowym jest wstawiany tylko dla adresów IP wpisanych w polu IP serwisowych na stronie **Przerwa techniczna** w ustawieniach sklepu. Zakresy CIDR są akceptowane. Możesz sprawdzić tag w działającym sklepie, a żaden odwiedzający go nie otrzyma, po czym wyłączyć tryb testowy, aby go opublikować.

### Duplikowanie snippetu

Menu każdego wiersza listy zawiera opcję **Duplikuj**. Kopia jest tworzona jako wyłączona i trafia na koniec: sprawdź ją przed włączeniem.

## Przykłady

### Google Tag Manager

GTM wymaga dwóch snippetów:

1. „GTM head”, miejsce **Header**, z pierwszym skryptem od Google:

```
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){ ... })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
```

1. „GTM body”, miejsce **Początek body**, z częścią noscript od Google.

### Piksel konwersji

Miejsce **Koniec body**, tryb **Tylko wybrane strony**, strona **Potwierdzenie zamówienia**. Piksel uruchamia się tylko po zakupie.

### Własny CSS

Miejsce **Header**, CSS w znaczniku style:

```
<style>
.header-banner { background:#0f172a; color:#fff; }
</style>
```

### Tag weryfikacyjny

Dla Search Console lub serwisu społecznościowego, miejsce **Header**:

```
<meta name="google-site-verification" content="TWOJ_KOD" />
```

## Multisklep

Przy włączonym multisklepie pole **Sklep** pozwala wyświetlać snippet we wszystkich sklepach lub tylko w jednym. W instalacji z jednym sklepem pole jest ukryte, a snippet działa w całym sklepie.

## Rozwiązywanie problemów

- **Kod się nie pojawia**: sprawdź, czy snippet jest aktywny, czy tryb testowy jest wyłączony (lub Twój adres IP jest na liście IP serwisowych) i czy bieżąca strona należy do wybranych stron.
- **Zainstalowany jest moduł cache stron**: wyczyść jego cache po każdej zmianie snippetu.
- **Snippet nie pojawia się na stronie modułu**: sprawdź nazwę techniczną wpisaną w polu **Inne strony**, musi dokładnie odpowiadać nazwie strony.
- **Dwa skrypty uruchamiają się w złej kolejności**: zmień pole **Kolejność**.

Kod jest wstawiany bez żadnego filtrowania. Sprawdź jego składnię (poprawnie zamknięte znaczniki) i użyj trybu testowego przed włączeniem go w sklepie produkcyjnym.