Sunday, 20 December 2020

Integrate Google Optimize in Nuxt application

I am trying to use Google Optimize in my Nuxt application. I need a way to fire activation event after any of the page components gets updated.Problem currently is there can be data that is being returned by API and using the API data the DOM gets re rendered in page load. I need to fire the activation event after that.The google docs for firing activation events in SPA is given below Firing activation in a single page application

For angular app it is accomplished by adding

myapp.run(function($rootScope, $timeout) {
   $rootScope.$watch(function(){
     $timeout(function(){
       dataLayer.push({'event': 'optimize.activate'});
     },0,false);
   })
})

I am looking for a similar kind of alternative in my Nuxt application

I know that inside a component, I can listen for the updated life cycle hook after content has been updated and DOM has been re-rendered. But I need a way to execute some code in a central place when any of the components got updated or DOM get re-rendered.

What I have used is I created a global mixin (globalMixin.js) inside the plugins directory and used it's updated lifecycle method.So this mixin code gets injected into every component and update method gets called if any of those component data gets changed. But I am doubting this approach as an ideal solution.

Can anyone suggest me a better approach of doing this task or do Nuxt/Vue has any standard way of doing this. The code inside plugins/globalMixin.js is given below

if (!Vue.__my_mixin__) {
      Vue.__my_mixin__ = true
      Vue.mixin({
        updated() {
        ..execute some code
       }
     }) 
    } 


from Integrate Google Optimize in Nuxt application

No comments:

Post a Comment