From c0af6ce1d22903323b5fa7e80174311d9d7d51bd Mon Sep 17 00:00:00 2001 From: Matt Dole Date: Thu, 13 Jul 2023 16:36:48 +0200 Subject: [PATCH 1/5] feat: send additional Sift events on Android --- src/app/store/config/features.ts | 6 ++++++ src/app/system/navigation/ModalStack.tsx | 27 ++++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/src/app/store/config/features.ts b/src/app/store/config/features.ts index 713c6bd01cd..75058ff742b 100644 --- a/src/app/store/config/features.ts +++ b/src/app/store/config/features.ts @@ -260,6 +260,12 @@ export const features: { [key: string]: FeatureDescriptor } = { readyForRelease: false, showInDevMenu: true, }, + AREnableAdditionalSiftAndroidTracking: { + description: "Send additional events to Sift on Android", + readyForRelease: true, + showInDevMenu: true, + echoFlagKey: "AREnableAdditionalSiftAndroidTracking", + }, } export interface DevToggleDescriptor { diff --git a/src/app/system/navigation/ModalStack.tsx b/src/app/system/navigation/ModalStack.tsx index 4e0a640fbaf..85787579db7 100644 --- a/src/app/system/navigation/ModalStack.tsx +++ b/src/app/system/navigation/ModalStack.tsx @@ -8,8 +8,11 @@ import { Severity, addBreadcrumb } from "@sentry/react-native" import { AppModule, modules } from "app/AppRegistry" import { __unsafe_mainModalStackRef } from "app/NativeModules/ARScreenPresenterModule" import { GlobalStore } from "app/store/GlobalStore" +import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { logNavigation } from "app/utils/loggers" +import { useEffect, useRef } from "react" import { Platform } from "react-native" +import SiftReactNative from "sift-react-native" import { NavStack } from "./NavStack" import { useReloadedDevNavigationState } from "./useReloadedDevNavigationState" @@ -24,6 +27,24 @@ const Stack = createStackNavigator() export const ModalStack: React.FC = ({ children }) => { const initialState = useReloadedDevNavigationState("main_modal_stack", __unsafe_mainModalStackRef) const { setSessionState: setNavigationReady } = GlobalStore.actions + + // Code for Sift tracking; needs to be manually fired on Android + // See https://github.com/SiftScience/sift-react-native/pull/23#issuecomment-1630984250 + const enableAdditionalSiftAndroidTracking = useFeatureFlag( + "AREnableAdditionalSiftAndroidTracking" + ) + const trackSiftAndroid = Platform.OS === "android" && enableAdditionalSiftAndroidTracking + const routeNameRef = useRef() + useEffect(() => { + if (trackSiftAndroid) { + const initialRouteName = routeNameRef.current + // Expect error becuase their typing doesn't include setPageName, but it's there + // @ts-expect-error + SiftReactNative.setPageName(`screen_${initialRouteName}`) + SiftReactNative.upload() + } + }, []) + return ( { data: { ...params }, level: Severity.Info, }) + + if (trackSiftAndroid) { + // @ts-expect-error + SiftReactNative.setPageName(`screen_${currentRoute.name}`) + SiftReactNative.upload() + } } }} > From 105f3038a1625b7c1dd3cba6019d2f889af0afc3 Mon Sep 17 00:00:00 2001 From: Matt Dole Date: Fri, 14 Jul 2023 16:44:35 +0200 Subject: [PATCH 2/5] fix: correctly set initial route name --- src/app/system/navigation/ModalStack.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/system/navigation/ModalStack.tsx b/src/app/system/navigation/ModalStack.tsx index 85787579db7..220aa2c7a34 100644 --- a/src/app/system/navigation/ModalStack.tsx +++ b/src/app/system/navigation/ModalStack.tsx @@ -34,7 +34,7 @@ export const ModalStack: React.FC = ({ children }) => { "AREnableAdditionalSiftAndroidTracking" ) const trackSiftAndroid = Platform.OS === "android" && enableAdditionalSiftAndroidTracking - const routeNameRef = useRef() + const routeNameRef = useRef() useEffect(() => { if (trackSiftAndroid) { const initialRouteName = routeNameRef.current @@ -50,6 +50,7 @@ export const ModalStack: React.FC = ({ children }) => { ref={__unsafe_mainModalStackRef} initialState={initialState} onReady={() => { + routeNameRef.current = __unsafe_mainModalStackRef.current?.getCurrentRoute()?.name setNavigationReady({ isNavigationReady: true }) }} onStateChange={() => { From 70fb134010a5070b63a6ee244b700c54a3e43dae Mon Sep 17 00:00:00 2001 From: Matt Dole Date: Fri, 14 Jul 2023 16:44:58 +0200 Subject: [PATCH 3/5] chore: patch-package for types --- patches/sift-react-native+0.1.8.patch | 12 ++++++++++++ src/app/system/navigation/ModalStack.tsx | 3 --- 2 files changed, 12 insertions(+), 3 deletions(-) create mode 100644 patches/sift-react-native+0.1.8.patch diff --git a/patches/sift-react-native+0.1.8.patch b/patches/sift-react-native+0.1.8.patch new file mode 100644 index 00000000000..21364bc53fc --- /dev/null +++ b/patches/sift-react-native+0.1.8.patch @@ -0,0 +1,12 @@ +diff --git a/node_modules/sift-react-native/lib/typescript/src/index.d.ts b/node_modules/sift-react-native/lib/typescript/src/index.d.ts +index e6bcb83..6582ec8 100644 +--- a/node_modules/sift-react-native/lib/typescript/src/index.d.ts ++++ b/node_modules/sift-react-native/lib/typescript/src/index.d.ts +@@ -1,6 +1,7 @@ + declare type SiftReactNativeType = { + setSiftConfig(accountId: string, beaconKey: string, disallowCollectingLocationData: boolean, serverUrlFormat: string): void; + setUserId(userId: string): void; ++ setPageName(pageName: String): void; + unsetUserId(): void; + upload(): void; + }; diff --git a/src/app/system/navigation/ModalStack.tsx b/src/app/system/navigation/ModalStack.tsx index 220aa2c7a34..0aa14c64417 100644 --- a/src/app/system/navigation/ModalStack.tsx +++ b/src/app/system/navigation/ModalStack.tsx @@ -38,8 +38,6 @@ export const ModalStack: React.FC = ({ children }) => { useEffect(() => { if (trackSiftAndroid) { const initialRouteName = routeNameRef.current - // Expect error becuase their typing doesn't include setPageName, but it's there - // @ts-expect-error SiftReactNative.setPageName(`screen_${initialRouteName}`) SiftReactNative.upload() } @@ -75,7 +73,6 @@ export const ModalStack: React.FC = ({ children }) => { }) if (trackSiftAndroid) { - // @ts-expect-error SiftReactNative.setPageName(`screen_${currentRoute.name}`) SiftReactNative.upload() } From 014c20d780e52bc0d142b78f59b133fe0541cd52 Mon Sep 17 00:00:00 2001 From: Matt Dole Date: Fri, 14 Jul 2023 17:45:54 +0200 Subject: [PATCH 4/5] chore: update hacks.md --- HACKS.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/HACKS.md b/HACKS.md index 83952d1d45d..56e47e025db 100644 --- a/HACKS.md +++ b/HACKS.md @@ -378,3 +378,16 @@ Once we have removed the `palette` directory from eigen. #### Explanation/Context: Look at the tech plan here: https://www.notion.so/artsy/palette-mobile-in-eigen-c5e3396302734f0a921aed3978f5dbeb + +## Patch-package for sift-react-native + +#### When can we remove this: + +Just adds a type, so likely doesn't need to be removed. But if they officially add it +([see this issue](https://github.com/SiftScience/sift-react-native/issues/6)), we could drop this +patch. + +#### Explanation/Context: + +This package includes a `setPageName` method on `SiftReactNative`, but no corresponding type. +I patched it to add the type. From 3d08ba54b8a9461623d1dd43c68421044699cf0b Mon Sep 17 00:00:00 2001 From: Matt Dole Date: Fri, 14 Jul 2023 18:06:26 +0200 Subject: [PATCH 5/5] fix: set route name onReady --- src/app/system/navigation/ModalStack.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/app/system/navigation/ModalStack.tsx b/src/app/system/navigation/ModalStack.tsx index 0aa14c64417..ef2f8387e87 100644 --- a/src/app/system/navigation/ModalStack.tsx +++ b/src/app/system/navigation/ModalStack.tsx @@ -10,7 +10,6 @@ import { __unsafe_mainModalStackRef } from "app/NativeModules/ARScreenPresenterM import { GlobalStore } from "app/store/GlobalStore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { logNavigation } from "app/utils/loggers" -import { useEffect, useRef } from "react" import { Platform } from "react-native" import SiftReactNative from "sift-react-native" import { NavStack } from "./NavStack" @@ -34,22 +33,19 @@ export const ModalStack: React.FC = ({ children }) => { "AREnableAdditionalSiftAndroidTracking" ) const trackSiftAndroid = Platform.OS === "android" && enableAdditionalSiftAndroidTracking - const routeNameRef = useRef() - useEffect(() => { - if (trackSiftAndroid) { - const initialRouteName = routeNameRef.current - SiftReactNative.setPageName(`screen_${initialRouteName}`) - SiftReactNative.upload() - } - }, []) return ( { - routeNameRef.current = __unsafe_mainModalStackRef.current?.getCurrentRoute()?.name setNavigationReady({ isNavigationReady: true }) + + if (trackSiftAndroid) { + const initialRouteName = __unsafe_mainModalStackRef.current?.getCurrentRoute()?.name + SiftReactNative.setPageName(`screen_${initialRouteName}`) + SiftReactNative.upload() + } }} onStateChange={() => { const currentRoute = __unsafe_mainModalStackRef.current?.getCurrentRoute()