Hey team, I am struggling with getting the following to trigger a experiment_viewed event. Also when using the growthbook extension, I see the feature flags but not the experiments (even active ones). Is there anything that is wrong with this configuration?

src/growthbook/growthbook.ts

import { GrowthBook } from '@growthbook/growthbook'; // @ts-ignore import { thirdPartyTrackingPlugin, autoAttributesPlugin } from '@growthbook/growthbook/plugins'; export const growthbook = new GrowthBook({ apiHost: 'https://cdn.growthbook.io', clientKey: process.env.REACT_APP_GROWTHBOOK_CLIENT_KEY || '', enableDevMode: true, plugins: [autoAttributesPlugin(), thirdPartyTrackingPlugin({ trackers: ['ga4', 'gtm'] })], });

src/growthbook/GrowthBookProvider.tsx

import React, { useEffect } from 'react'; import { GrowthBookProvider as GrowthBookProviderBase } from '@growthbook/growthbook-react'; import { growthbook } from './growthbook'; const GrowthBookProvider = ({ children }: { children: React.ReactNode }) => { useEffect(() => { growthbook.init({ streaming: true }); }, []); return <GrowthBookProviderBase growthbook={growthbook}>{children}</GrowthBookProviderBase>; }; export default GrowthBookProvider;

src/App.tsx

import GrowthBookProvider from './growthbook/GrowthBookProvider'; const App = () => { ... return ( <GrowthBookProvider> ... </GrowthBookProvider> ); }; export default App;

src/app/features/Navigation/Navigation.tsx

import { Box, BoxProps, useBreakpointValue } from '@chakra-ui/react'; import React from 'react'; import { useSelector } from 'react-redux'; import { selectInteractions } from '../../redux/selectors/interactions.selectors'; import { selectVisitor } from '../../redux/selectors/visitor.selectors'; import { ABOVE_MODAL_Z_INDEX, NAVIGATION_Z_INDEX } from '../../shared/constants'; import GalleryWelcome from '../MultiGallery/GalleryWelcome'; import { DISCOUNTS_BANNER_HEIGHT } from './constants'; import DesktopNavigation from './DesktopNavigation'; import MobileActionBar from './MobileActionBar'; import StickyRibbon from '../../shared/components/StickyRibbon/StickyRibbon'; import { IfFeatureEnabled, useFeatureValue } from '@growthbook/growthbook-react'; import { STICKY_RIBBON_TEST } from '../../shared/constants/features-flags.constants'; const Navigation = (props: BoxProps) => { const { isLoggedIn } = useSelector(selectVisitor); const { showNav, showWelcomeModal, showFindGalleryModal } = useSelector(selectInteractions); const value = useFeatureValue(STICKY_RIBBON_TEST, null); const isMobile = useBreakpointValue({ base: true, md: false }, { ssr: false }); if (!isLoggedIn) { return null; } return ( <Box as="nav" backgroundColor="white" display={showNav ? undefined : 'none'} position={isMobile ? 'sticky' : 'relative'} top="0" width={showFindGalleryModal ? '100vw' : undefined} zIndex={showFindGalleryModal ? ABOVE_MODAL_Z_INDEX : NAVIGATION_Z_INDEX} {...props} > {value ? ( <IfFeatureEnabled feature="sticky-ribbon"> <StickyRibbon>{value}</StickyRibbon> </IfFeatureEnabled> ) : ( <Box background="black" height={${DISCOUNTS_BANNER_HEIGHT}px} width="100%"> {/* TODO: Replace this box with notification banner component */} </Box> )} {isMobile ? <MobileActionBar showNavigation /> : <DesktopNavigation />} {showWelcomeModal && <GalleryWelcome />} </Box> ); }; export default Navigation;

I don't see anything blatantly wrong here in the code. The fact that the experiments aren't showing up in the payload seems to point at something in the GrowthBook setup. Are you able to share a screenshot of your GrowthBook flag with the experiment rule?

Hi Ryan, Thanks for getting back to me! Here is a screenshot of the feature flag

In the first screenshot, there's a force rule. That won't show up as an experiment and it'll only apply when your condition is met. That means that in your code, too, you need to be passing in that

galleryId

. With React, you can look at the code example for the

setAttributes

part. With the second screenshot, it says the experiment is no longer active, so that won't show up either. It also looks like under

Dev

you have several more rules than in prod. That's fine but could also be complicating your debugging. My recommendation would be to start from scratch: create a new feature, add an experiment, and then check that out in the codebase to ensure everything is working as intended. Once you have your baseline, then you'll be ready to add in more complexity.

Thanks @strong-mouse-55694, I'll try this out!