Wasp•2d ago

Adding GA events tracking

Hi, Is there a way to use the existing Google Analytics integration done through the Cookie Consent function to track specific event ? How can I do that ?

6 Replies

kapa.ai•2d ago

Hi @Glide Orchestra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

MEE6•2d ago

Wohooo @Glide Orchestra, you just became a Waspeteer level 1!

kapa.ai•2d ago

---------------------- I'm sorry, but the knowledge sources provided do not contain information about integrating Google Analytics event tracking with Wasp, nor do they mention a "Cookie Consent function" related to Google Analytics or event tracking. The available sources discuss how to set up Google OAuth for authentication in Wasp, and there are some community discussions about injecting Google Analytics scripts into Astro-based blogs (as used in the OpenSaas template), but they do not cover tracking specific events or integrating with a cookie consent mechanism for analytics purposes. If you need to track specific events with Google Analytics in a Wasp app, the knowledge sources do not provide explicit guidance on how to do this. You may need to refer to Google Analytics documentation or general React/JavaScript event tracking practices for more information. If you have more details or a specific context (such as the OpenSaas template or Astro blog), please clarify, and I can check if there is any relevant information in the sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Glide Orchestra, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

NEROX•2d ago

Hey @Glide Orchestra , could you provide more info about what kind of events you want to track? Do you want to get some custom events in Google Analytics?

Glide OrchestraOP•2d ago

Hey @NEROX, i try to track specific actions that a visitor performs on the app. I was thinking using a function of this kind to send GA events :

export function trackEvent(eventName: string, eventParams: Record<string, any> = {}) {
  if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
    window.gtag('event', eventName, eventParams);
    console.log(`[Analytics] Event sent: ${eventName}`, eventParams);
  } else if (window.dataLayer) {
    // fallback
    window.dataLayer.push({ event: eventName, ...eventParams });
    console.log(`[Analytics] Event pushed (fallback): ${eventName}`, eventParams);
  } else {
    console.warn('[Analytics] GA not initialized or cookies declined');
  }
}

export function trackEvent(eventName: string, eventParams: Record<string, any> = {}) {
  if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
    window.gtag('event', eventName, eventParams);
    console.log(`[Analytics] Event sent: ${eventName}`, eventParams);
  } else if (window.dataLayer) {
    // fallback
    window.dataLayer.push({ event: eventName, ...eventParams });
    console.log(`[Analytics] Event pushed (fallback): ${eventName}`, eventParams);
  } else {
    console.warn('[Analytics] GA not initialized or cookies declined');
  }
}

And I modified Config.ts (where GA is initialized) like this :

 onAccept: () => {
              try {
                const GA_ANALYTICS_ID = import.meta.env.REACT_APP_GOOGLE_ANALYTICS_ID;
                if (!GA_ANALYTICS_ID.length) {
                  throw new Error('Google Analytics ID is missing');
                }
                window.dataLayer = window.dataLayer || [];
                function gtag(..._args: unknown[]) {
                  (window.dataLayer as Array<any>).push(arguments);
                }

                // Adding the script tag dynamically to the DOM.
                const script = document.createElement('script');
                script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ANALYTICS_ID}`;
                script.async = true;
                script.onload = () => {
                  gtag('js', new Date());
                  gtag('config', GA_ANALYTICS_ID, { debug_mode: true });
                  window.gtag = gtag;
                  console.log('[Analytics] Google Analytics initialized :white_check_mark:');
                };
                document.body.appendChild(script);
              }

 onAccept: () => {
              try {
                const GA_ANALYTICS_ID = import.meta.env.REACT_APP_GOOGLE_ANALYTICS_ID;
                if (!GA_ANALYTICS_ID.length) {
                  throw new Error('Google Analytics ID is missing');
                }
                window.dataLayer = window.dataLayer || [];
                function gtag(..._args: unknown[]) {
                  (window.dataLayer as Array<any>).push(arguments);
                }

                // Adding the script tag dynamically to the DOM.
                const script = document.createElement('script');
                script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ANALYTICS_ID}`;
                script.async = true;
                script.onload = () => {
                  gtag('js', new Date());
                  gtag('config', GA_ANALYTICS_ID, { debug_mode: true });
                  window.gtag = gtag;
                  console.log('[Analytics] Google Analytics initialized :white_check_mark:');
                };
                document.body.appendChild(script);
              }

But this is not working, the window.gtag does not seems to be correctly initialized...

NEROX•13h ago

As I see, the issue is in your gtag function. Change this:

function gtag(..._args: unknown[]) {
  (window.dataLayer as Array<any>).push(arguments);
}

function gtag(..._args: unknown[]) {
  (window.dataLayer as Array<any>).push(arguments);
}

To this:

window.gtag = function() {
  window.dataLayer.push(arguments);
};

window.gtag = function() {
  window.dataLayer.push(arguments);
};

And define it BEFORE calling it (move outside script.onload). --- Better approach: Don't modify Config.ts at all - OpenSaaS already handles GA initialization. Just check if gtag exists before tracking:

export function trackEvent(eventName: string, eventParams: Record<string, any> = {}) {
  if (typeof window === 'undefined') return;
  
  if (typeof window.gtag === 'function') {
    window.gtag('event', eventName, eventParams);
    console.log(`[Analytics] Event sent: ${eventName}`, eventParams);
  } else {
    console.warn('[Analytics] GA not loaded yet or cookies not accepted');
  }
}

export function trackEvent(eventName: string, eventParams: Record<string, any> = {}) {
  if (typeof window === 'undefined') return;
  
  if (typeof window.gtag === 'function') {
    window.gtag('event', eventName, eventParams);
    console.log(`[Analytics] Event sent: ${eventName}`, eventParams);
  } else {
    console.warn('[Analytics] GA not loaded yet or cookies not accepted');
  }
}

The Cookie Consent Modal loads GA asynchronously when users accept cookies. Your tracking function just needs to check if gtag is available before using it. Make sure you have REACT_APP_GOOGLE_ANALYTICS_ID set in your .env.client file. Let me know If this works for you!

Gaming

Programming

Adding GA events tracking

Did you find this page helpful?