feat: add external handler through module options

[pi0]

Serialized function has many limits. What's the usecase of replacing handler?

[farzadso]

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.

[pi0]

In this case, I think this line can be configurable to support dataLayer. Providing a sample use case (with dataLayer) can be useful.

[farzadso]

@SasanFarrokh

[SasanFarrokh]

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.

[pi0]

Can you please share an example custom handler?

[SasanFarrokh]

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('-')
       })
   }
}

[pi0]

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.

[farzadso]

@SasanFarrokh Would you please check Pooya's proposal and inform us? Thanks mate.

[armonb]

Any update on this? We currently have Optimize set up via tag manager and this looks like it would fix our issues.

[farzadso]

@pi0 Do you think Sasan's work needs any further refinements or can we merge this?

[pi0]

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)

[pi0]

Example for options (handler) file with < 2.9 backward support: https://github.com/nuxt-community/vuetify-module/pull/86

[ghost]

Any update on this please? It would be really helpful :-)

[farzadso]

@SasanFarrokh Can you take a look at he vuetify example and see if we can implement it in our module?

[japboy]

any updates here?

[leandromatos-hotmart]

Any updates?