Envoyez user_id à Google Analytics 4 à l'aide de vue-gtag et nuxtjs

Question

J'ai un projet Nuxtjs. J'utilise https://github.com/MatteoGabriele/vue-gtag. J'essaie d'envoyer l'identifiant utilisateur à Google Analytics 4 lorsque l'identifiant utilisateur existe mais que le code échoue mais ne fonctionne pas. J'ai vérifié dans GA4 mais aucune donnée "La connexion avec l'ID utilisateur inclut oui" :

import Vue from "vue";
import VueGtag from "vue-gtag";

export default ({ $config, $auth }) => {
  const obj = {
    config: {
      id: 'G-XXXXXXXXXX'
    }
  }
  if ($auth?.loggedIn) {
    obj.config.params = {user_id: $auth.user.sub}
  }
  Vue.use(VueGtag, obj, app.router)
}

Le code suivant est en cours d'exécution :

import Vue from "vue";
import VueGtag from "vue-gtag";

export default ({ $config, $auth }) => {
  Vue.use(VueGtag, {
    config: {
      id: 'G-XXXXXXXXXX',
      params: {
        user_id: '122xzczxc'
      }
    }
  }, app.router)
}

Puis-je vous aider ? Je souhaite envoyer user_id à GA4 lorsque user_id existe.

Answer 1

Répondez correctement après avoir commenté et ce que je pense avoir compris.

Si vous modifiez la condition à la valeur par défaut, par exemple :

if ($auth?.loggedIn) {
  obj.config.params = {user_id: '123-update-id'}
}

Cela ne fonctionne pas.

Mais si vous initialisez votre objet comme ceci :

const obj = {
  config: {
    {
      id: 'G-XXXXXXXXXX',
      params: {
      user_id: '123-default-id'
    }
  }
}

La condition sur

$auth?.loggedIn fonctionnera et attribuera une valeur.

Dans ce cas, le problème est simplement que vous devez avoir une structure par défaut pour votre objet. Dans ce cas, l'objet ne crée pas de nouvelles propriétés susceptibles de provoquer des problèmes asynchrones ou structurels, il met simplement à jour les propriétés.

Faites simplement ceci :

const obj = {
  config: {
    {
      id: 'G-XXXXXXXXXX',
      params: {
      user_id: ''
    }
  }
}