Consent management

[kaboume]

Environment

• Operating System: Linux
• Node Version: v18.17.1
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.0
• Package Manager: npm@9.8.1
• Builder: -
• User Config: runtimeConfig, css, typescript, build, modules, prismic, i18n, gtag
• Runtime Modules: (), @pinia/nuxt@0.4.11, @nuxtjs/prismic@3.1.0, nuxt-swiper@1.2.2, @nuxtjs/i18n@8.0.0-rc.5, nuxt-gtag@1.1.1
• Build Modules: -

Reproduction

See Describe the bug

Describe the bug

Hi, I'm using a consent dialog to activate the analytics tracing.

My nuxt.config :

  gtag: {
    initialConsent: false,
  },

My layout file :

<script setup>
const { gtag, grantConsent, revokeConsent } = useGtag();

const rgpdConsent = useCookie("rgpdConsent", {
  default: () => -1,
});

// Init conset
if (rgpdConsent.value === 1) {
  grantConsent();
}

// Function called  in the dialog consent
const consent = (valeur) => {
  rgpdConsent.value = valeur;
  if (valeur === 1) {
    grantConsent();
  } 
};

When a user accept consent, the grandConsentf() function is called but nothing is sent to Google Analytics.

For information, if I remove the "initialConsent: false," in the nuxt.config, everything works.

did I do something wrong?

Additional context

No response

Logs

No response

[johannschopplich]

It seems like you haven't provided any Gtag ID in your configuration.

Can you please share a reproducible example?

[kaboume]

The gtag ID is in the .env file :

PORT=3000
NITRO_PORT=3000
NUXT_PUBLIC_GTAG_ID=G-XXXXXXX

For information, if I remove the "initialConsent: false," in the nuxt.config, everything works (I can see the tracing in Google Analytics)

[johannschopplich]

The usage seems fine and should work as intended. But without a reproduction, I can't help you. Can please create one?

Please use a template below to create a minimal reproduction: 👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz 👉 https://codesandbox.io/p/github/nuxt/starter/v3-codesandbox

Edit: Can you ensure that the ID is present inside your open dialog function:

const { gtag } = useRuntimeConfig().public
console.log(gtag)

[rcerljenko]

It happens to me also... pretty much the same setup

[jakudlaty]

It happens to me also.

    gtag: {
        initialConsent: false,
    },

I provide GTAG id from env vars

[johannschopplich]

I have added a console error if no Gtag ID is provided: https://github.com/johannschopplich/nuxt-gtag/commit/59a63b3 (released with v1.1.2).

@kaboume @rcerljenko @jakudlaty Please create a reproducible example. Without it, I'm unable to help, since different deployment configurations means different ways to read your environment configuration. As far as my testing goes, the useHead call correctly adds the gtag.js to the DOM.