Piksel Facebooka przed zgodą cookies? Jak to naprawiliśmy

Baner cookies wisi na dole ekranu. Nikt jeszcze niczego nie kliknął. A w zakładce „Sieć” narzędzi przeglądarki już widać zapytanie do Facebooka z PageView. Piksel Facebooka przed zgodą cookies – tak wyglądała nasza własna strona, kiedy mierzyliśmy jej szybkość. I tak samo wyglądało to na kilku stronach klientek, na których działa nasza wtyczka do piksela.

To jeden z tych błędów, których nie widać. Strona działa, baner jest, reklamy liczą konwersje. Problem wychodzi dopiero wtedy, gdy ktoś otworzy narzędzia deweloperskie albo gdy przyjdzie pytanie o RODO. Poniżej cała historia: jak to wykryliśmy, co okazało się przyczyną, jaka pułapka czekała w samej wtyczce do zgód i jak sprawdzić to u siebie w 2 minuty.

Skąd się wzięło: audyt szybkości, a nie audyt RODO

Zaczęło się od zupełnie innego zadania. Mieliśmy przyspieszyć stronę na telefonach. PageSpeed Insights pokazał listę skryptów, które blokują i spowalniają ładowanie, i wysoko na tej liście był skrypt piksela Mety. Według pomiaru kosztował około pół sekundy na telefonie.

Pierwsza myśl: przenieść go niżej albo załadować z opóźnieniem. Ale żeby sensownie to zrobić, trzeba było sprawdzić, kiedy właściwie piksel się odpala. Otworzyliśmy stronę w czystej przeglądarce (bez zapisanych ciasteczek), nie klikaliśmy w baner i patrzyliśmy na ruch sieciowy.

Wynik: zapytanie do connect.facebook.net i zdarzenie PageView szły od razu, przy pierwszym wejściu. Baner cookies był na ekranie, ale nic nie wstrzymywał. To przestało być tematem szybkości, a stało się tematem zgód.

Diagnoza: dlaczego baner nie zatrzymywał piksela

Na stronach, którymi się opiekujemy, działają dwa popularne banery: Complianz i CookieYes. Część z nich jest zainstalowana jako wtyczka, część wstawiona kodem albo przez Google Tag Manager. Piksel z kolei wstawiała nasza własna wtyczka (wcześniej na jednej ze stron robiła to PixelYourSite – z tym samym efektem).

Hipoteza 1: baner jest źle skonfigurowany. Częściowo.

Complianz potrafi blokować skrypty Facebooka, ale tylko wtedy, gdy w jego ustawieniach Facebook jest zaznaczony jako usługa używana na stronie. Tam, gdzie ta integracja była włączona, Complianz przepisywał skrypt piksela tak, że przeglądarka go nie wykonywała, i uruchamiał go dopiero po zgodzie na marketing. Tam, gdzie jej nie było – piksel szedł od razu.

Hipoteza 2: CookieYes coś blokuje. Nie blokuje.

CookieYes wstawiony przez Tag Managera pokazywał baner i zapisywał wybór użytkownika w ciasteczku, ale skryptów spoza Tag Managera sam nie zatrzymuje. Piksel wstawiony przez wtyczkę WordPressa był dla niego niewidoczny. Baner był, zgoda się zapisywała, a piksel i tak strzelał.

Hipoteza 3: wystarczy włączyć integrację w każdym banerze. Za mało.

To rozwiązanie zależałoby od tego, czy na każdej stronie ktoś pamięta o jednym checkboxie w panelu banera – i czy po każdej aktualizacji i zmianie banera nadal jest zaznaczony. Przy kilku stronach i dwóch różnych banerach to proszenie się o powrót problemu.

Rozwiązanie: wtyczka piksela sama czeka na zgodę

Zamiast polegać na konfiguracji każdego banera z osobna, przenieśliśmy odpowiedzialność do wtyczki, która piksel wstawia. W sekcji <head> ląduje mała bramka. Piksel i zdarzenia z przeglądarki ruszają dopiero wtedy, gdy bramka zobaczy zgodę marketingową.

Bramka rozpoznaje zgodę z dwóch najpopularniejszych banerów:

• Complianz – kategoria „marketing” (ciasteczko cmplz_marketing z wartością allow albo funkcja cmplz_has_consent),
• CookieYes – kategoria „advertisement” (ciasteczko cookieyes-consent zawierające advertisement:yes albo funkcja getCkyConsent).

Działa to także wtedy, gdy baner nie jest wtyczką WordPressa, tylko jest wstawiony kodem albo przez Tag Managera – bramka szuka go w przeglądarce po wczytaniu strony. Uproszczony szkielet wygląda tak:

<script>
(function () {
  function maZgode() {
    // Complianz
    if (typeof cmplz_has_consent === 'function') return cmplz_has_consent('marketing');
    if (document.cookie.indexOf('cmplz_marketing=allow') !== -1) return true;
    // CookieYes
    if (typeof getCkyConsent === 'function') {
      var z = getCkyConsent();
      return !!(z && z.categories && z.categories.advertisement);
    }
    var c = document.cookie.match(/cookieyes-consent=([^;]*)/);
  return !!(c && c[1].indexOf('advertisement:yes') !== -1);
  }
  function uruchom() { if (window.KZgodaStart) window.KZgodaStart(); }
  if (maZgode()) { uruchom(); return; }
  // brak zgody: nasłuchujemy kliknięcia w baner
  document.addEventListener('cmplz_status_change', function () { if (maZgode()) uruchom(); });
  document.addEventListener('cookieyes_consent_update', function () { if (maZgode()) uruchom(); });
})();
</script>

Zdarzenie, które wydarzyło się przed kliknięciem (np. wejście na stronę produktu), nie przepada – czeka w kolejce i jest wysyłane po „Akceptuj” na tej samej stronie. Po odrzuceniu albo wycofaniu zgody piksel w ogóle się nie ładuje.

Pułapka, przez którą bramka sama by się zablokowała

Pierwsza wersja bramki miała w kodzie słowa związane z Facebookiem – nazwę funkcji piksela i adres skryptu. Na stronie z Complianz efekt był zaskakujący: bramka nie działała wcale, a piksel nie odpalał się nawet po zgodzie.

Powód: Complianz skanuje kod strony i każdy skrypt inline, w którym widzi słowa kojarzone z Facebookiem, zamienia na type="text/plain". Przeglądarka takiego skryptu nie wykonuje, dopóki Complianz go nie „odblokuje”. Czyli nasza bramka, która miała czekać na zgodę, sama była zablokowana przez baner – i nie mogła niczego uruchomić.

Rozwiązanie było proste, gdy już wiedzieliśmy, o co chodzi: w kodzie bramki nie ma ani jednego słowa kojarzonego z Facebookiem. Bramka woła neutralnie nazwaną funkcję, a dopiero ta funkcja – w osobnym skrypcie – ładuje piksel. Complianz z włączoną integracją Facebooka dalej robi swoje (blokuje skrypt piksela i odblokowuje go po zgodzie), a bramka działa razem z nim, nie przeciwko niemu.

Nie chcesz samodzielnie przekopywać się przez skrypty, banery i ciasteczka? To dokładnie ten rodzaj rzeczy, którą robimy w ramach opieki nad WordPressem – wykrywamy i poprawiamy, zanim ktoś zapyta o RODO.

Jak to sprawdziliśmy, zanim poszło na strony klientek

Najpierw nasze własne strony – jedna z CookieYes, druga z Complianz. Sprawdzaliśmy w przeglądarce bez historii, z podglądem ruchu sieciowego, w trzech krokach:

1. Wejście bez klikania w baner – zero zapytań do Facebooka.
2. Kliknięcie „Akceptuj” – dokładnie jedno zdarzenie PageView.
3. Wycofanie zgody i ponowne wejście – znowu zero zapytań.

Dopiero potem nowa wersja wtyczki poszła na sześć stron. Na stronach klientek uruchamialiśmy sprawdzenie wyłącznie w trybie „bez klikania” – żeby nie zostawiać w ich statystykach sztucznych zgód i odsłon. Wszędzie wynik był ten sam: przed zgodą zero zapytań.

Jedna rzecz, która wyglądała jak błąd, a nim nie była: CookieYes potrafi sam przeładować stronę po kliknięciu „Akceptuj”. Wtedy w tej jednej chwili widać dwie odsłony. To ustawienie banera, nie problem z pikselem.

Efekt

• Zgoda: piksel i zdarzenia z przeglądarki nie wychodzą, dopóki odwiedzający nie zgodzi się na marketing – niezależnie od tego, czy na stronie jest Complianz, CookieYes, wtyczka czy baner wstawiony kodem.
• Szybkość: skrypt, który PageSpeed liczył na około pół sekundy na telefonie, nie ładuje się przy pierwszym wejściu. Strona rysuje się bez niego.
• Odporność: ochrona nie zależy od jednego checkboxa w panelu banera, który ktoś może odznaczyć przy porządkach.

Zdarzenia wysyłane z serwera (Conversions API) to osobny temat – nie idą przez przeglądarkę i baner ich nie widzi. To decyzja, którą warto świadomie podjąć razem z osobą odpowiedzialną za politykę prywatności, a nie zostawiać przypadkowi. Więcej o tym, dlaczego liczby w Menedżerze Reklam i w sklepie potrafią się rozjeżdżać, pisaliśmy w tekście o różnicy między sprzedażą w Mecie a w WooCommerce.

Jak sprawdzić, czy piksel Facebooka odpala się przed zgodą cookies na Twojej stronie

1. Otwórz stronę w oknie incognito (w zwykłym oknie zgoda może być już zapisana i baneru po prostu nie zobaczysz).
2. Włącz narzędzia deweloperskie (F12), zakładka „Sieć”, wpisz w filtr facebook.
3. Odśwież stronę i nie klikaj w baner. Jeśli pojawia się fbevents.js albo zapytanie z tr?id= – piksel idzie przed zgodą.
4. Kliknij „Odrzuć” i przejdź na inną podstronę. Nic nie powinno iść do Facebooka.
5. W nowym oknie incognito kliknij „Akceptuj” – teraz powinno pojawić się jedno PageView.
6. Jeśli używasz Complianz, sprawdź w kodzie strony (Ctrl+U), czy skrypt piksela ma type="text/plain" z data-category="marketing". Tak wygląda skrypt poprawnie wstrzymany przez baner.
7. Powtórz to na kilku podstronach, nie tylko na głównej – zdarza się, że inna wtyczka wstawia piksel tylko na stronie produktu albo podziękowania.

Czego nauczyła nas ta historia

Baner cookies to nie zabezpieczenie, tylko interfejs. Blokuje to, o czym wie, i tylko tak, jak go ustawiono. Dlatego każdy skrypt marketingowy, który sami wstawiamy, sam sprawdza zgodę, zamiast liczyć na to, że ktoś inny go zatrzyma. A każdą zmianę w tym obszarze sprawdzamy w przeglądarce, patrząc na ruch sieciowy – nie na to, co pokazuje panel wtyczki.

I jeszcze jedno: audyt szybkości bardzo często odsłania problemy z prywatnością. Te same skrypty, które spowalniają stronę, zwykle wysyłają też dane. Jeśli strona po włączeniu cache dalej jest czerwona w PageSpeed, warto przeczytać, dlaczego cache to nie wszystko.

FAQ

Czy piksel Facebooka może działać przed kliknięciem w baner cookies?

Nie powinien. Piksel zapisuje i odczytuje dane w przeglądarce oraz wysyła je do Mety w celach reklamowych, więc wymaga zgody na marketing. Jeśli w ruchu sieciowym widzisz zapytania do Facebooka zanim ktokolwiek kliknie „Akceptuj”, baner nie spełnia swojej roli.

Mam baner cookies. Dlaczego piksel i tak się ładuje?

Bo baner blokuje tylko skrypty, które rozpoznaje albo które dostał w konfiguracji. Piksel wstawiony przez inną wtyczkę, motyw albo ręcznie w kodzie może być dla niego niewidoczny. Trzeba albo ustawić integrację w banerze, albo – lepiej – użyć narzędzia do piksela, które samo czeka na zgodę.

Czy Complianz blokuje piksel Facebooka automatycznie?

Tylko gdy w ustawieniach zaznaczysz, że na stronie używasz usług Facebooka. Wtedy przepisuje skrypt piksela na type="text/plain" i uruchamia go po zgodzie na marketing. Bez tego ustawienia piksel idzie od razu.

Czy CookieYes zablokuje piksel wstawiony przez wtyczkę WordPressa?

W naszym przypadku nie – CookieYes wstawiony przez Tag Managera zapisywał zgodę, ale nie zatrzymywał skryptu dodanego przez wtyczkę. Dlatego zgodę odczytujemy z jego ciasteczka i dopiero wtedy uruchamiamy piksel.

Czy wstrzymanie piksela do zgody pogorszy wyniki reklam?

Mniej zdarzeń z przeglądarki trafi do Mety, bo część osób odrzuci marketing. Ale to są zdarzenia, których i tak nie wolno było zbierać. Zdarzenie sprzed kliknięcia nie przepada – po „Akceptuj” na tej samej stronie jest wysyłane z kolejki.

Czy wstrzymanie piksela przyspiesza stronę?

Tak, przy pierwszym wejściu przeglądarka nie musi pobierać i wykonywać skryptu Mety. U nas PageSpeed liczył ten skrypt na około pół sekundy na telefonie – po zmianie przy pierwszym wejściu go nie ma.