Na tej stronie · Sekcje: 6
- Osadzenie to jeden fragment kodu wklejony na istniejącą stronę, bez zmiany platformy.
- Iframe z małym skryptem-mostem daje izolację i działające śledzenie reklam.
- Sprawdź, czy zapytania ofertowe uruchamiają piksele Google Ads i Meta na Twojej stronie.
- Sklep na własnej domenie to alternatywa, jeśli i tak wymieniasz stronę.
Osadzenie konfiguratora w WordPress, Shopify lub Webflow oznacza wklejenie jednego fragmentu kodu na podstronę, tak że konfigurator 3D siedzi w Twoim obecnym projekcie, bez nowej strony internetowej. Główne decyzje to iframe czy skrypt oraz to, czy Twoje piksele reklamowe nadal widzą zapytanie ofertowe z wnętrza osadzenia. Ten poradnik wyjaśnia oba podejścia, most do śledzenia, kroki dla każdej platformy, alternatywę z własną domeną i to, co przetestować przed startem.
Co tu znaczy „osadzenie”
Osadzenie to fragment kodu, który wklejasz na istniejącą stronę (wpis w WordPress, stronę produktu w Shopify, stronę w Webflow) i który ładuje konfigurator wewnątrz tej strony, dopasowany do Twojego obecnego układu. Klient nie zauważa, że opuścił Twoją stronę, bo jej nie opuścił: konfigurator działa w ramce na Twojej stronie. To coś innego niż sklep na własnej domenie, gdzie konfigurator jest całą stroną na własnej domenie lub subdomenie (o tym niżej).
Iframe czy skrypt: co naprawdę się różni
„Osadzeniem” nazywa się dwa podejścia techniczne.
Iframe ładuje konfigurator jako stronę w stronie: wklejasz tag <iframe src="...">, a przeglądarka wyświetla w tym prostokącie niezależny dokument. To proste, izoluje konflikty stylów (CSS konfiguratora nie zderzy się z CSS Twojego motywu i odwrotnie) i jest częstszym podejściem dla aplikacji 3D. Minus: domyślnie iframe to odizolowany kontekst, więc wszystko, co musi wiedzieć o otaczającej stronie (na przykład uruchomienie piksela śledzącego, który ma wyglądać, jakby pochodził z Twojej strony) wymaga wyraźnego mostu.
Osadzenie skryptem wstawia tag <script>, który buduje interfejs konfiguratora bezpośrednio w kontenerze na Twojej stronie, w jej własnym DOM. Może wyglądać bardziej „natywnie” i upraszcza niektóre integracje śledzenia, bo kod działa w tym samym kontekście co skrypty Twojej strony. Minus: ma większą powierzchnię konfliktu z CSS lub JavaScriptem Twojego motywu, więc dobrze zbudowane osadzenie skryptem musi starannie ograniczać zasięg swoich stylów.
Większość platform konfiguratorów, w tym Next Configurator, domyślnie używa iframe dla samego płótna 3D (dla izolacji i wydajności) plus małego skryptu towarzyszącego (embed.js), który robi za most. Przekazuje zdarzenia konfiguracji i dane o konwersjach z powrotem do strony-gospodarza, żeby Twoja obecna analityka i piksele reklamowe nadal działały poprawnie. Nie musisz wybierać jednego z dwóch; fragment kodu od dostawcy powinien obsłużyć obie części za Ciebie.
Śledzenie przez osadzenie
To część, o której się zapomina. Jeśli klient konfiguruje pergolę i wysyła zapytanie ofertowe wewnątrz iframe, a Twój piksel Google Ads lub Meta jest na stronie-gospodarzu (Twojej stronie WordPress lub Shopify), ten piksel musi wiedzieć, że konwersja nastąpiła. Inaczej Twoje platformy reklamowe nigdy nie zobaczą zdarzenia „lead”, a kampanie będą wyglądać, jakby nie konwertowały, choć zapytania spływają.
Dobrze zbudowane osadzenie rozwiązuje to mostem komunikacyjnym: konfigurator działający w iframe zgłasza zdarzenia (wyświetlenie → konfiguracja → dodanie → lead/zapytanie → rejestracja) do skryptu osadzenia, który następnie uruchamia piksele strony-gospodarza na podstawie atrybutów ustawionych na tagu osadzenia (na przykład atrybut data-google-ads="AW-.../label" z Twoją etykietą konwersji). W ten sposób piksel platformy reklamowej odpala się tak, jakby wszystko działo się bezpośrednio na Twojej stronie, bo z punktu widzenia śledzenia tak właśnie jest.
Zanim cokolwiek osadzisz, potwierdź u dostawcy: czy fragment kodu przekazuje zdarzenia konwersji do moich istniejących pikseli, czy muszę ustawić śledzenie dwa razy (raz dla mojej strony, raz w ich platformie)? Jeśli to drugie, raporty kampanii reklamowych będą zaniżać wyniki.
Kroki dla każdej platformy
WordPress. Dodaj blok „Własny HTML” (edytor blokowy) albo widżet „Własny HTML” na stronie lub we wpisie, gdzie ma być konfigurator, wklej fragment kodu, opublikuj. Jeśli Twój motyw ogranicza surowy HTML w niektórych miejscach, rozwiąże to wtyczka pozwalająca na dowolne bloki HTML/script. Dostęp do serwera nie jest potrzebny.
Shopify. W edytorze motywu edytuj odpowiedni szablon (zwykle szablon strony produktu albo osobnej strony), dodaj sekcję „Custom Liquid” lub „Custom HTML”, wklej fragment kodu. Ponieważ strony produktów w Shopify mają własną logikę cen i koszyka, większość sprzedawców kieruje konfigurator na osobną stronę zamiast całkiem zastępować stronę produktu, a potem linkuje do niej z list produktów.
Webflow. Dodaj na stronie element Embed, wklej fragment kodu w jego panel HTML, opublikuj. Element Embed w Webflow zachowuje się jak odizolowany kontener, więc to proste wstawienie.
We wszystkich trzech przypadkach kroki wyglądają tak samo: znajdź stronę, dodaj blok surowego HTML/osadzenia, wklej jeden fragment kodu, opublikuj. Żadnych zmian w kodzie w innych miejscach strony, żadnego nowego hostingu, żadnych zmian DNS.
Alternatywa: sklep na własnej domenie
Zamiast osadzać konfigurator na istniejącej stronie, niektórzy sprzedawcy prowadzą go jako cały sklep na własnej domenie lub subdomenie (na przykład sklep.twojadomena.pl albo nawet domena główna, jeśli platforma konfiguratora oferuje pełny sklep z kreatorem stron, a nie tylko widżet konfiguratora). To inna decyzja niż iframe czy skrypt. Brzmi: „czy chcę widżet na mojej obecnej stronie, czy pełny sklep, który jest moją stroną”.
Własna domena ma sens, jeśli i tak wymieniasz przestarzałą stronę, chcesz wbudowanych stron platformy (kreator stron, strony ofert, opinie, galeria realizacji), a nie tylko widżetu konfiguratora, albo chcesz jednego systemu obsługującego wszystko od strony głównej po ofertę. Osadzenie ma sens, jeśli Twoja obecna strona dobrze działa pod kątem marki i treści i potrzebujesz tylko dodać do niej sam konfigurator.
Next Configurator obsługuje oba warianty: fragment kodu do osadzenia na istniejącej stronie WordPress, Shopify lub Webflow albo pełny sklep na Twojej własnej domenie zbudowany w kreatorze stron. Zobacz jak działa osadzanie i konfigurator 3D.
Co sprawdzić przed osadzeniem
Odhacz te punkty na stronie testowej przed startem:
- Płótno 3D ładuje się leniwie, więc nie spowalnia reszty strony.
- Działa na telefonie: większość ruchu w konfiguratorze jest mobilna.
- Skrypty śledzące czekają na zgodę na pliki cookie na Twojej stronie.
- Testowe zapytanie ofertowe pojawia się jako konwersja w Twojej platformie reklamowej.
- Kilka osadzeń na różnych stronach (jedno na produkt) działa, jeśli sprzedajesz więcej niż jedną linię produktów.
Szerszą decyzję zakupową, w którą to się wpisuje, opisuje przewodnik zakupowy po konfiguratorach 3D. Żeby wypróbować osadzenie na stronie testowej, zbuduj swój konfigurator. Fragment kodu masz w kilka minut; osadzanie jest zawarte w jednym planie.
