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, 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.

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.

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 -->

2. „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ść.