Integracja aplikacji

Wdrożenie CookieZen na platformie Shoper

Jak uruchomić CookieZen w sklepie na Shoperze na szablonie Storefront i RWD oraz jak warunkować własne skrypty zgodą przez Customer Privacy API platformy.

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

  1. Zainstaluj moduł CookieZen w sklepie i załóż konto na cookiezen.pl, dodając domenę sklepu.
  2. Skopiuj Site Key z zakładki Integracja w panelu CookieZen.
  3. 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.

Kod
<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 CookieZenZgoda w Shoperze
PreferencjefunctionalConsent
AnalitykaanalyticsConsent oraz platformAnalyticsConsent
MarketingmarketingConsent

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.

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

Kod
console.log(window.customerPrivacy);

Na szablonie Storefront API jest rejestrowane jako usługa i dostęp idzie asynchronicznie:

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

Przestań zgadywać, co robi Twój baner

14 dni za darmo, bez podawania karty.