Implement consent-based tag firing in Usercentrics with the Browser SDK event API for a single-page application

Steps

1. Load the Usercentrics Browser SDK in your SPA entry point: import { UC_UI } from '@usercentrics/cmp-browser-sdk'; UC_UI.init({ settingsId: 'YOUR_SETTINGS_ID' });
2. Subscribe to consent-change events: UC_UI.getControllersBaseInfo().then((info) => { /* initial state */ }); and window.addEventListener('ucEvent', (e) => { if (e.detail.event === 'consent_status') { handleConsentChange(e.detail); } });
3. Read per-service consent status programmatically: const services = UC_UI.getServicesBaseInfo(); services.forEach((s) => { if (s.consent.status) { loadTag(s.id); } }); use the service templateId as the key to map to your third-party integrations.
4. For route changes in an SPA, do not re-initialize the SDK — consent state persists in memory; re-check consent status on route change for any tags that are route-scoped.
5. To trigger the consent banner programmatically (e.g., after a region-detection check), call UC_UI.showFirstLayer() to display the first layer or UC_UI.showSecondLayer() to open the full service settings.
6. In a server-side rendering (SSR) context, guard all SDK calls with typeof window !== 'undefined' checks as the Usercentrics SDK is browser-only.