APIs & Integrations

CEgos
Member

Cookie banner not showing in Nuxt 3

I've created a website with Nuxt 3.

In app.vue, I've integrated the HubSpot tracking code. Theoretically, the cookie consent banner should appear. The script loads correctly, but it never displays. I've cleared cookies, opened the page in incognito mode, disabled Content-Security-Policy, etc., but it never shows up at any point.

 

This is the code in script setup:

 

const route = useRoute();
const isGraciasPage = ref(false);

onMounted(() => {
  console.log('Componente montado, evaluando el lado del cliente...');
  
  if (process.client) { // Se asegura que solo se ejecute en el cliente
    console.log('Estamos en el lado del cliente, cargando el script de HubSpot...');
    
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.id = 'hs-script-loader';
    script.async = true;
    script.defer = true;
    script.src='https://js-eu1.hs-scripts.com/XXXXXXXXX.js'; 
    document.body.appendChild(script);

    script.onload = () => console.log('Script de HubSpot cargado correctamente.');
    script.onerror = (error) => console.error('Error al cargar el script de HubSpot:', error);
  }

  isGraciasPage.value = route.path === '/gracias/';
});

 

 

Any ideas?

0 Upvotes
1 Reply 1
HMir
Member

Cookie banner not showing in Nuxt 3


@CEgos wrote:

I've created a website with Nuxt 3.

In app.vue, I've integrated the HubSpot tracking code. Theoretically, the cookie consent banner should appear. The script loads correctly, but it never displays. I've cleared cookies, opened the page in incognito mode, disabled Content-Security-Policy, etc., but it never shows up at any point.

 

This is the code in script setup:

 

 

const route = useRoute();
const isGraciasPage = ref(false);

onMounted(() => {
  console.log('Componente montado, evaluando el lado del cliente...');
  
  if (process.client) { // Se asegura que solo se ejecute en el cliente
    console.log('Estamos en el lado del cliente, cargando el script de HubSpot...');
    
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.id = 'hs-script-loader';
    script.async = true;
    script.defer = true;
    script.src='https://js-eu1.hs-scripts.com/XXXXXXXXX.js'; 
    document.body.appendChild(script);

    script.onload = () => console.log('Script de HubSpot cargado correctamente.');
    script.onerror = (error) => console.error('Error al cargar el script de HubSpot:', error);
  }

  isGraciasPage.value = route.path === '/gracias/';
});

 

 

 

Any ideas?


Please check your HubSpot account settings if they are configured correctly to display the banner. Verify that the tracking script URL is accurate and check that the script loads without errors by looking for success messages in the console.

Make sure the script is only added once to prevent conflicts. Confirm that you are using the correct lifecycle hook, like onMounted, for client-side script loading. Additionally, inspect the network requests and console for any errors or warnings. Lastly, double-check the GDPR and cookie tracking settings in your HubSpot account to ensure they are set to display the consent banner. By following these steps, you can identify and fix the issues preventing the banner from appearing.

0 Upvotes