fix: mixpanel initialization

Pagnet · Feb 6, 2024 · fac18e3 · fac18e3
1 parent 8fb8f68
commit fac18e3
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 27 deletions.
diff --git a/src/dispatchers/dispatchers.spec.ts b/src/dispatchers/dispatchers.spec.ts
@@ -27,6 +27,13 @@ describe('Event dispatching functions', () => {
     jest.clearAllMocks();
   });
 
+  const localStorageKey = '_bl_providers';
+  const providers = ['Sentry', 'MixPanel'];
+
+  beforeEach(() => {
+    localStorage.setItem(localStorageKey, JSON.stringify([providers]));
+  });
+
   it('should be dispatch sendScreenEvent', () => {
     const consoleLogSpy = jest.spyOn(console, 'log');
 

diff --git a/src/dispatchers/index.ts b/src/dispatchers/index.ts
@@ -1,9 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-
-import { userSelectedEnvironment } from '../initializers';
 import { providersList } from '../providers';
-import { isValidProvidersList } from '../utils';
 import { EventData, PropertiesType, UserPropertiesType } from './dispatchers.types';
+import { checkIfMixPanelIsInitialized } from '../utils';
 
 /**
  * Dispatches the specified event data to all configured providers.
@@ -12,39 +10,46 @@ import { EventData, PropertiesType, UserPropertiesType } from './dispatchers.typ
  * @returns {void}
  */
 export const dispatchEventToAllProviders = (eventData: EventData): void => {
-  if (!isValidProvidersList(providersList)) {
-    return;
-  }
+  const localStorageProvidersList = JSON.parse(localStorage?.getItem('_bl_providers') as string);
+
+  const providersFiltered = localStorageProvidersList
+    ? providersList.filter((item) => localStorageProvidersList.includes(item.name))
+    : providersList;
 
-  providersList.forEach((provider) => {
-    const actions = {
-      screenEvent: () => provider.screenEvent
-        && eventData.screen
-        && provider.screenEvent(eventData.screen),
-      customEvent: () => provider.customEvent
-        && eventData.event
-        && eventData.properties
-        && provider.customEvent(eventData.event, eventData.properties),
-      userIdentification: () => provider.userIdentification
-        && eventData.id
-        && eventData.userProperties
-        && provider.userIdentification(eventData.id, eventData.userProperties),
-    };
+  if (providersFiltered.length > 0) {
+    providersFiltered.forEach((provider) => {
+      checkIfMixPanelIsInitialized(provider.name);
+      const actions = {
+        screenEvent: () => provider.screenEvent
+          && eventData.screen
+          && provider.screenEvent(eventData.screen),
+        customEvent: () => provider.customEvent
+          && eventData.event
+          && eventData.properties
+          && provider.customEvent(eventData.event, eventData.properties),
+        userIdentification: () => provider.userIdentification
+          && eventData.id
+          && eventData.userProperties
+          && provider.userIdentification(eventData.id, eventData.userProperties),
+      };
 
-    Object.values(actions).forEach((action) => action());
-  });
+      Object.values(actions).forEach((action) => action());
+    });
+  }
 };
 
+const currentEnvironment = localStorage.getItem('_bl_env') || 'development';
+
 const sendScreenEvent = (screen: string): void => {
-  if (userSelectedEnvironment === 'development') {
+  if (currentEnvironment === 'development') {
     console.log(`[blu-lytics]: Screen event: ${screen}`);
   } else {
     dispatchEventToAllProviders({ screen });
   }
 };
 
 const sendCustomEvent = (event: string, properties: PropertiesType): void => {
-  if (userSelectedEnvironment === 'development') {
+  if (currentEnvironment === 'development') {
     console.log(
       `[blu-lytics]: Custom event: ${event} - ${JSON.stringify(properties)}`,
     );
@@ -57,7 +62,7 @@ const sendUserIdentification = (
   id: string,
   userProperties: UserPropertiesType,
 ): void => {
-  if (userSelectedEnvironment === 'development') {
+  if (currentEnvironment === 'development') {
     console.log(
       `[blu-lytics]: User identification: ${id} - ${JSON.stringify(userProperties)}`,
     );

diff --git a/src/initializers/index.ts b/src/initializers/index.ts
@@ -54,10 +54,11 @@ const mixPanelInitializer = (
   apiKey: string,
 ): void => {
   if (isProduction(environment)) {
+    localStorage.setItem('_bl_mp', apiKey);
     mixpanel.init(apiKey, {
       track_pageview: true,
-      persistence: 'localStorage',
     });
+    localStorage.removeItem('_bl_init');
   }
 };
 
@@ -146,8 +147,10 @@ export const initializeProviders = (
         break;
     }
     initializedProviders.push(providerName);
+    localStorage.setItem('_bl_providers', JSON.stringify(initializedProviders));
   };
 
+  localStorage.setItem('_bl_env', environment);
   userSelectedEnvironment = environment;
 
   if (Array.isArray(paramsArray)) {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,6 +1,22 @@
+import mixpanel from 'mixpanel-browser';
 import { ProviderType } from '../providers/provider.types';
 
-// eslint-disable-next-line import/prefer-default-export
 export const isValidProvidersList = (
   providersList: ProviderType[],
 ): boolean => Array.isArray(providersList) && providersList.length > 0;
+
+export const checkIfMixPanelIsInitialized = (provider: string): void => {
+  const isMixPanelProvider = provider === 'MixPanel';
+  if (isMixPanelProvider) {
+    const apiKey = localStorage?.getItem('_bl_mp') as string;
+    const wasInitialized = localStorage.getItem('_bl_init');
+
+    if (!wasInitialized) {
+      mixpanel.init(apiKey, {
+        track_pageview: true,
+      });
+      localStorage.removeItem('_bl_mp');
+      localStorage.setItem('_bl_init', 'init');
+    }
+  }
+};