Skip to content

Klaro not working as expected after page navigation in Nextjs app router #552

@davidbucka

Description

@davidbucka

Klaro Config

{
    "acceptAll": true,
    "cookieName": "klaro-consent",
    "default": false,
    "elementID": "klaro",
    "hideDeclineAll": false,
    "htmlTexts": true,
    "lang": "de",
    "mustConsent": false,
    "noNotice": false,
    "poweredBy": "https://klaro.org/",
    "services": [
        {
            "cookies": [],
            "name": "soundcloud",
            "onlyOnce": true,
            "optOut": true,
            "purposes": [
                "external-content"
            ],
            "required": false
        },
    ],
    "storageMethod": "cookie",
    "testing": false,
    "translations": [...]
    "version": 2
}

Example of init function

export async function initKlaro(
  services: Project["cookieConsent"]["services"]
) {
  if (typeof window !== "undefined") {
    const Klaro = await import("klaro")
    const config = await createKlaroConfig(services)
    window.klaroConfig = config
    window.klaro = Klaro
    Klaro.setup(config)
  }
}

export function CookieConsentSetup({ project }: { project: ProjectResponse }) {
  const pathname = usePathname()

  const setupKlaro = React.useCallback(
    () => initKlaro(project.cookieConsent.services),
    [project.cookieConsent.services]
  )

  React.useEffect(() => setupKlaro(), [setupKlaro, pathname])

  return <div id="klaro" />
}

Example of iframe

export function IframeExample() {
  return (
    <div>
      <iframe
        allow="autoplay"
        data-name="soundcloud"
        data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/2095559661..."
        height="300"
        width="100%"
      ></iframe>
    </div>
  )
}

Current behavior

When navigating between pages using Next.js client-side navigation (e.g., via or useRouter), and giving consent on a page where no iframe is on, the iframes src attribute is not set after navigating to a page with an iframe.

I already tried calling Klaro.setup(config) after each page change and experimented with setTimeout() and so on, but it seems it does not re-process iframes after page change.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions