Dodatki HTML i Javascript

Funkcja Dodatki HTML/JS umożliwia rozszerzenie sklepu o zewnętrzne narzędzia, skrypty i widgety bez konieczności edytowania maski sklepu. Dzięki temu możesz samodzielnie integrować rozwiązania analityczne, marketingowe, reklamowe, systemy opinii, piksele śledzące oraz własne fragmenty kodu. Mechanizm ten jest szczególnie przydatny, gdy dane narzędzie nie posiada natywnej integracji dostępnej w panelu administracyjnym IdoSell.

• Jak wygląda ogólna konfiguracja zewnętrznych narzędzi przez Dodatki HTML/JS.

• Jak przygotować i wkleić kod widgetu opinii Ceneo.

• Jak przygotować i wkleić kod śledzący Microsoft Clarity.

• Jak przygotować i wkleić kod śledzący Hotjar.

• Jak przygotować i wkleić kod śledzący TikTokAds

Większość zewnętrznych narzędzi analitycznych, reklamowych, pikseli śledzących i widgetów, które nie mają natywnej integracji w panelu administracyjnym IdoSell, można dodać do sklepu przez funkcję Dodatki HTML/JS. Ogólny schemat konfiguracji jest taki sam niezależnie od narzędzia - różni się przede wszystkim miejscem pobrania kodu oraz sposób weryfikacji działania po stronie dostawcy usługi.

1. W panelu IdoSell przejdź do Sklep > Dodatki HTML/JS.

2. Dodaj kampanię i uzupełnij wymagane informacje, takie jak:

• Nazwa w panelu

• Aktywna – zmień na tak

• Strony – zaznacz sklepy, w których dodatki mają być aktywne

3. Zapisz zmiany i wróć do listy kampanii. Znajdziesz tam utworzoną przez siebie kampanię.

1. Wybierz opcję Edytuj dodatki.

2. Aby dodać nowy dodatek, kliknij przycisk "Nowy dodatek".

3. Uzupełnij tytuł dodatku.

4. Aktywuj dodatek, ustawiając wartość pola Aktywny na tak.

5. Opcjonalnie ustaw daty włączenia i wyłączenia dodatku. W wybranym terminie dodatek automatycznie zmieni status na aktywny, a w dniu wyłączenia jego status zostanie zmieniony na nie.

6. Zdefiniuj typ dodatku (więcej informacji znajdziesz w sekcji Typ dodatku i sposób ładowania)

7. W polu Pokazuj na urządzeniach wybierz, na których wersjach strony ma być widoczny dodatek: na komputerach, telefonach lub - w przypadku ładowania dodatku przez AJAX - także na tabletach. Dostępne opcje zależą od wybranego sposobu wczytywania dodatku.

8. Zdefiniuj, jak dodatek będzie się wczytywał na stronie (więcej informacji znajdziesz w sekcji Typ dodatku i sposób ładowania)

9. Zaznaczenie pola Automatyczna kontrola i wyłączanie na tak może wyłączyć dodatek, jeśli zewnętrzny skrypt, do którego odwołuje się konfiguracja, nie odpowiada albo odpowiada dłużej niż 2 sekundy trzy razy z rzędu. Chroni to sklep przed problemami z ładowaniem strony lub jej elementów. Jeśli dodatek zostanie automatycznie wyłączony, merchant otrzyma odpowiedni komunikat.

10. Język edycji - Jeśli Twój sklep obsługuje kilka języków, a chcesz dodać dodatek HTML/JS do każdego z nich, skorzystaj z opcji "Powiel we wszystkich językach" lub samodzielnie wklej kod dodatku do wybranych języków. Każda wersja językowa pozwala na dostosowanie jej zawartości, dzięki czemu możesz zadbać o prawidłowe linkowanie/język treści wyświetlanych w ramach dodatku. Wersje językowe współdzielą ustawienia konfiguracji wyświetlania dodatku.

11. Wklej kod otrzymany z zewnętrznego narzędzia w polu zawartości dodatku. Możesz dodać go na jeden z kilku sposobów:

• Edycja zaawansowana - pole, w którym możesz dodać swój kod HTML. Dodany w tym miejscu kod zostanie dograny do kodu strony. Za pomocą tagów <script> i <style> w ramach edycji HTML możesz wprowadzić odpowiednio kod JavaScript jak i stylowanie CSS.

• Wgraj plik — ta opcja pozwala na wgranie gotowego kodu w postaci pliku. Obsługiwane formaty to .txt i .html.

12. Historia zmian - po pierwszej modyfikacji dodatku zobaczysz historię edycji z informacją o autorze oraz dacie zmiany. W tej sekcji możesz podejrzeć wcześniejszą zawartość dodatku lub przywrócić jedną z poprzednich wersji.

13. Zmienne i listy dodatkowe - w tej sekcji znajdziesz zmienne ułatwiające tworzenie dodatków, które pobierają lub przekazują dane o kliencie, produkcie albo koszyku, np. imię, e-mail, numer telefonu, informacje o oglądanym produkcie czy zawartość koszyka.

14. Konfiguracja wyświetlania dodatków na stronie:

• Wyświetlaj w - opcja ta pozwala na ustalenie, w którym miejscu w kodzie strony ma zostać dodany kod dodatku. Dostępne opcje to: początek sekcji head, początek sekcji body i koniec sekcji body. Jeśli posiadasz gotowy kod HTML zewnętrznej integracji, instrukcja wdrożenia tego mechanizmu powinna zawierać informację, w którym miejscu w kodzie strony powinien znaleźć się dodatek.

• Wyświetlaj na podstronach - określ, gdzie ma być widoczny dodatek: w całym sklepie, na wybranych adresach URL albo tylko na konkretnych podstronach. Listę dostępnych podstron znajdziesz w sekcji Dostępne podstrony dla dodatku HTML/JS.

15. Ustawienia grupy docelowej - w tej sekcji możesz określić, komu ma wyświetlać się dodatek - wszystkim odwiedzającym albo tylko wybranej grupie klientów spełniających określone warunki. Domyślnie dodatek wyświetla się wszystkim użytkownikom. Po zmianie typu odwiedzającego na klienta zalogowanego, detalicznego lub hurtowego, możesz dodatkowo zawęzić grupę docelową według wybranych kryteriów:

• zapisany do newslettera,

• robił do tej pory zakupy,

• wprowadził kod rabatowy.

16. Opcja „Filtruj po źródle” pozwala wyświetlić dodatek tylko klientom, którzy trafili na stronę z określonego źródła. Przykładowo, dodatek może zostać uruchomiony wyłącznie dla zalogowanych klientów detalicznych, którzy weszli do sklepu z porównywarki Ceneo.pl i nie są zapisani do newslettera. Po spełnieniu tych warunków kod dodatku zostanie wykonany na stronie.

17. Dodaj dodatek.

Po zapisaniu zmian odczekaj na publikację dodatku. W zależności od konfiguracji i mechanizmu publikacji zmiany mogą być widoczne po pewnym czasie.

Przed zapisaniem dodatku wybierz jego typ oraz sposób ładowania. Decyzja zależy przede wszystkim od rodzaju kodu otrzymanego od dostawcy narzędzia oraz od tego, czy dodatek powinien działać od razu po wczytaniu strony, czy dopiero po jej pełnym załadowaniu i ewentualnej zgodzie użytkownika na określone typy cookies.

Wczytywanie dodatku na stronie

Ładowanie razem z treścią strony oznacza, że kod dodatku generuje się razem z kodem strony. Dzięki temu ładuje się szybciej i jest widoczny w strukturze strony w narzędziach developerskich przeglądarki. To dobre rozwiązanie dla kodu, który ma działać od początku, na przykład dla stylów CSS lub elementów wymaganych już podczas pierwszego renderowania strony.

Ładowanie przez AJAX, po załadowaniu strony oznacza, że dodatek uruchamia się dopiero po pełnym wczytaniu strony. Ten tryb jest zalecany dla dodatków analitycznych, reklamowych, pikseli śledzących oraz innych narzędzi, które zbierają lub przekazują dane o użytkowniku. Pozwala powiązać dodatek z odpowiednimi cookies, dzięki czemu kod może czekać na zgodę użytkownika i nie uruchomi się, jeśli użytkownik nie zaakceptuje danego typu cookies. Kod takiego dodatku nie jest widoczny bezpośrednio w kodzie strony, ale można go sprawdzić w narzędziach developerskich, na przykład w zakładkach Network lub Sources.

W przypadku opcji Wyświetlaj na podstronach > Wybranych możesz wskazać konkretne podstrony sklepu, na których ma działać dodatek. Dostępne są między innymi:

• Strona główna - /main.php

• Koszyk - /basketedit.php

• Dostawa i płatności - /order1.php

• Potwierdzenie danych - /order2.php

• Złożenie zamówienia - /order-newpayment.php (aktualnie jest to strona, która automatycznie przeładowuje się podczas zmiany formy płatności, której można dokonać na orderdetails.php)

• Szczegóły zamówienia - /orderdetails.php

• Strona nawigacji (Navigation) - /navigation.php

• Karta towaru - /projector.php

• Wyniki wyszukiwania - /search.php

• Po złożeniu zamówienia - /orderdetails.php (tylko po złożeniu zamówienia)

• Zapisanie do mailingu - rozpoznawane na podstawie sesji

• Strona powrotu z płatności zakończonej sukcesem - /return.php?status=payment_success

• Strona powrotu z płatności oczekującej - /return.php?status=payment_pending

• Strona powrotu z płatności zakończonej niepowodzeniem - /return.php?status=payment_error

Dodatki HTML/JS mogą być używane do integracji zewnętrznych narzędzi analitycznych i reklamowych. Takie skrypty mogą zbierać informacje o użytkowniku odwiedzającym stronę lub przekazywać je dalej do analizy. W tym celu mogą tworzyć pliki cookies na urządzeniu użytkownika.

Pamiętaj, że masz obowiązek poinformować użytkownika o wykorzystywaniu takich plików cookies oraz umożliwić mu rezygnację z udostępniania dodatkowych danych.

Dla dodatków ładowanych po pełnym załadowaniu strony, czyli przez AJAX, możesz skonfigurować plik cookie powiązany z dodatkiem. Taki plik będzie widoczny:

• na liście cookies w aktywnej, zaawansowanej wersji zgody na cookies,

• w polityce prywatności sklepu wraz z opisem działania.

Nowy plik cookie reprezentujący kod dodatku dodasz podczas edycji dodatku, korzystając z opcji Zdefiniuj nowy plik. Opcja ta nie jest dostępna podczas tworzenia nowego dodatku.

Podczas edycji zdefiniowanego pliku cookies uzupełnij informacje o:

• dostawcy pliku,

• kategorii pliku, na przykład analityczne, reklamowe lub funkcjonalne,

• działaniu pliku cookie - dodany opis będzie widoczny w polityce prywatności.

W sekcji z zaawansowanymi informacjami o pliku cookies możesz dodatkowo uzupełnić:

• nazwę pliku cookie,

• czas przechowywania pliku, czyli czas jego życia,

• rodzaj pliku, na przykład cookie, pamięć lokalna lub piksel śledzący.

Widget opinii Ceneo pozwala wyświetlać w sklepie informacje i opinie pochodzące z Ceneo. Kod widgetu znajdziesz w panelu Ceneo w sekcji Widget > Instalacja i konfiguracja, a następnie możesz wkleić go w dodatku HTML/JS zgodnie z ogólną konfiguracją opisaną wyżej.

Jak sprawdzić, czy widget Ceneo działa poprawnie?

• kod jest widoczny w źródle strony,

• widget wyświetla się na stronie sklepu,

• na stronie widoczne są aktualne opinie z Ceneo.

Microsoft Clarity służy do analizy zachowania użytkowników na stronie, między innymi przez nagrania sesji i mapy cieplne. Kod śledzący wygenerujesz zgodnie z instrukcją producenta: Konfiguracja Microsoft Clarity . Następnie wklej go w dodatku HTML/JS zgodnie z ogólną konfiguracją opisaną wyżej.

Jak sprawdzić, czy Microsoft Clarity działa poprawnie?

• dodatek został zapisany bez błędów,

• kod jest widoczny w źródle strony,

• od publikacji minęło około 60 minut,

• w panelu Microsoft Clarity pojawiają się pierwsze dane o ruchu.

Hotjar pomaga analizować zachowanie użytkowników na stronie, między innymi za pomocą map cieplnych, nagrań sesji i ankiet. Kod śledzący pobierzesz zgodnie z instrukcją producenta: Instrukcja instalacji Hotjar Tracking Code . Następnie wklej go w dodatku HTML/JS zgodnie z ogólną konfiguracją opisaną wyżej. Więcej o tym rozwiązaniu możesz przeczytać na naszym blogu .

Jak sprawdzić, czy Hotjar działa poprawnie?

• dodatek został opublikowany,

• status witryny w panelu Hotjar potwierdza aktywną instalację,

• Hotjar wykrywa poprawnie zainstalowany kod,

• w panelu Hotjar pojawiają się pierwsze dane analityczne.

TikTok Pixel umożliwia mierzenie skuteczności kampanii reklamowych prowadzonych w TikTok Ads oraz analizę działań użytkowników po wejściu na stronę sklepu. Kod śledzący pobierzesz zgodnie z instrukcją producenta: Instrukcja konfiguracji TikTok Pixel . Następnie wklej go w dodatku HTML/JS zgodnie z ogólną konfiguracją opisaną powyżej. Nie należy mylić tej konfiguracji z natywną integracją TikTok Shop dostępną w panelu IdoSell.

Jak sprawdzić, czy TikTok Pixel działa poprawnie?

• Dodatek został zapisany i opublikowany.

• Kod TikTok Pixel jest widoczny w źródle strony.

• TikTok Pixel Helper potwierdza wykrycie kodu.

• W panelu TikTok Ads pojawiają się pierwsze zdarzenia.