Accessing gtag instance out of component

[luckylooke]

Hi, thanks for sharing :heart:

My question: In an component controller, you can access lib instance by this.$gtag documented here, but what if I want to track outside component? Like in a service?

I need it to get clientId like documented here

gtag('get', 'UA-XXXXXXXX-Y', 'client_id', (clientID) => {
  // I have clientID here
});

I was trying following:

  const vueInstance = new Vue();
  vueInstance.$gtag.query('get', 'UA-XXXXXXXX-Y', 'client_id', (clientID: string) => {
    console.log("---------->", clientID);
  });

nothing happen, but query seems not to be the right method, so I tried calling directly:

  const vueInstance = new Vue();
  vueInstance.$gtag('get', 'UA-XXXXXXXX-Y', 'client_id', (clientID: string) => {
    console.log("---------->", clientID);
  });

but it says it is not callable, so neighter of them worked

How can I do it with vue-gtag? :pray:

I need it to put it into header for API calls, for further use on back-end. Thanks

[MatteoGabriele]

Hi @luckylooke all features available in your component scope are also directly available as separate exported methods.

import { event, pageview } from 'vue-gtag';

event('my_event', {...})

Is this what you needed?

[luckylooke]

@MatteoGabriele I know that they are exported, but "get" is missing :man_shrugging:

Module '"vue-gtag"' has no exported member 'get'. Did you mean to use 'import get from "vue-gtag"' instead?ts(2614)

neither gtag method

Module '"vue-gtag"' has no exported member 'gtag'. Did you mean to use 'import gtag from "vue-gtag"' instead?ts(2614)

[MatteoGabriele]

Could you share which version you are currently using?

get is not an API method I have included and also is not the default export, so you need to use the brackets. In any case, you can use query. To make an example, here, I have installed vue-gtag and immediately used query to get the client_id. You can use those methods everywhere. You don't need a Vue file. The only important part is first to install the Vue plugin.

import Vue from 'vue'
import App from './App.vue'
import VueGtag, { query } from 'vue-gtag'

Vue.use(VueGtag, {
  config: {
    id: 'UA-12345678-9'
  }
})

query('get', 'UA-12345678-9', 'client_id', (value) => {
  console.warn(value)
})   

new Vue({
  render: h => h(App),
}).$mount('#app')

[luckylooke]

It seems I am using latest vue-gtag@1.16.1 but typescript interface seems to be outdated then, or unfinished

    interface Gtag {
      (command: 'config', targetId: string, config?: ControlParams | EventParams | CustomParams): void;
      (command: 'set', config: CustomParams): void;
      (command: 'js', config: Date): void;
      (command: 'event', eventName: EventNames | string, eventParams?: ControlParams |  EventParams | CustomParams): void;
    }

When I suppresed ts error by adding "any" I have got the result, thanks :pray:

   (query as any)('get', config.gtag, 'client_id', (clientID: string) => {
    console.log('clientID', clientID)
  });