Estoy tratando de implementar Mixpanel con mi aplicación React usando Google Tag Manager. Lo integré con éxito usando GTM pero tengo problemas con el mixpanel que siempre está indefinido al recargar. Estoy usando CDN para ello.
Si voy a otra página y vuelvo a la página donde estoy usando Mixpanel, no hay error. Así que diagnostiqué que, como es una operación asíncrona, lleva algún tiempo cargar mixpanel en mi aplicación. Así que intenté usar useEffect hook y useState pero no pudo resolver mi problema.
A continuación se muestra mi código:
const [mixpanelLoad, setMixpanelLoad] = useState(false); useEffect(()=>{ console.log('IN USEEFFECT'); console.log(mixpanel); if (mixpanel) { // It never comes here on first reload setMixpanelLoad(true); console.log('MIXPANEL LOADED'); } if (mixpanelLoad) { // thus it never does the tracking console.log('DOING TRACKING'); mixpanel.track('Track Bill Page'); } }, [mixpanelLoad]);En la primera recarga, siempre dice que mixpanel no está definido.
Estoy usando CDN, así que no tengo que usar ninguna biblioteca de panel de mezcla.
Ciertos métodos/características solo se pueden usar después de que la biblioteca de Mixpanel haya terminado de cargarse . init() tiene una función cargada disponible para manejar esto automáticamente -
mixpanel.init('YOUR PROJECT TOKEN', { loaded: function(mixpanel) { distinct_id = mixpanel.get_distinct_id(); } });