react-marketing-tools 0.2.1 → 0.2.2

package/README.md

@@ -21,6 +21,7 @@ COMING SOON: [React Marketing Tools Demo](https://)
     import React from 'react'
     import ReactDOM from 'react-dom/client'
     import { ReactMarketingProvider, buildConfig } from 'react-marketing-tools';
+    import { BuildConfigOptions } from './lib/types'
     import App from './App'
 
     /*
@@ -43,7 +44,7 @@ COMING SOON: [React Marketing Tools Demo](https://)
         'lastName',
     ]
 
-    const analyticsConfig = { 
+    const analyticsConfig: BuildConfigOptions = {
         appName: 'my-awesome-app', // required
         appSessionCookieName: 'APP_SESSION',
         eventActionPrefix: { // this will extend the default values of eventActionPrefix 
@@ -88,19 +89,20 @@ COMING SOON: [React Marketing Tools Demo](https://)
 
 ## Usage with Provider
 ```js
-    import { useState, useEffect } from 'react'
-    import { ContextApi, ContextState, useMarketingApi, useMarketingState } from 'react-marketing-tools'
+    import { useState, useEffect, useCallback, useRef } from 'react'
+    import { ProviderApiProps, ProviderStateProps, useMarketingApi, useMarketingState } from './lib'
+    import { EventNameInfo, TrackAnalyticsEventOptions } from './lib/types'
 
     function App() {
         const [count, setCount] = useState(0)
         const {
-            appSessionCookieName,
             analyticsPlatform,
+            appSessionCookieName,
             eventActionPrefixList,
-            analyticsGlobalEventActionList
-        } = useMarketingState(ContextState)
+            analyticsGlobalEventActionList,
+        }: ProviderStateProps = useMarketingState()
         const {
-            trackAnalyticsEvent,
+            trackAnalyticsEvent
             /*
                 NOTE: If you want to see built in config items and your added items, use one of the following functions to the body of your functional component or useEffect/function
                 call it like so showMeBuildInAnalyticsPlatform() then check your console, in dev tools.
@@ -108,70 +110,77 @@ COMING SOON: [React Marketing Tools Demo](https://)
                 showMeBuildInEventActionPrefixList,
                 showMeBuildInGlobalEventActionList,
             */
-        } = useMarketingApi(ContextApi)
+        }: ProviderApiProps = useMarketingApi()
 
         useEffect(function appLoadPageLandingWelcome() {
             // create session cookie, useful for unauthenticated user tracking and other things
             document.cookie = `${appSessionCookieName}=${uuid()};max-age=${70};SameSite=Strict;Secure`
 
             const sendAnalyticsEvent = async () => {
-                const eventNameInfo = {
+                const eventNameInfo: EventNameInfo = {
+                    eventName: 'Welcome Landing',
                     actionPrefix: eventActionPrefixList.JOURNEY,
-                    description: 'Welcome Landing',
                     globalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED,
                 }
 
-                await trackAnalyticsEvent({
+                const trackingData: TrackAnalyticsEventOptions = {
                     data: {},
                     eventNameInfo,
                     analyticsType: analyticsPlatform.DATALAYER_PUSH,
                     dataLayerCheck: true,
-                })
+                    userDataToHashKeyArray: null,
+                }
+
+                await trackAnalyticsEvent(trackingData)
             }
 
             sendAnalyticsEvent()
-        })
+        }, [])
 
-        const handleButtonClick = async () => {
+        const handleButtonClick = useCallback(async () => {
             const countActual = count + 1
             setCount(countActual)
 
-            const eventNameInfo = {
+            const eventNameInfo: EventNameInfo = {
                 eventName: 'count button click',
                 actionPrefix: eventActionPrefixList.INTERACTION,
                 globalAppEvent: analyticsGlobalEventActionList.AUTHENTICATED,
-                previousGlobalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED
+                previousGlobalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED,
             }
 
-            await trackAnalyticsEvent({
+            const trackingData: TrackAnalyticsEventOptions = {
                 data: {
                     count: countActual,
-                    firstName: 'bob',
+                    // firstName: 'bob',
                     lastName: 'yeah nah',
                     email: 'yeahnah@gmail.com',
                 },
                 eventNameInfo,
                 analyticsType: analyticsPlatform.DATALAYER_PUSH,
                 consoleLogData: {
-                    showJourneyPropsPayload: true
-                }
-            })
-        }
+                    showJourneyPropsPayload: true,
+                },
+                dataLayerCheck: false,
+                userDataToHashKeyArray: null,
+            }
+
+            await trackAnalyticsEvent(trackingData)
+        }, [count])
 
         /* Example: use GA4 directly 
-            const handleButtonClick = useCallback(async () => {
-                const countActual = count + 1
+        const handleButtonClick = useCallback(async () => {
+            const countActual = count + 1
 
-                setCount(countActual)
+            setCount(countActual)
 
-                const eventNameInfo = {
+            const eventNameInfo: EventNameInfo = {
                 eventName: 'count button click',
                 actionPrefix: eventActionPrefixList.INTERACTION,
                 globalAppEvent: analyticsGlobalEventActionList.AUTHENTICATED,
                 previousGlobalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED,
-                }
+            }
 
-                await trackAnalyticsEvent({
+            const trackingData: TrackAnalyticsEventOptions = {
                 data: {
                     count: countActual,
                     firstName: 'bob',
@@ -184,9 +193,12 @@ COMING SOON: [React Marketing Tools Demo](https://)
                 consoleLogData: {
                     showJourneyPropsPayload: true,
                 },
-                })
-            }, [count])
+            }
+
+            await trackAnalyticsEvent(trackingData)
+        }, [count])
         */
+
         ...
 
         return (
@@ -200,22 +212,25 @@ COMING SOON: [React Marketing Tools Demo](https://)
 ```js
     import { useState, useEffect, useCallback } from 'react'
     import { trackAnalyticsEvent, analyticsPlatform } from "react-marketing-tools";
+    import { EventNameInfo, TrackAnalyticsEventOptions } from './lib/types'
 
     const WelcomePage = () => {
         useEffect(function appLoadPageLandingWelcome() {
             const sendAnalyticsEvent = async () => {
-                const eventNameInfo = {
+                const eventNameInfo: EventNameInfo = {
                     actionPrefix: eventActionPrefixList.JOURNEY,
                     description: 'Welcome Landing',
                     globalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED,
                 }
 
-                trackAnalyticsEvent({
+                const trackingData: TrackAnalyticsEventOptions = {
                     data: {},
                     eventNameInfo,
                     analyticsType: analyticsPlatform.DATALAYER_PUSH,
                     dataLayerCheck: true,
-                })
+                }
+
+                await trackAnalyticsEvent(trackingData)
             }
 
             sendAnalyticsEvent()
@@ -225,14 +240,14 @@ COMING SOON: [React Marketing Tools Demo](https://)
             const countActual = count + 1
             setCount(countActual)
 
-            const eventNameInfo = {
+            const eventNameInfo: EventNameInfo = {
                 eventName: 'count button click',
                 actionPrefix: eventActionPrefixList.INTERACTION,
                 globalAppEvent: analyticsGlobalEventActionList.AUTHENTICATED,
                 previousGlobalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED
             }
 
-            await trackAnalyticsEvent({
+            const trackingData: TrackAnalyticsEventOptions = {
                 data: {
                     count: countActual,
                     firstName: 'bob',
@@ -244,7 +259,9 @@ COMING SOON: [React Marketing Tools Demo](https://)
                 consoleLogData: {
                     showJourneyPropsPayload: true
                 }
-            })
+            }
+
+            await trackAnalyticsEvent(trackingData)
         }
         ...
 

package/dist/analytics/analyticsEventService.d.ts

@@ -1,3 +1,4 @@
+import { TrackAnalyticsEventOptions } from './types';
 /**
  *
  * @paramType {object} options
@@ -8,21 +9,5 @@
  * @property {boolean} dataLayerCheck
  * @property {object} consoleLogData (optional) is an object with the following attributes, "showGlobalVars", "showJourneyPropsPayload", "showUserProps" if any of the values are true you will be able to see the respective payload in your console.
  */
-export declare type EventNameInfo = {
-    eventName: string;
-    description?: string;
-    actionPrefix: string;
-    globalAppEvent: string;
-    previousGlobalAppEvent?: string;
-};
-export declare type AllowedTypes = string | number;
-export declare type TrackAnalyticsEventOptions = {
-    data: Record<AllowedTypes, AllowedTypes>;
-    eventNameInfo: EventNameInfo;
-    analyticsType: string;
-    userDataToHashKeyArray: Array<string> | null;
-    dataLayerCheck: boolean;
-    consoleLogData?: object;
-};
 declare const trackAnalyticsEvent: (options: TrackAnalyticsEventOptions) => Promise<void>;
 export { trackAnalyticsEvent };

package/dist/analytics/helpers.d.ts

@@ -1,5 +1,5 @@
 import DeviceDetector from 'device-detector-js';
-import { AllowedTypes, EventNameInfo } from './analyticsEventService';
+import { AllowedTypes, EventNameInfo } from './types';
 /**
  *
  * @param {object} user the structure of this data is dictated by you, aka your API or DB.

package/dist/analytics/types.d.ts

@@ -1,3 +1,34 @@
+export declare type Event = {
+    name: string;
+    params: Record<AllowedTypes, AllowedTypes>;
+};
+export declare type GooglePayload = {
+    non_personalized_ads: boolean;
+    client_id: string;
+    user_id: string;
+    user_properties: {
+        user_id: string;
+        user_type: string;
+        client_id: string;
+    };
+    events: Event[];
+};
+export declare type EventNameInfo = {
+    eventName: string;
+    description?: string;
+    actionPrefix: string;
+    globalAppEvent: string;
+    previousGlobalAppEvent?: string;
+};
+export declare type AllowedTypes = string | number;
+export declare type TrackAnalyticsEventOptions = {
+    data: Record<AllowedTypes, AllowedTypes>;
+    eventNameInfo: EventNameInfo;
+    analyticsType: string;
+    userDataToHashKeyArray: Array<string> | null;
+    dataLayerCheck: boolean;
+    consoleLogData?: object;
+};
 export declare type GlobalVars = {
     app: string;
     device_category?: string | undefined;

package/dist/buildConfig/index.d.ts

@@ -1,37 +1,10 @@
-export declare type Platform = Record<string, string>;
+import { BuildConfigOptions, Config, Platform } from './types';
 export declare const analyticsPlatform: Platform;
 export declare const showMeBuildInAnalyticsPlatform: () => void;
 export declare const analyticsEventActionPrefixList: Record<string, string>;
 export declare const showMeBuildInEventActionPrefixList: () => void;
 export declare const analyticsGlobalEventActionList: Record<string, string>;
 export declare const showMeBuildInGlobalEventActionList: () => void;
-declare type Tokens = {
-    IP_INFO_TOKEN?: string;
-    GA4_PUBLIC_API_SECRET: string;
-    GA4_PUBLIC_MEASUREMENT_ID: string;
-};
-export declare type Config = {
-    TOKENS?: Tokens;
-    appName: string;
-    appSessionCookieName: string;
-    withDeviceInfo?: boolean;
-    includeUserKeys: Array<string>;
-    showMissingUserAttributesInConsole: boolean | undefined;
-    withServerLocationInfo: boolean | undefined;
-    eventActionPrefixList: Record<string, string>;
-    analyticsGlobalEventActionList: Record<string, string>;
-};
 export declare let config: Config;
-export declare type BuildConfigOptions = {
-    appName: string;
-    appSessionCookieName: string;
-    eventActionPrefix: Record<string, string>;
-    globalEventActionList: Record<string, string>;
-    includeUserKeys: Array<string>;
-    showMissingUserAttributesInConsole: boolean | undefined;
-    TOKENS?: Tokens;
-    withDeviceInfo: boolean | undefined;
-    withServerLocationInfo: boolean | undefined;
-};
 declare const buildConfig: (options: BuildConfigOptions) => void;
 export { buildConfig };

package/dist/buildConfig/types.d.ts

@@ -0,0 +1,28 @@
+export declare type Platform = Record<string, string>;
+export declare type Tokens = {
+    IP_INFO_TOKEN?: string;
+    GA4_PUBLIC_API_SECRET?: string;
+    GA4_PUBLIC_MEASUREMENT_ID?: string;
+};
+export declare type Config = {
+    TOKENS?: Tokens;
+    appName: string;
+    appSessionCookieName: string;
+    withDeviceInfo?: boolean;
+    includeUserKeys: Array<string>;
+    showMissingUserAttributesInConsole: boolean | undefined;
+    withServerLocationInfo: boolean | undefined;
+    eventActionPrefixList: Record<string, string>;
+    analyticsGlobalEventActionList: Record<string, string>;
+};
+export declare type BuildConfigOptions = {
+    appName: string;
+    appSessionCookieName: string;
+    eventActionPrefix: Record<string, string>;
+    globalEventActionList: Record<string, string>;
+    includeUserKeys: Array<string>;
+    showMissingUserAttributesInConsole: boolean | undefined;
+    TOKENS?: Tokens;
+    withDeviceInfo: boolean | undefined;
+    withServerLocationInfo: boolean | undefined;
+};

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { Platform } from './buildConfig';
-import { TrackAnalyticsEventOptions } from './analytics/analyticsEventService';
+import { Platform, TrackAnalyticsEventOptions } from './types';
 export { buildConfig, analyticsPlatform } from './buildConfig';
 export { trackAnalyticsEvent } from './analytics/analyticsEventService';
 export declare type ProviderStateProps = {

package/dist/ipInfo/index.d.ts

@@ -1,23 +1,3 @@
-export declare type ServerLocationData = {
-    SERVER_CITY: string;
-    SERVER_COUNTRY: string;
-    SERVER_HOSTNAME: string;
-    SERVER_IP: string;
-    SERVER_LOCATION: string;
-    SERVER_POSTAL: string;
-    SERVER_REGION: string;
-    SERVER_TIMEZONE: string;
-};
+import { IpInfo, ServerLocationData } from './types';
 export declare const buildServerLocationData: (withServerLocationInfo: boolean | undefined) => Promise<ServerLocationData | undefined>;
-export declare type IpInfo = {
-    city: string;
-    country: string;
-    SERVER_HOSTNAME: string;
-    hostname: string;
-    ip: string;
-    loc: string;
-    postal: string;
-    region: string;
-    timezone: string;
-};
 export declare const getIpInfo: (IP_INFO_TOKEN: string) => Promise<IpInfo>;

package/dist/ipInfo/types.d.ts

@@ -0,0 +1,21 @@
+export declare type ServerLocationData = {
+    SERVER_CITY: string;
+    SERVER_COUNTRY: string;
+    SERVER_HOSTNAME: string;
+    SERVER_IP: string;
+    SERVER_LOCATION: string;
+    SERVER_POSTAL: string;
+    SERVER_REGION: string;
+    SERVER_TIMEZONE: string;
+};
+export declare type IpInfo = {
+    city: string;
+    country: string;
+    SERVER_HOSTNAME: string;
+    hostname: string;
+    ip: string;
+    loc: string;
+    postal: string;
+    region: string;
+    timezone: string;
+};

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export * from './analytics/types';
+export * from './buildConfig/types';
+export * from './ipInfo/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-marketing-tools",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "React Marketing Tools are a set of tools to make it easier for you to implement analytics and track user journeys, interactions throughout your App. using dataLayer/Google Tag Manager, GA4 fetch directly or coming soon facebook pixel.",
   "license": "MIT",
   "author": "bronz3beard <exempli.gratia.webdesign@gmail.com> (https://www.heyrory.com/)",