Bakit Mahirap ang mga SPA para sa Pahintulot sa Cookie

Ang mga single-page application ay naglo-load nang isang beses at humahawak ng nabigasyon sa panig ng kliyente. Walang pag-reload ng pahina upang muling mag-trigger ng mga pagsusuri ng pahintulot. Ang mga third-party na script na naka-load sa index.html ay tumatakbo bago lumitaw ang anumang UI ng pahintulot.

Mga Karaniwang Pagkakamali sa SPA

• Paglo-load ng Google Analytics sa index.html bago ang pahintulot
• Hindi muling sinusuri ang estado ng pahintulot sa mga pagbabago ng ruta
• Pagkawala ng estado ng pahintulot kapag nag-re-render ang app
• Pag-trigger ng mga tracking event sa lifecycle ng component nang walang mga pagsusuri ng pahintulot

Tamang Implementasyon

1. I-load lamang ang CMP script sa iyong HTML head — wala nang iba
2. I-load ang mga third-party na script nang may kundisyon pagkatapos lamang maibigay ang pahintulot
3. Gamitin ang JavaScript API ng CMP upang suriin ang estado ng pahintulot nang programmatically
4. Protektahan ang mga analytics at marketing na tawag sa iyong mga component gamit ang mga pagsusuri ng pahintulot

Mga Tip na Tiyak sa Framework

React

Gumamit ng consent context provider. Suriin ang estado ng pahintulot sa mga useEffect hook bago simulan ang mga tracker.

Vue

Gumawa ng consent plugin. Gumamit ng mga router guard upang i-verify ang estado ng pahintulot sa nabigasyon.

Angular

Gumamit ng consent service na ini-inject sa pamamagitan ng DI. Suriin ang pahintulot sa mga route guard at sa pagsisimula ng component.

FlexyConsent sa mga SPA

Ang single-script na diskarte ng FlexyConsent ay gumagana sa anumang framework. Naglo-load ito nang asynchronous, pinamamahalaan ang estado ng pahintulot sa pamamagitan ng mga cookie, at nagbibigay ng JavaScript API para sa mga programmatic na pagsusuri ng pahintulot. Hindi kailangan ng SDK na tiyak sa framework.