I need help, I am noob

[Eistee112]

I am basically trying to make Google Analytics load, when I click on Accept All or toggle the Analytics Switch and then Save Preferences. This is my cookieconsent-config.js and it is not working. Can u help me please?

import 'https://cdn.jsdelivr.net/gh/eistee112/cookieconsent/dist/cookieconsent.umd.js';

document.documentElement.classList.add('cc--elegant-black');

CookieConsent.run({
    guiOptions: {
        consentModal: {
            layout: "box wide",
            position: "bottom center",
            equalWeightButtons: true,
            flipButtons: false
        },
        preferencesModal: {
            layout: "bar wide",
            position: "right",
            equalWeightButtons: true,
            flipButtons: false
        }
    },
    categories: {
        necessary: { readOnly: true },
        functionality: {},
        analytics: {
            accepted: function() {
                // Google Analytics laden, wenn Analytics akzeptiert wird
                var script = document.createElement('script');
                script.src = "https://www.googletagmanager.com/gtag/js?id=G-Z9N57YTM3X";
                document.head.appendChild(script);

                script.onload = function() {
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', 'G-Z9N57YTM3X', { 'anonymize_ip': true });
                };
            }
        },
        marketing: {}
    },
    language: {
        default: "en",
        autoDetect: "browser",
        translations: {
            de: {
                consentModal: {
                    title: "Hallo Reisende, es ist Kekszeit!",
                    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
                    acceptAllBtn: "Alle akzeptieren",
                    acceptNecessaryBtn: "Alle ablehnen",
                    showPreferencesBtn: "Einstellungen verwalten",
                    footer: "<a href=\"#link\">Datenschutz</a>\n<a href=\"#link\">Bedingungen und Konditionen</a>"
                },
                preferencesModal: {
                    title: "Präferenzen für die Zustimmung",
                    acceptAllBtn: "Alle akzeptieren",
                    acceptNecessaryBtn: "Alle ablehnen",
                    savePreferencesBtn: "Einstellungen speichern",
                    closeIconLabel: "Modal schließen",
                    serviceCounterLabel: "Dienstleistungen",
                    sections: [
                        {
                            title: "Verwendung von Cookies",
                            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                        },
                        {
                            title: "Streng Notwendige Cookies <span class=\"pm__badge\">Immer Aktiviert</span>",
                            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                            linkedCategory: "necessary"
                        },
                        {
                            title: "Funktionalitäts Cookies",
                            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                            linkedCategory: "functionality"
                        },
                        {
                            title: "Analytische Cookies",
                            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                            linkedCategory: "analytics"
                        },
                        {
                            title: "Werbung Cookies",
                            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                            linkedCategory: "marketing"
                        },
                        {
                            title: "Weitere Informationen",
                            description: "For any query in relation to my policy on cookies and your choices, please <a class=\"cc__link\" href=\"#yourdomain.com\">contact me</a>."
                        }
                    ]
                }
            },
            en: {
                consentModal: {
                    title: "You control your data",
                    description: "We use cookies to enhance your browsing experience, analyze site traffic, and personalize content. By clicking 'Accept all', you consent to our use of cookies. You can also 'Reject all' non-essential cookies or click 'Manage preferences' to customize your cookie settings. For more information about how we use cookies, please see our Privacy Policy.",
                    acceptAllBtn: "Accept all",
                    acceptNecessaryBtn: "Reject all",
                    showPreferencesBtn: "Manage preferences",
                    footer: "<a href=\"privacypolicy.html\">Privacy Policy</a>\n<a href=\"termsandconditions.html\">Terms and conditions</a>"
                },
                preferencesModal: {
                    title: "Consent Preferences Center",
                    acceptAllBtn: "Accept all",
                    acceptNecessaryBtn: "Reject all",
                    savePreferencesBtn: "Save preferences",
                    closeIconLabel: "Close modal",
                    serviceCounterLabel: "Service|Services",
                    sections: [
                        {
                            title: "Cookie Usage",
                            description: "This website uses cookies to enhance your browsing experience. Some cookies are essential for the website to function properly, while others help us improve our services by collecting anonymous information about how visitors use our site."
                        },
                        {
                            title: "Strictly Necessary Cookies <span class=\"pm__badge\">Always Enabled</span>",
                            description: "These cookies are essential for the website to function properly. They enable core functionality such as security, network management, and account access. You cannot disable these cookies as the website cannot function properly without them.",
                            linkedCategory: "necessary"
                        },
                        {
                            title: "Functionality Cookies",
                            description: "These cookies allow the website to remember choices you make (such as your username, language or region) and provide enhanced, more personal features. They may also be used to provide services you have requested such as watching a video or commenting on a blog.",
                            linkedCategory: "functionality"
                        },
                        {
                            title: "Analytics Cookies",
                            description: "These cookies collect information about how visitors use our website, such as which pages visitors go to most often and if they receive error messages. They help us improve our website and measure the effectiveness of our advertising campaigns. All information these cookies collect is aggregated and anonymous.",
                            linkedCategory: "analytics"
                        },
                        {
                            title: "Advertisement Cookies",
                            description: "These cookies are used to deliver advertisements more relevant to you and your interests. They are also used to limit the number of times you see an advertisement as well as help measure the effectiveness of an advertising campaign. They remember that you have visited a website and this information may be shared with other organizations such as advertisers.",
                            linkedCategory: "marketing"
                        },
                        {
                            title: "More information",
                            description: "For any query in relation to my policy on cookies and your choices, please <a class=\"cc__link\" href=\"contact.html\">contact me</a>."
                        }
                    ]
                }
            }
        }
    },
    disablePageInteraction: true,
    // Zusätzliche Konfiguration: Bei "Alle akzeptieren" werden auch Analytics-Cookies geladen
    onAccept: function(cookie) {
        console.log("onAccept called:", cookie); // Add this line
        if (cookie.categories.analytics) {
            console.log("Analytics accepted!"); // Add this line
            var script = document.createElement('script');
            script.src = "https://www.googletagmanager.com/gtag/js?id=G-Z9N57YTM3X";
            document.head.appendChild(script);

            script.onload = function() {
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'G-Z9N57YTM3X', { 'anonymize_ip': true });
            };
        } else {
            console.log("Analytics not accepted."); // Add this line
        }
    }
});

[Eistee112]

PLEASE!!!

[orestbida]

The simplest way to load any script is via script tags as described here.

So you would do something like this:

<script type="text/plain" data-category="analytics">
    console.log("Analytics accepted!"); // Add this line
    var script = document.createElement('script');
    script.src = "https://www.googletagmanager.com/gtag/js?id=G-Z9N57YTM3X";
    document.head.appendChild(script);

    script.onload = function() {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-Z9N57YTM3X', { 'anonymize_ip': true });
    };
</script>

<script type="module" src="cookieconsent-config.js"></script>

[Eistee112]

Thank you very much!

I am slowly starting to understand, although I have two more questions:

• Should Google Analytics now load properly, when I press Accept All or are further necessary implementation steps missing? I do not fully understand the documentation, but I am slowly starting to understand.
• I am utilizing Visual Code Studio. When I start a Live Server should Google Analytics already recieve data or does this only work in an acutal web environment?

Thank you so much in advance!