-
-
Notifications
You must be signed in to change notification settings - Fork 244
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Google Tag Manager - Consent Mode V2 implementation (Next.js 14) #427
Comments
Currently working on something similar, for the initialization, you could wrap the initializer method, for example function gtmConsent(plugin: AnalyticsPlugin) {
return {
...plugin,
initialize: (args) => {
if (typeof plugin?.initialize !== "function") {
return;
}
if (typeof window === "undefined") {
plugin.initialize(args);
return;
}
// see https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-google-analytics/src/browser.js#L84-L132
const { config } = args;
// We initialize the gtag consent before script is injected
const gtagName = config.gtagName;
const dataLayerName = config.dataLayerName;
if (!window[dataLayerName]) {
window[dataLayerName] = window[dataLayerName] || [];
}
if (!window[gtagName]) {
// @ts-expect-error - we are initializing the gtagName
window[gtagName] = function () {
// @ts-expect-error - we have initialized the dataLayerName
window[dataLayerName].push(arguments);
};
}
const consent = {
ad_storage: "granted",
ad_user_data: "granted",
ad_personalization: "granted",
analytics_storage: "granted",
};
// @ts-expect-error - we are initializing the gtagName
window[gtagName]("consent", "default", consent);
plugin.initialize(args);
// @ts-expect-error - we are initializing the gtagName
window[gtagName]("consent", "update", consent);
},
} satisfies AnalyticsPlugin;
} then you just wrap your plugin with the const analytics = Analytics({
app: 'awesome-app',
plugins: [
gtmConsent(googleAnalytics({
measurementIds: ['G-abc123']
}))
]
}) In our usecase, we have a wrapper around getanalytics to only load plugins that have been granted consent, so we know if the plugin is initialized, we can run it with full permissions ( I believe you would start with But yea this is very hacky solution. |
Description
I am currently working on building out a consent manager feature and came across a few challenges integrating with the @analytics/google-tag-manager plugin. I've created some ("sketchy" - at best) workarounds which I am sharing below for feedback and suggestions on how to improve and especially on how to better incorporate this logic into the plugin itself.
Expected Behavior
I don't mind raising a P.R. and doing the work, as long as I have a clear path forward. Sorry for the long intro, but I'll break down the issue here:
Consent Mode v2 requires that default consents get initialized before any tags are read. See here. This ideally would mean that we've disabled the plugin. Which in turn means the gtag script is not injected into the DOM.
Currently there are no apis or mechanisms from what I can gather that enable us to tap into this event specifically:
gtm.init_consent
.This event can be triggered declaratively (demonstrated in my workaround below).
No access to the actual script tag, no apis or a clean way of even referencing it in the DOM. Having a reference to the script itself opens up the option to set an event listener to fire when the script loads. Which is the hack that I came across.
Moreover, no exposed access to the internal gtag fn that is used to handle the
page
andtrack
events under the hood. Or even better direct access to thedataLayer
object.Feature Request
Ideally an imperative way to initialize default consent scopes directly via the plugin's
userConfig
params.At the least, I'd like to add an #id attribute to the script tag element which would allow us to grab a reference to the element itself. I've tested this locally directly in my node modules and this definitely works.
Without access to the script itself and having trouble targeting it via the
src
attribute, I've cobbled together this workaround:Additonal Context
gtm.init
event without the default consents.This is basically the complete work around, but I'll show how I've configured the rest to work including my analytics config
UPDATE: I just did some more digging into the plugins source, and noticed there is a way already defined to access the scriptLoad event internally.
The challenge now I guess is figuring out how to handle initial the consent before built in initialization method. I guess I can try extending the underlying plugin and see if that's the right strategy here.
Analytics Config:
So with this workaround I currently inject a script into the DOM when there is no consent cookie set, then i run through and initialize the consent for each applicable cookie. And then, once consent is set I can initialize the plugin by using the
analytics.plugins.enable
method if they've allowedanalytics_storage
.I'd love to wrap some of this functionality into a plugin, but I've come up short each time I've tried. I'd be more than happy to do the work if someone wants to help me understand the right pattern here.
Environment
The text was updated successfully, but these errors were encountered: