#Pattern for setting cookie permissions and setting cookies - vanilla js

1 messages · Page 1 of 1 (latest)

long jay
#

TLDR: I need to initialize google tag, meta pixel, zendesk chat, only after user has consented, and with localization via the url.

I had set up gtag in my <head> but now need to implement cookie consenting, I have now set up a script to append scripts to the head when a user clicks agree, but, the global function that I need to set up in order to report conversions is no longer accessible.

setup : SSG/hybrid (404), vanilla js, localization in the url.

Some issues:

  • Global scoping a function so I can call it from a button click.
  • Holding off on initializing zendesk chat until cookie preference is selected (UI conflict).
  • Can't access window.localStorage in layout file.

Compromise: I could set the styling such that the cookie consent and the zendesk chat widget don't interfere, but it might look weird.

Is there a general pattern I can follow here?

# 
<script is:inline transition:persist>

    document.addEventListener("astro:page-load", function () {

        acceptButton.addEventListener("click", () => {
            var gtmScript = document.createElement("script");
            gtmScript.src =
                "https://www.googletagmanager.com/gtag/js?id=AW-ID";
            gtmScript.async = true;
            document.head.appendChild(gtmScript);
            gtmScript.onload = function () {
                window.dataLayer = window.dataLayer || [];
                function gtag() {
                    dataLayer.push(arguments);
                }
                gtag("js", new Date());
                gtag("config", "AW-ID");

                // This function is not accessible, but I need it.  <-----------
                var gtag_report_conversion = function (url) {
                    var callback = function () {
                        if (typeof url != "undefined") {
                            window.location = url;
                        }
                    };
                    gtag("event", "conversion", {
                        send_to: "AW-ID",
                        event_callback: callback,
                    });
                    return false;
                };
            };
        });
    });
</script>
long jay
#

<@&1129102257422610512> 😅 cowboy_cool_cry_mild_panic 🙏🏻
If I am initializing all my tracking and such in an event listener callback, how can I make a function defined there globally accessible?
I tried binding it to the window object, but no luck.

long jay
#

It appears to be working if I re-initialize the gtag when I need to report a conversion, then I can use it as needed to report the conversion. I guess it re-initializes all the time anyway? 🥴

whole quarry
# 
window.gtag = function () {
  dataLayer.push(arguments);
};

will make gtag available everywhere then you can create the gtag_report_conversion function where ever you need it or you can also make the gtag_report_conversion globally available too

#

you can also prevent the reinitilizing constantly with if (!winddow.dataLayer) {}

#

I don't think you need/want to persist the transition either

long jay
#

Should I even be using is:inline?

whole quarry
#

I don't think so honestly