Jak zintegrować CMP ze sklepem Shopify?

Informacja o wycofaniu funkcji Checkout Extensibility w Shopify: Prawdopodobnie wiesz już, że skrypty Checkout Extensibility w Shopify zostaną wycofane. W rezultacie baner zgody nie będzie już wyświetlany podczas procesu realizacji transakcji. Jeśli jednak wdrożysz tryb zgody Shopify zgodnie z naszymi dokumentami pomocy, Shopify będzie płynnie zarządzać zgodami za Ciebie. Możecie być pewni, że przestrzeganie naszych wytycznych zapewni płynne działanie wszystkiego. Aby uzyskać szczegółowe instrukcje, prosimy o dalszą lekturę.

Uwaga: poniższy opis dotyczy wyłącznie ręcznego blokowania kodu. Jeśli chcesz skorzystać z automatycznego blokowania kodu, upewnij się, że kod CMP został wstawiony bezpośrednio po <head> elementu kodu Twojej strony internetowej.

API dotyczące prywatności klientów Shopify

Aby bezpiecznie uruchomić określone wtyczki w Shopify, należy wywołać interfejs API Shopify Customer Privacy. CMP zrobi to automatycznie, jeśli dokładnie zastosujesz się do poniższych kroków integracji.

Film integracyjny

Integracja krok po kroku

Aby zintegrować kod CMP ze sklepem Shopify, wykonaj następujące kroki:

  1. W swoim koncie Consentmanager przejdź do Menu > CMP > Integracje i włącz tryb zgody Shopify

  2. Upewnij się w sekcji Menu > CMP > Cele, że masz wystarczającą liczbę aktywnych celów w swoim CMP
  3. (opcjonalnie) Jeśli korzystasz z funkcji automatycznego blokowania, zalecamy wyłączenie automatycznego blokowania nieznanych adresów URL:

  4. Przejdź do Menu > CMP > Dostawcy i upewnij się, że na liście dostawców znajdują się dostawcy o nazwie „Shopify International Limited …” (ID s971, s2789, s2790, s2791, s2697)

    (Uwaga: nie wszyscy z tych dostawców są niezbędni we wszystkich przypadkach)
  5. W swojej liście dostawców upewnij się, że wszyscy dostawcy Shopify są przypisani do odpowiedniego celu
  6. Przejdź do Menu > CMP > Pobierz kody dla… Strony internetowej i skopiuj kod CMP
  7. Zaloguj się na swoje konto Shopify
  8. W menu kliknij Sklep internetowy > Motywy i edytuj kod bieżącego motywu:

  9. Otwórz plik theme.liquid, wyszukaj <body ...> (jeśli chcesz użyć ręcznego kodu blokującego) lub <head ...> (jeśli chcesz użyć kodu automatycznego blokowania) i wstaw kod CMP zaraz po nim:

  10. Naciśnij „Zapisz” i wróć do strony głównej sklepu
  11. Kliknij Ustawienia > Prywatność klientów i wyłącz baner plików cookie (jeśli baner plików cookie Shopify jest włączony, w przeciwnym razie pomiń ten krok)



    Uwaga: Jeśli Shopify nie wyświetla opcji Menu Baner plików cookie > Więcej działań > Wyłącz baner plików cookie, upewnij się, że najpierw usunąłeś wszystkie inne wtyczki banerów plików cookie poprzez Ustawienia > Aplikacje i kanały sprzedaży > … > Odinstaluj). W niektórych przypadkach pomocne jest również włączenie własnego banera plików cookie Shopify, a następnie ponowne jego wyłączenie.

    Uwaga: W niektórych wersjach Shopify ustawienie to nosi nazwę „Usuń baner plików cookie” zamiast „Wyłącz baner plików cookie”:

     

  12. Wróć do Ustawienia > Prywatność klientów i kliknij Baner plików cookie, a następnie Więcej działań > Użyj niestandardowego banera


    plików cookie Uwaga: W niektórych wersjach Shopify to ustawienie nie jest dostępne, zamiast tego powinny pojawić się następujące ekrany:

    Ostrzeżenie wyświetlane tutaj przez Shopify można zignorować, ponieważ ręcznie wstawiłeś kod do szablonu.

  13. Włączając niestandardowy baner dotyczący plików cookie (lub jeśli jest już włączony w Ustawienia > Prywatność klienta > Baner dotyczący plików cookie > Regiony > Edytuj), upewnij się, że wszystkie regiony są zaznaczone, a następnie kliknij Potwierdź.

Ważne: Zawsze upewnij się, że wyłączyłeś wszystkie inne wtyczki banerów plików cookie oraz wtyczki trybu zgody w swoim sklepie Shopify w sekcji Ustawienia > Aplikacje i kanały sprzedaży:

 

Typowe problemy

Problem: Własne narzędzia analityczne Shopify już nie liczą / liczą mniej

W niektórych przypadkach automatyczne blokowanie może również blokować wewnętrzny system śledzenia Shopify. Aby temu zapobiec, zaloguj się na swoje konto ConsentManager, przejdź do Menu > CMP > Inne i wyłącz ustawienie „Blokuj skrypty wbudowane”:

Problem: domyślne ustawienie trybu zgody Google to „przyznane”

Niestety, własny system śledzenia Shopify domyślnie ustawia status zgody w trybie zgody Google na granted . Aby temu zapobiec, dodaj następujący kod do swojego motywu:

  1. W menu kliknij Sklep internetowy > Motywy i edytuj kod bieżącego motywu:

  2. Otwórz plik theme.liquid, wyszukaj <head>
  3. Zaraz po <head> wstaw następujący kod (po <head> i przed jakimkolwiek innym kodem):
 <script>
  //Prevent Shopify from writing default consent mode before consentmanager loaded
  window.dataLayer = window.dataLayer || [];
  function gtag ()
  {
   if (!('cmploaded' in this))
   {this.cmploaded = false;}
   if (arguments.length > 1 && arguments[0] == 'consent' && arguments[1] == 'default' && !this.cmploaded)
   { return; }
   if (arguments.length > 1 && arguments[0] == 'set' && arguments[1] == 'developer_id.dMzk4MW')
   {this.cmploaded = true;}
   dataLayer.push(arguments);
  }
  window.dataLayer.push(['consent', 'default', {
   'ad_storage':         'denied',
   'analytics_storage':  'denied',
   'ad_user_data':       'denied',
   'ad_personalization': 'denied',
   'wait_for_update':    500
  }]);
 </script>

Problem: warstwa Consent Layer w Consentmanager nie jest widoczna

Niektóre motywy Shopify mają dodane style CSS, które ukrywają puste elementy DIV. Jeśli w swoim projekcie aktywowałeś opcję WCAG (Menu > Projekty > Edytuj projekt > Ustawienia pola), wówczas CMP jest umieszczone w korzeniu cienia, dlatego nadrzędny element DIV wydaje się być pusty i jest ukryty przez CSS Shopify. Aby to naprawić, musisz dodać niestandardową regułę, aby nie ukrywać pustych elementów DIV:

  1. W panelu administracyjnym Shopify przejdź do Sklep internetowy > Motywy
  2. Kliknij Dostosuj.
  3. Kliknij Ustawienia motywu.
  4. Kliknij „Custom CSS”.
  5. Dodaj nową regułę CSS i naciśnij Zapisz:
div#cmpwrapper {display: block;}

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!