reactnative-plugin-appice 1.7.16 → 1.7.17

package/example/App.js

@@ -21,6 +21,9 @@ import { getInboxMessages, getMessageCounts, setUser, updatedInboxMessage } from
 import { handleUrl,receiveDeepLink } from './offerIdhandler';
 const AppICE = require('reactnative-plugin-appice');
 const HelloWorldApp = () => {
+
+
+
   const certs: never[] = [];
   if (AppICE) {
     console.log('AppICE is available');
@@ -37,17 +40,16 @@ const HelloWorldApp = () => {
       certs 
     );
 
-        addAppICEAPIListeners();
-
-        AppState.addEventListener('change', (nextAppState) => {
-          if (nextAppState === 'active') {
-           AppICE.isDeviceReady(true);
-          }
-          else if (nextAppState === 'background'){
-            AppICE.isDeviceReady(false);
-          }
-        });
-        
+    addAppICEAPIListeners();
+
+    AppState.addEventListener('change', (nextAppState) => {
+      if (nextAppState === 'active') {
+        AppICE.registerLifeCycle()
+
+        AppICE.isDeviceReady(true);
+      }
+    });
+
   }
 
 
@@ -76,6 +78,7 @@ const HelloWorldApp = () => {
       <Button onPress={synchronizeInbox} title="synchronizeInbox" color="#841584" />
       <Button onPress={getUserDetails} title="getUserDetails" color="#841584" />
       <Button onPress={getUserData} title="getUserData" color="#841584" />
+
     </View>
   );
 

package/example/PageA.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View, Text, Button } from 'react-native';
+import { usePageTracking } from './usePageTracking';
+
+const PageA = ({ navigation }: { navigation: any }) => {
+  usePageTracking('A', navigation);
+
+  return (
+    <View>
+      <Text>Page A</Text>
+      <Button title="Go to Page B" onPress={() => navigation.navigate('PageB')} />
+    </View>
+  );
+};
+
+export default PageA;

package/example/android/build.gradle

@@ -4,10 +4,10 @@ import org.apache.tools.ant.taskdefs.condition.Os
 
 buildscript {
     ext {
-        buildToolsVersion = "31.0.0"
+        buildToolsVersion = "34.0.0"
         minSdkVersion = 21
-        compileSdkVersion = 31
-        targetSdkVersion = 31
+        compileSdkVersion = 34
+        targetSdkVersion = 34
 
         if (System.properties['os.arch'] == "aarch64") {
             // For M1 Users we need to use the NDK 24 which added support for aarch64

package/example/package.json

@@ -17,7 +17,7 @@
     "install": "^0.13.0",
     "react": "18.0.0",
     "react-native": "0.69.4",
-    "reactnative-plugin-appice": "1.7.13",
+    "reactnative-plugin-appice": "1.7.16",
     "react-native-mmkv": "2.12.2"
   },
   "devDependencies": {

package/example/usePageTracking.ts

@@ -0,0 +1,88 @@
+import { useState, useEffect, useRef } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
+import AppICE from 'reactnative-plugin-appice';
+
+/**
+ * usePageTracking
+ *  PageView Event - The PageView event is used to Identify the moment a user views or lands 
+                          on a particular page or screen in your application.
+ * PageDuration Event - The PageDuration event measures the amount of time a user spends 
+                          on a particular page or screen
+
+ */
+
+export const usePageTracking = (pageName: string, navigation: any) => {
+  const [startTime, setStartTime] = useState<number | null>(null);
+  const appState = useRef<AppStateStatus>(AppState.currentState);
+  const isPageFocused = useRef(false); // Track if the page is currently focused
+  const isForeground = useRef(true); // Track if the app is in the foreground
+
+  useEffect(() => {
+    // Function to trigger PageView event
+    const triggerPageView = () => {
+      if (!isPageFocused.current) { // Ensure the PageView is triggered only once
+        setStartTime(Date.now());
+        const dataObj = { view: pageName };
+        console.log(`PageView event triggered for page: ${pageName}`);
+        AppICE.tagEvent('PageView', dataObj);
+        isPageFocused.current = true;
+      }
+    };
+
+    // Function to trigger PageDuration event
+    const triggerPageDuration = () => {
+      if (isPageFocused.current && startTime) {
+        const endTime = Date.now();
+        const totalSeconds = Math.floor((endTime - startTime) / 1000);
+        const dataObj = { name: pageName, duration: totalSeconds };
+        console.log(`PageDuration event triggered for page: ${pageName}, duration: ${totalSeconds}s`);
+        AppICE.tagEvent('PageDuration', dataObj);
+        setStartTime(null); // Reset the start time
+        isPageFocused.current = false;
+      }
+    };
+
+    // Handle focus and blur events
+    const handleFocus = () => {
+      console.log(`Page ${pageName} focused`);
+      if (isForeground.current) {
+        triggerPageView(); // Trigger PageView only when the app is in the foreground
+      }
+    };
+
+    const handleBlur = () => {
+      console.log(`Page ${pageName} lost focus`);
+      triggerPageDuration(); // Trigger PageDuration when leaving the page
+    };
+
+    const unsubscribeFocus = navigation.addListener('focus', handleFocus);
+    const unsubscribeBlur = navigation.addListener('blur', handleBlur);
+
+    // Handle app state changes (background/foreground)
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      console.log(`AppState changed from ${appState.current} to ${nextAppState}`);
+      if (appState.current.match(/active|inactive/) && nextAppState === 'background') {
+        triggerPageDuration(); // App went to background
+        isForeground.current = false;
+      } else if (appState.current === 'background' && nextAppState === 'active') {
+        isForeground.current = true;
+        if (isPageFocused.current) {
+          console.log(`Re-triggering PageView for page: ${pageName} after returning from background`);
+          triggerPageView(); // Re-trigger PageView when coming back to foreground
+        }
+      }
+      appState.current = nextAppState; // Update app state
+    };
+
+    const appStateListener = AppState.addEventListener('change', handleAppStateChange);
+
+    // Cleanup listeners on unmount
+    return () => {
+      unsubscribeFocus();
+      unsubscribeBlur();
+      appStateListener.remove();
+      triggerPageDuration(); // Trigger duration if unmounted
+    };
+  }, [navigation, pageName, startTime]);
+
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactnative-plugin-appice",
-  "version": "1.7.16",
+  "version": "1.7.17",
   "description": "appICE React Native SDK",
   "main": "index.js",
   "files": [