Skip to main content

Segmentation targeting with StorifyMe

In case you want your widget to be dynamic and to show different stories to different audiences you would need to add tags into the script. Once StorifyMe receives the demographic you want to show stories to, it will only show the stories within a widget that match the tags for that demographic.

Setup segments​

In the following example we will create a segment for stories with tags of ["featured", "sport"].

Before you begin

You need to have the working StorifyMe setup as described in Initial SDK Setup

Set your tags in the StorifyMe platform​

When publishing story in the StorifyMe platform, you will find an option named "Story tags". There you should set your tags (for example "featured", "sport") and we will only show those stories that have one (or more) of the defined tags.

Set your tags in the StorifyMe SDK​

In order to show stories with specific tags, you need to configure them in the SDK itself. You can do that by providing the attribute segments when initializing StorifyMe widget, like for example:

import {
    StorifyMeEnv,
    StorifyMeWidget,
    StorifyMe,
    StorifyMeWidgetConfig,
} from 'react-native-storifyme';

export default function App(): JSX.Element {
    const ref = React.useRef(null);

    // Widget configuration
    const widgetConfig: StorifyMeWidgetConfig = {
        segments: ['featured', 'sport'],
    };

    return (
        <App>
            <StorifyMeWidget
                accountId={ACCOUNT_ID}
                apiKey={API_KEY}
                env={ENV}
                widgetId={WIDGET_ID}
                config={widgetConfig}
                style={styles.box}
                ref={ref}
                segments={segments}
            />
        </App>
    );
}

Once the widget is loaded, we will show stories with the tags defined in this method.

Example usage​

  • If you do not give any parameters to segments, StorifyMe SDK will show all stories with/without tags that belong to this widget. This is the default behavior.
  • If you set tags, StorifyMe SDK will show the stories that have one or more of the defined tags. For example, if you set segments ['featured', 'sport'], StorifyMe SDK will show all stories that belong to this widget and have either featured or sport tag (or have both tags).

Exclude specific tags from story display​

To prevent stories containing certain tags from appearing in the widget, pass the exceptSegments array in the widget config:

import {
    StorifyMeEnv,
    StorifyMeWidget,
    StorifyMe,
    StorifyMeWidgetConfig,
} from 'react-native-storifyme';

export default function App(): JSX.Element {
    const ref = React.useRef(null);

    const widgetConfig: StorifyMeWidgetConfig = {
        exceptSegments: ['sponsored', 'ad'],
    };

    return (
        <StorifyMeWidget
            accountId={ACCOUNT_ID}
            apiKey={API_KEY}
            env={ENV}
            widgetId={WIDGET_ID}
            config={widgetConfig}
            ref={ref}
        />
    );
}

After the widget loads, stories with the tags specified in exceptSegments will be excluded from display.

Set segment user ID​

To resolve CDP audience segments server-side, provide a segmentUserId in the widget config. This must be set before the widget loads.

const widgetConfig: StorifyMeWidgetConfig = {
    segmentUserId: 'user-123',
};

Get server segments​

After the widget has finished loading, you can retrieve the segments configured in the StorifyMe editor for that widget:

export default function App() {
    const ref = React.useRef(null);

    const fetchServerSegments = async () => {
        const segments = await StorifyMe.getServerSegments(ref);
        console.log(segments); // e.g. ['featured', 'sport']
    };
}

This method returns an array of segment tags as defined in the StorifyMe platform editor. Unlike segments (which configures client-side filtering), getServerSegments() retrieves the actual segments assigned to the widget on the server.

When to use

Call this method after the widget has successfully loaded to access the server-defined segments. This is useful for making dynamic content adjustments based on the widget's configured segments.