Use with Gridsome

[Rocketpilot]

This is really a request for a bit of guidance on using vue-gtag with Gridsome. I can just about get something going as far as basic analytics tagging but I'm trying to figure out a conversion event for a specific page and I'm stuck.

I know you can import VueGtag in the main.js and add the ID there too... but the closest I've got in the individual page script is the following, which doesn't quite work:

this.$gtag.event('conversion', {
              'send_to': 'AW-000000/randomlettersetc',
            });

Any thoughts? I know this is probably very easy but I'm getting to grips with both Vue and Gridsome at the same time and docs aren't always clear about how to translate from the general to the specific.

[MatteoGabriele]

hi @Rocketpilot unfortunately I don't know what's Gridsome, so not sure how to help you. what's the issue?

[Rocketpilot]

Sorry, Gridsome is a static-site generator for Vue, like Gatsby for React. https://gridsome.org

It has a particular way of using external scripts: https://gridsome.org/docs/assets-scripts/

And it does have a popular plugin for handing VueAnalytics, the predecessor to vue-gtag: https://gridsome.org/plugins/@gridsome/plugin-google-analytics

I can get vue-gtag up and running globally in the site, but specific conversion events are not something I've cracked yet. Because Gridsome is an SSR, general Vue plugins don't always work.

[MatteoGabriele]

But does it work without using gridsome? So I can understand better. Thanks

[Rocketpilot]

To be clear I'm not saying this is a bug with vue-gtag, I just want some guidance on using it with a Vue-based tool that doesn't allow dynamic alteration of the page after rendering.

I can attach the library using the recommended method:

import DefaultLayout from '~/layouts/Default.vue'
import VueGtag from 'vue-gtag'

export default function (Vue) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)

  Vue.use(VueGtag)
}

And as far as I can tell that will include the basic library, but I am struggling with adding conversion events to specific pages, like I simply don't understand the syntax well enough to determine how to do this. I'm note a Vue or JS expert so there's a leap I can't quite make.

[MatteoGabriele]

This snippet tells me nothing to be honest, don't know what's happening and the Vue.use(VueGtag) alone like this will do nothing . I need u to give me a better context. I'm not accusing you, not even trying to defend my code: I genuinely don't know what's happening in your app.

I not even know how conversions work tbh, so u need to give me more details or create a simple app with vuejs and try to do the same. See if works so u know that the issue is with this other library and u can focus on that

[andrevandal]

@Rocketpilot @MatteoGabriele

Hi, I'm using Gridsome and I do this to resolve it:

// in src/main.js
import VueGtag from 'vue-gtag'

export default function (Vue, { router, isClient }) {
  if (isClient) {
    Vue.use(
      VueGtag,
      {
        config: { id: 'UA-127765201-7' }
      },
      router
    )
  }
}

Using isClient we can guarantee to load this library only in client side.

The remaining problem is that the router doesn't know pages' title but I think that this is a Gridsome's problem.

[Rocketpilot]

Thanks @derevandal that makes sense. For the record and for anyone else wondering about this, I ended up just brute-forcing this by adding a metaInfo:script: innerHTML: block inside each page's script tag. Not ideal from an abstraction point of view but it seems to be bulletproof.

[andrevandal]

@Rocketpilot you're welcome :nerd_face:

I always prefer use an integrated solution with Vue. When we only add the script, it doesn't watch Vue Router. :S

[Rocketpilot]

@derevandal if I might trouble you for a little more advice; I've been asked to add a conversion tracking code to a form's "thank-you" page:

'gtag("event", "conversion", {"send_to": "xxx/xxxxxxxxxxx"})',

Have you configured that with Vue-Gtag or is it the kind of thing that makes sense as an innerHTML item in the metaInfo?

Thanks again for your advice; I'm trying to do it the "right way" with this new project.

[andrevandal]

Hi @Rocketpilot XD

I'm using vue-gtag like this:

  mounted() {
    if (process.isClient) this.$gtag.event('conversion', { send_to: "xxx/xxxxxxxxxxx" })
  }

[baruchiro]

Hi, do you know why with the @derevandal solution I getting 3 tags?

I see this when I enter a Post page.

[andrevandal]

I don't know, but a can help you resolve this bug. Could you send me an url for debug?

[baruchiro]

Site: https://bscstudent.netlify.com/ Source: https://github.com/baruchiro/BcsStudent

It's in Hebrew...

Thanks!

[andrevandal]

@baruchiro Omg, it's an unknown bug :( On the website that I made it also has this problem and I didn't even know it.

I think it's something related to Router.

[MatteoGabriele]

I am going to close this issue because is a Gridsome specific issue I believe, please correct me if I'm wrong and provide me enough specifics to make this work

thanks