react-marketing-tools 0.2.7 → 0.2.9

package/README.md

@@ -3,8 +3,8 @@
 
 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.
 
-COMING SOON: [React Marketing Tools Demo](https://)
-- For now you can clone and run locally. There is a very basic demo app, thanks to [Vite.](https://vitejs.dev/)
+[React Marketing Tools Demo](https://codepen.io/roryfn/pen/OJBGvMG)
+[Detailed Blog post on React Marketing Tools Implementation](https://blog.heyrory.com/google-analytics-4-google-tag-manager)
 
 
 # PR's
@@ -32,7 +32,7 @@ COMING SOON: [React Marketing Tools Demo](https://)
         TOKENS are optional
         const TOKENS: Tokens = {
 
-            // if withDeviceInfo is true you must supply this token.
+            // if withServerLocationInfo is true you must supply this token.
             IP_INFO_TOKEN: 'SOME_TOKEN',
 
             // if analyticsType = analyticsPlatform.GOOGLE the below tokens must be supplied.
@@ -128,6 +128,8 @@ COMING SOON: [React Marketing Tools Demo](https://)
 
             const sendAnalyticsEvent = async () => {
                 const eventNameInfo: EventNameInfo = {
+                    // If this is not passed in the event name will be a combination of actionPrefix & globalAppEvent
+                    // J_UNAUTHENTICATED
                     eventName: 'Welcome Landing',
                     actionPrefix: eventActionPrefixList.JOURNEY,
                     globalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED,
@@ -152,6 +154,8 @@ COMING SOON: [React Marketing Tools Demo](https://)
             setCount(countActual)
 
             const eventNameInfo: EventNameInfo = {
+                // If this is not passed in the event name will be a combination of actionPrefix & globalAppEvent
+                // I_AUTHENTICATED
                 eventName: 'count button click',
                 actionPrefix: eventActionPrefixList.INTERACTION,
                 globalAppEvent: analyticsGlobalEventActionList.AUTHENTICATED,
@@ -219,64 +223,4 @@ COMING SOON: [React Marketing Tools Demo](https://)
 ```
 
 ## Usage without Provider
-```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: EventNameInfo = {
-                    actionPrefix: eventActionPrefixList.JOURNEY,
-                    description: 'Welcome Landing',
-                    globalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED,
-                }
-
-                const trackingData: TrackAnalyticsEventOptions = {
-                    data: {},
-                    eventNameInfo,
-                    analyticsType: analyticsPlatform.DATALAYER_PUSH,
-                    dataLayerCheck: true,
-                }
-
-                await trackAnalyticsEvent(trackingData)
-            }
-
-            sendAnalyticsEvent()
-        })
-
-        const handleButtonClick = async () => {
-            const countActual = count + 1
-            setCount(countActual)
-
-            const eventNameInfo: EventNameInfo = {
-                eventName: 'count button click',
-                actionPrefix: eventActionPrefixList.INTERACTION,
-                globalAppEvent: analyticsGlobalEventActionList.AUTHENTICATED,
-                previousGlobalAppEvent: analyticsGlobalEventActionList.UNAUTHENTICATED
-            }
-
-            const trackingData: TrackAnalyticsEventOptions = {
-                data: {
-                    count: countActual,
-                    firstName: 'bob',
-                    lastName: 'yeah nah',
-                    email: 'yeahnah@gmail.com',
-                },
-                eventNameInfo,
-                analyticsType: analyticsPlatform.DATALAYER_PUSH,
-                consoleLogData: {
-                    showJourneyPropsPayload: true
-                }
-            }
-
-            await trackAnalyticsEvent(trackingData)
-        }
-        ...
-
-        return (
-            ...
-        )
-    }
-```
+> To view implementation and usage without the React Context/Provider visit this [codepen](https://codepen.io/roryfn/pen/OJBGvMG)

package/dist/index.d.ts

@@ -1,5 +1,144 @@
-export * from './lib/analytics/types'
-export * from './lib/buildConfig/types'
-export * from './lib/ipInfo/types'
-export * from './lib/types'
-export * from './lib/index'
+// react-marketing-tools.d.ts
+
+declare module 'react-marketing-tools' {
+  // Event types
+  export type Event = {
+    name: string
+    params: Record<AllowedTypes, AllowedTypes>
+  }
+
+  // GooglePayload type - Represents the payload structure for Google Analytics
+  export 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[]
+  }
+
+  // EventNameInfo type - Information about a specific analytics event
+  export type EventNameInfo = {
+    eventName: string
+    description?: string
+    actionPrefix: string
+    globalAppEvent: string
+    previousGlobalAppEvent?: string
+  }
+
+  // AllowedTypes type - Union type for allowed parameter types in events
+  export type AllowedTypes = string | number
+
+  // TrackAnalyticsEventOptions type - Options for tracking an analytics event
+  export type TrackAnalyticsEventOptions = {
+    data: Record<AllowedTypes, AllowedTypes>
+    eventNameInfo: EventNameInfo
+    analyticsType: string
+    userDataToHashKeyArray: Array<string> | null
+    dataLayerCheck: boolean
+    consoleLogData?: object
+  }
+
+  // GlobalVars type - Represents global variables in analytics tracking
+  export type GlobalVars = {
+    app: string
+    device_category?: string | undefined
+    device_os?: string | undefined
+    device_browser?: string | undefined
+  }
+
+  // DataLayer type - Represents the data layer for analytics events
+  export type DataLayer = {
+    event: string
+    globalVars: GlobalVars
+    journeyProps: Record<any, any>
+    userProps: Record<any, any>
+  }
+
+  // ConsoleLogData type - Options for console logging analytics data
+  export type ConsoleLogData = {
+    showGlobalVars?: boolean
+    showJourneyPropsPayload?: boolean
+    showUserProps?: boolean
+  }
+
+  // AnalyticsTrackerDataOptions interface - Options for analytics tracking
+  export interface AnalyticsTrackerDataOptions {
+    consoleLogData: ConsoleLogData | null
+    data: Record<any, any>
+    eventName: string
+    globalAppEvent: string
+    userDetails: Record<any, any>
+  }
+
+  // HandleDataLayerPushOptions type - Options for handling data layer push
+  export interface HandleDataLayerPushOptions
+    extends AnalyticsTrackerDataOptions {
+    dataLayerCheck: boolean
+  }
+
+  // Ga4GoogleAnalyticsEventTracking type - Options for GA4 Google Analytics event tracking
+  export type Ga4GoogleAnalyticsEventTracking = AnalyticsTrackerDataOptions
+
+  // Platform type - Union type for supported analytics platforms
+  export type Platform = 'GOOGLE' | 'FACEBOOK' | 'DATALAYER_PUSH'
+
+  // Tokens type - Represents tokens used in the analytics configuration
+  export type Tokens = {
+    IP_INFO_TOKEN?: string
+    GA4_PUBLIC_API_SECRET?: string
+    GA4_PUBLIC_MEASUREMENT_ID?: string
+  }
+
+  // Config type - Represents the configuration for analytics tracking
+  export 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>
+  }
+
+  // BuildConfigOptions type - Options for building the analytics configuration
+  export type BuildConfigOptions = {
+    appName: string
+    appSessionCookieName: string
+    eventActionPrefix?: Record<string, string>
+    globalEventActionList?: Record<string, string>
+    includeUserKeys?: boolean
+    showMissingUserAttributesInConsole?: boolean
+    TOKENS?: Tokens
+    withDeviceInfo?: boolean
+    withServerLocationInfo?: boolean
+  }
+
+  // Function declarations
+  export const analyticsPlatform: {
+    [key in Platform]: Platform
+  }
+
+  // Function to log supported analytics platforms
+  export const showMeBuildInAnalyticsPlatform: () => void
+
+  export const analyticsEventActionPrefixList: Record<string, string>
+
+  // Function to log built-in event action prefix list
+  export const showMeBuildInEventActionPrefixList: () => void
+
+  export const analyticsGlobalEventActionList: Record<string, string>
+
+  // Function to log built-in global event action list
+  export const showMeBuildInGlobalEventActionList: () => void
+
+  export let config: Config
+
+  // Function to build the analytics configuration
+  export const buildConfig: (options: BuildConfigOptions) => void
+}

package/dist/lib/types.d.ts

@@ -1,4 +1,5 @@
-import { Platform, TrackAnalyticsEventOptions } from '..';
+import { TrackAnalyticsEventOptions } from './analytics/types';
+import { Platform } from './buildConfig/types';
 export declare type ProviderStateProps = {
     appName: string;
     appSessionCookieName: string;

package/dist/manifest.json

@@ -1,7 +1,7 @@
 {
   "src/lib/index.tsx": {
     "file": "react-marketing-tools.umd.js",
-    "src": "src/lib/index.tsx",
-    "isEntry": true
+    "isEntry": true,
+    "src": "src/lib/index.tsx"
   }
 }