Wdrożenie CookieOfficer w aplikacjach SPA

Aplikacje SPA, budowane w React, Vue, Angular, Next.js czy Nuxt, powodują, że użytkownicy przechodzą między podstronami bez ich przeładowania. Kod CookieOfficer umieszczasz w nich raz, w dokumencie HTML, a nie w komponencie. Poniżej dowiesz się gdzie dodać kod w zależności od rodzaju aplikacji oraz to, co zmienia się w liczeniu odsłon.

Przed rozpoczęciem

Skopiuj kod ze strony Instalacja w panelu CookieOfficer. W sekcji „Sposób wdrożenia” wybierz „Kod na stronie”, a następnie w karcie „Wklej kod na początku <head>” kliknij „Kopiuj” przy bloku „Skrypt CookieOfficer”.

Gdzie należy umieścić kod CookieOfficer?

Aplikacja renderowana w przeglądarce, na przykład React, Vue albo Angular. Wklej kod w pliku index.html, w sekcji <head>, jako pierwszy skrypt. To jedyny dokument HTML w takiej aplikacji, więc obsługuje wszystkie ścieżki.

Aplikacja renderowana po stronie serwera, na przykład Next.js albo Nuxt. Wklej kod w komponencie odpowiadającym za dokument, czyli tam, gdzie framework składa sekcję <head> dla wszystkich stron. W Next.js jest to układ główny albo komponent dokumentu, zależnie od wersji.

W obu przypadkach obowiązuje ta sama zasada: nasz kod musi być wdrożony przed pozostałymi skryptami. Blokowanie automatyczne obejmuje wyłącznie to, co uruchomi się po nim.

Czego nie należy robić w kodzie aplikacji

• Nie dodawaj kodu w komponencie widoku. Zamontuje się dopiero po pierwszym renderowaniu, więc skrypty śledzące zdążą wystartować przed wyrażeniem zgody przez użytkownika.
• Nie wstrzykuj skryptu dynamicznie z poziomu aplikacji. Traci wtedy sens jako bloker, bo działa dopiero po uruchomieniu kodu, który miał zatrzymać.
• Nie wywołuj niczego po zmianie widoku. Nie ma takiej potrzeby, co wyjaśnia sekcja poniżej.

Co dzieje się przy zmianie podstrony?

Nasz kod podpina się pod zmianę trasy i przy każdym przejściu zapisuje odsłonę oraz sprawdza, czy nowa strona nie jest wykluczona spod banera. Decyzja użytkownika obowiązuje przez całą wizytę i nie trzeba jej odświeżać, więc nie musisz nic wywoływać ręcznie ani ponownie ładować skryptu.

Sygnałów zgody nie wysyłamy ponownie przy zmianie widoku. Stan zgody obowiązuje przez całą wizytę, a tagi w Google Tag Managerze dostają go raz, po decyzji użytkownika.

Ma to jedną konsekwencję, o której warto wiedzieć zawczasu: zmiana trasy w aplikacji jednostronicowej liczy się jako odsłona, tak samo jak wejście na stronę w klasycznym serwisie. Statystyki i limit planu rosną więc szybciej niż liczba wejść na witrynę, bo użytkownik przeglądający pięć podstron generuje pięć odsłon. Jako odsłonę liczymy też powrót przyciskiem wstecz i naprzód, a dwa wejścia pod rząd na ten sam adres liczymy raz.

Jak zweryfikować wdrożenie CookieOfficer?

Wróć na stronę Instalacja w panelu CookieOfficer i kliknij „Zweryfikuj teraz”. Po powodzeniu zobaczysz nagłówek „Skrypt wykryty i aktywny”.

Otwórz aplikację w oknie incognito, wybierz decyzję w banerze, a następnie przejdź do innego widoku. Baner nie powinien pojawić się ponownie, a decyzja użytkownika ma zostać zapisana w pliku cookie co_consent.

Na koniec uruchom skan serwisu w panelu i wejdź na stronę Cookies. Nad listą wykrytych pozycji nie powinno być komunikatu o trackerach działających po odrzuceniu zgody przez użytkownika.

Częste błędy, których należy unikać

• Nie umieszczaj kodu poza dokumentem HTML. Kod w komponencie uruchomi się za późno, żeby cokolwiek zablokować.
• Nie licz na blokowanie skryptów, które ładuje sam framework. Wszystko, co uruchomi się przed naszym kodem, pozostaje poza jego zasięgiem.
• Nie zapominaj o środowisku produkcyjnym. Kod dodany wyłącznie w konfiguracji lokalnej nie trafi na wdrożoną aplikację.
• Nie zaskocz się liczbą odsłon. Każde przejście między widokami to osobna odsłona, także w limicie planu.