Pređi na glavni sadržaj

React i Next.js

Cilj: učitajte OptSens kao first-party u React ili Next.js aplikaciji, obavestite ga o promenama rute na strani klijenta i reagujte na saglasnost u svojim komponentama.

U single-page aplikaciji stranica se ne učitava ponovo između ruta, pa se OptSens mora obavestiti kada se ruta promeni. Vidi SPA podršku za osnovne metode.

Next.js: učitajte snippet u zaglavlju​

Učitajte skriptu sa beforeInteractive kako bi se pokrenula pre vaših ostalih tagova, isto kao first-party snippet u zaglavlju. U App Router-u, postavite je u koreni app/layout.tsx.

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://cdn.optsens.com/optsens.min.js/YOUR_DOMAIN_ID"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Zamenite YOUR_DOMAIN_ID vrednošću sa stranice Integracija na vašoj kontrolnoj tabli.

Obavestite OptSens o promeni rute​

Pozovite OptSens.onRouteChange() kada se ruta promeni. U App Router-u, pratite pathname:

'use client';
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';

export function ConsentRouteSync() {
  const pathname = usePathname();
  useEffect(() => {
    window.OptSens?.onRouteChange();
  }, [pathname]);
  return null;
}

Renderujte <ConsentRouteSync /> jednom unutar svog layout-a. Za običnu React Router aplikaciju, pozovite je iz efekta na location.pathname.

Reagujte na saglasnost u komponenti​

Pretplatite se na consent_update i očistite slušalac pri demontiranju. Događaj se ponavlja za kasne pretplatnike, pa se ovo i dalje izvršava ako je saglasnost već data pre nego što se komponenta montirala.

'use client';
import { useEffect, useState } from 'react';

export function useAnalyticsConsent() {
  const [allowed, setAllowed] = useState(false);
  useEffect(() => {
    const onUpdate = (consent: { analytics: boolean }) => setAllowed(consent.analytics);
    window.OptSens?.on('consent_update', onUpdate);
    return () => window.OptSens?.off('consent_update', onUpdate);
  }, []);
  return allowed;
}

Napomena o TypeScript-u​

window.OptSens se dodaje u toku izvršavanja od strane snippet-a. Deklarišite ga kako bi TypeScript prihvatio pozive:

declare global {
  interface Window {
    OptSens?: any;
  }
}
export {};

Provera​

  1. Pokrenite aplikaciju i otvorite je u privatnom prozoru. Baner se prikazuje pri prvoj poseti.
  2. Krećite se između ruta na strani klijenta. Potvrdite da se događaj route_change pokreće (vidi Događaji).
  3. Sačuvajte izbor saglasnosti. Vaš consent_update slušalac ažurira komponentu.

Povezane stranice​