nuxt-community
feat: add external handler through module options
The handler is for handling manual GTM implementations using app.html instead of the existing modules to use dataLayer instead of ga. I talked with Sasan and we will handle Google Optimize's features manually.
In this case, I think this line can be configurable to support dataLayer. Providing a sample use case (with dataLayer) can be useful.
We can add a feature to support dataLayer But the problem is that we don’t know what needs to be inserted inside dataLayer, So there has to be a function that defines what needs to be inserted.
With that in mind, how can we achieve this? Share your ideas.
like this:
{
handler(ctx, experiment) {
ctx.$gtm.execute({
expId: experiment.experimentId,
expVar: experiment.$activeVariants.join('-')
})
}
}
or directly pushing to dataLayer (not working, cause can't access global scope window):
{
handler(ctx, experiment) {
window.dataLayer.push({
expId: experiment.experimentId,
expVar: experiment.$activeVariants.join('-')
})
}
}
We can add a new module option eventHandler which can be either ga, dataLayer or gtm and in the template: (below code is untested)
function googleOptimize(ctx, { experiment }) {
if (process.server || !experiment || !experiment.experimentID) {
return
}
<% if (options.eventHandler === 'ga') { %>
// https://developers.google.com/optimize/devguides/experiments
if (!window.ga) return
const exp = experiment.experimentID + '.' + experiment.$variantIndexes.join('-')
window.ga('set', 'exp', exp)
<% } else if (options.eventHandler === 'gtm') { %>
// TODO: Link to gtm docs
if (!ctx.$gtm) return
ctx.$gtm.execute({
expId: experiment.experimentId,
expVar: experiment.$activeVariants.join('-')
})
<% } else if (options.eventHandler === 'dataLayer') { %>
// TODO: Link to gtm docs
if (!window.dataLayer) return
window.dataLayer.push({
expId: experiment.experimentId,
expVar: experiment.$activeVariants.join('-')
})
<% } %>
}
This is safer as we don't serialize function and also removes boilerplate from projects that need different event handling.
@SasanFarrokh Would you please check Pooya's proposal and inform us? Thanks mate.
Any update on this? We currently have Optimize set up via tag manager and this looks like it would fix our issues.
@pi0 Do you think Sasan's work needs any further refinements or can we merge this?
Serializing functions is not a nuxt recommended way. Other than suggestion above, modules for nuxt 2.9 are supporting app/ dir for custom options like this which we can leverage here as well. (app/google-optimize/handler.js)
Example for options (handler) file with < 2.9 backward support: https://github.com/nuxt-community/vuetify-module/pull/86
@SasanFarrokh Can you take a look at he vuetify example and see if we can implement it in our module?
