Wdrożenie CookieZen na platformie Shoper
Na Shoperze CookieZen przekazuje decyzję użytkownika do wbudowanego mechanizmu zgód platformy, więc własne skrypty warunkuje się narzędziami Shopera, a nie atrybutami CookieZen.
Shoper ma własny system zgód, Customer Privacy API. CookieZen nie zastępuje go ani nie dubluje. Przejmuje rolę banera i przy każdej decyzji użytkownika wpisuje zgody do tego API, dzięki czemu funkcje sklepu zależne od zgody działają dalej tak, jak przy natywnym banerze Shopera.
Uruchomienie CookieZen w sklepie
Sposób wdrożenia zależy od szablonu, na którym działa sklep.
Szablon Storefront
- Zainstaluj moduł CookieZen w sklepie i załóż konto na cookiezen.pl, dodając domenę sklepu.
- Skopiuj Site Key z zakładki Integracja w panelu CookieZen.
- W edytorze szablonu przejdź do Wygląd i treści → Obecny szablon graficzny → Edytuj Układ i Styl Szablonu → Popupy i dodatki → CookieZen, wklej Site Key i opublikuj zmiany.
Moduł działa na wszystkich podstronach sklepu i nie wymaga wstawiania niczego do układu strony.
Szablon RWD
Na starszym szablonie RWD modułu nie ma, więc skrypt wkleja się ręcznie w Dodatki i integracje → Integracje własne, w sekcji head i na samej górze, przed pozostałymi skryptami. Kolejność ma tu znaczenie, bo sygnały zgody muszą dotrzeć do narzędzi Google i Microsoft, zanim te zaczną zbierać dane.
<script src="https://cz-cdn.com/api/cmp/loader?site_key=TWOJ_SITE_KEY"></script>Gotowy kod z podstawionym Site Key znajduje się w panelu CookieZen, w zakładce Integracja.
Jak zgoda trafia do Shopera
Synchronizacja jest automatyczna i nie wymaga żadnego kodu w szablonie. Po każdej decyzji użytkownika CookieZen zapisuje odpowiednie zgody w Customer Privacy API według tego mapowania.
| Kategoria w banerze CookieZen | Zgoda w Shoperze |
|---|---|
| Preferencje | functionalConsent |
| Analityka | analyticsConsent oraz platformAnalyticsConsent |
| Marketing | marketingConsent |
Kategoria „Niezbędne" nie ma odpowiednika w Shoperze, bo obejmuje cookies, które i tak muszą działać.
Jak warunkować własne skrypty
Własne skrypty warunkuje się sposobem opisanym przez samego Shopera, czyli owinięciem kodu w funkcję odpowiadającą kategorii zgody. CookieZen wpisuje decyzję użytkownika właśnie do tego mechanizmu, więc taki kod uruchomi się dokładnie wtedy, gdy odwiedzający wyrazi zgodę w banerze.
window.customerPrivacy.onMarketingConsentGranted(function () {
// tu kod wymagający zgody marketingowej
});Analogicznie działają onAnalyticsConsentGranted i onFunctionalConsentGranted. To komplet callbacków opisanych przez Shopera — zgoda platformAnalyticsConsent, którą CookieZen ustawia razem z analityczną, nie ma udokumentowanego odpowiednika w tej formie. Miejsca, w które Shoper pozwala wklejać takie skrypty, oraz zasady przypisywania cookies do kategorii opisuje pomoc platformy: Jak dostosować skrypty do kategorii cookies.
Jedno ograniczenie tego mechanizmu warto znać: funkcje reagują na nadanie zgody, więc nie zatrzymają kodu, który już się uruchomił, jeśli użytkownik później zgodę wycofa.
Atrybuty type="text/plain" i data-cmp-category, opisane w Blokowanie skryptów do momentu uzyskania zgody, działają na Shoperze normalnie i można ich użyć zamiast owijania kodu. Na tej platformie nie są jednak potrzebne, bo mechanizm Shopera obsługuje ten sam przypadek i jest zgodny z dokumentacją platformy.
Czego CookieZen na Shoperze nie zrobi
Skryptów, które wstrzykuje sama platforma, nie ma w szablonie i nie da się ich objąć żadnym z powyższych sposobów. Najczęstszy przypadek to piksel Meta dodany przez integrację Facebook Business Extension. Zapisuje swoje cookies, zanim użytkownik cokolwiek kliknie, a decyzja o jego zachowaniu leży po stronie Shopera oraz Meta, nie po stronie CookieZen. Jeśli potrzebna jest pełna kontrola nad takim pikselem, wstawia się go samodzielnie jako własny skrypt i warunkuje zgodą, zamiast korzystać z natywnej integracji.
Jak sprawdzić, że synchronizacja działa prawidłowo
W sklepie otwartym w oknie prywatnym należy zaakceptować wszystkie zgody w banerze CookieZen, a następnie sprawdzić stan w konsoli przeglądarki (klawisz F12). Obiekt, który trzeba odpytać, zależy od szablonu — to dwa różne mechanizmy platformy, nie dwie nazwy tego samego.
Na szablonie RWD Customer Privacy API leży bezpośrednio na window:
console.log(window.customerPrivacy);Na szablonie Storefront API jest rejestrowane jako usługa i dostęp idzie asynchronicznie:
window.useStorefront(function (storefront) {
storefront.getApi('customerPrivacyApi').then(function (api) {
console.log(api);
});
});Wypisujemy cały obiekt, a nie wynik konkretnej metody, bo Shoper nie dokumentuje gettera stanu i jego nazwa mogłaby się różnić między wersjami platformy. W obiekcie powinny być widoczne metody nadawania i wycofywania zgód, a w stanie po pełnej akceptacji wszystkie cztery zgody: analyticsConsent, functionalConsent, marketingConsent i platformAnalyticsConsent. Pusta lista oznacza najczęściej, że w sklepie działa jeszcze drugi menedżer zgód albo poprzednie wdrożenie CookieZen przez Google Tag Managera lub ręcznie wklejony skrypt.