nuxt-community / gtm-module

Google Tag Manager Module for Nuxt.js
MIT License
327 stars 70 forks source link

Event ($gtm) in middleware #154

Open oscarhandsome opened 2 years ago

oscarhandsome commented 2 years ago

Hi everyone! Thanks to owners for this module. It very helps and make development faster!

I have question. Because my event not happens. I want to detect what pages are not available and send event to GA.

Correct that $gtm not available on ssr stage? Might be better to use another structure?

middleware/navigation.js

export default function ({ app, route, req }) {
  if (route.name === 'not-found') {
    const domain = process.client ? window.origin : req.headers.host
    const data = {
      event: 'page_not_available',
      url: domain + route.path,
    }
    app.$gtm.push(data)
  }
}

nuxt.config.js

 router: {
    middleware: 'navigation',
    ...
    }
}

into my _slug.vue

async asyncData({ app, store, params, redirect, route,
  }: { app: any, store: any, params: any, redirect: any, route: any  }): Promise<any> {
    try {
      const response = await store.dispatch('....myvuex', {
        slug: params.slug,
      })
      if (response.status_code === 400) {
        throw new Error(`${response.status_code}`)
      }
    } catch (error) {
      redirect('/404')
      // redirect({ name: 'not-found', params: { slug: route.path } })
    }
  },