Pixels firing before DOMContentLoaded

[stuartcusackie]

I've been trying all day to get this package to work correctly with a website that uses a Google tag container with tiktok / FB pixel tags. These pixels were firing before I made any selection on the consent banner. I believe this is because we are waiting for DOMContentLoaded to set the initial consent to denied, and by that time the pixels have already fired.

These pixels are not compatible with consent mode by default so we have to enable that on each tag in tag manager under advanced options and add the 'ad_storage' option 'Require additional consent for tag to fire'.

Doing that alone is not enough though. I had to add this block of code above AltCookies code in order to prevent these pixels from firing:

<script>
(function() {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}

        var match = document.cookie.match(new RegExp('(^| )AltCookieAddon=([^;]+)'));
        var cookieVal = match ? match[2] : null;

        if (cookieVal === "4") {
            gtag('consent', 'default', { 'ad_storage': 'granted', 'ad_user_data': 'granted', 'ad_personalization': 'granted', 'analytics_storage': 'granted' });
        } else if (cookieVal === "3") {
            gtag('consent', 'default', { 'ad_storage': 'granted', 'ad_user_data': 'granted', 'ad_personalization': 'granted', 'analytics_storage': 'denied' });
        } else if (cookieVal === "2") {
            gtag('consent', 'default', { 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'analytics_storage': 'granted' });
        } else {
            gtag('consent', 'default', { 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'analytics_storage': 'denied' });
        }
    })();
</script>

By the way, these pixels are not consent_mode compatible by default so I had to enable that and 'ad_storage' in advanced settings in my google tags.

Does this make sense? Am I doing something wrong?
Thanks!

[Alt-Charlie]

Hi @stuartcusackie,

I believe the gtag is currently embedded regardless of user consent.

If you wanted the gtag to load based on user consent, you could manually embed the relevant scripts into the "analytics" field and remove config from the Google tab.

Hope this helps.

[stuartcusackie]

Thanks Charlie, that is a possible solution but my clients generally manage things directly on Tag Manager.

I have updated my issue above with a solution that makes this package compatible with these pixels. Basically we have to deny consent immediately and not wait for DOMContentLoaded, and we also have to enable consent mode on these tags in tag manager.

Is it possible to have something like this added to the package?

[Alt-Charlie]

Hi @stuartcusackie

You could still manage scripts with GTM, you'd just drop in the GTM script itself, i.e.:

<script async src="https://www.googletagmanager.com/gtag/js?id=%s"></script>

...manually into the analytics field rather than this addon embedding it.

Or do you need something more granular? Where you want some GTM scripts embedded by default, but others disabled until consent given?

[stuartcusackie]

Maybe I'm doing something wrong here but all I want is to add a block like this:

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

If the user clicks 'Accept all cookies' then that should enable google consent and tag manager should handle the rest.

At the moment that doesn't happen. Tiktok and Meta pixels are firing on page load, hence why I need the block above to deny consent immediately.

[Alt-Charlie]

Hi @stuartcusackie,

I can see some previous conversation on this issue here: #7

It looks like this addon should already handle setting consent with similar code to what you showed above:
https://github.com/alt-design/Alt-Cookies-Addon/blob/master/resources/js/alt-cookies-init.js

It's not getting cached is it by any chance?

[stuartcusackie]

Hi @Alt-Charlie

The problem with that code is that it only fires on DomContentLoaded, where as a tag container fires instantly. General Google tags, such as Adwords, work fine with this and wait for consent, but Meta / Tiktok pixels are fired immediately on page load regardless of consent, before the DOMContentLoaded event occurs.

The block that I have added, along with updating settings in tag manager, is the only way I can see to prevent this from happening. Pixels don't wait for consent on DOMContentLoaded.

[Alt-Charlie]

@stuartcusackie - gotcha! We'll take a look at what we can do with this.