如何让Cookiebot回调函数仅在被调用时执行而非页面加载自动运行？

Hey there, let's break down why your script is causing an infinite loop and how to fix it:

The Root Cause #

Your current CookiebotCallback_OnAccept function runs every time the page loads (even if the user already gave consent on a previous visit), and since you're calling window.location.reload(true) inside it, the page refreshes, loads again, triggers the callback once more, and the cycle repeats.

Solution 1: Only Refresh When Consent Actually Changes #

We can add a check to make sure we only refresh the page when the user's consent status is new or updated (not on every page load). Here's the adjusted code:

<script type="text/javascript">
function CookiebotCallback_OnAccept() {
    // Only refresh if consent status has changed (first-time accept or updated choice)
    const consentChanged = Cookiebot.consent.previous === undefined || 
                          Cookiebot.consent.previous.statistics !== Cookiebot.consent.statistics;

    if (consentChanged) {
        window.location.reload(true);
    }

    // Handle statistics consent logic here
    if (Cookiebot.consent.statistics) {
        // Add your statistics-related code (e.g., initialize analytics)
    }
}
</script>

How this works:

• Cookiebot.consent.previous stores the user's prior consent state. It will be undefined on the first time they accept.
• We compare the previous and current statistics consent statuses—only if they differ do we trigger a refresh. This stops the infinite loop.

Solution 2: Skip Refresh Entirely (Better UX) #

Even better, avoid refreshing the page altogether by dynamically loading any required resources (like analytics scripts) right when consent is given. This is smoother for users and eliminates the loop entirely:

<script type="text/javascript">
function CookiebotCallback_OnAccept() {
    if (Cookiebot.consent.statistics) {
        // Dynamically load your analytics script (example with Google Analytics)
        const analyticsScript = document.createElement('script');
        analyticsScript.src = 'https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID';
        analyticsScript.async = true;
        document.body.appendChild(analyticsScript);

        // Initialize the analytics tool
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'YOUR_GA_ID');
    }
}
</script>

Quick Notes #

• Make sure your main Cookiebot script is properly loaded in the <head> of your page, with the correct configuration to trigger the onAccept callback only when relevant.
• If you must use a page refresh, always include the consent change check to prevent loops.

内容的提问来源于stack exchange，提问作者Liron Harel