Content Segmentation in Styla

TLDR: Styla can display different content of a specific page for different audience segments. In order to get this working you need to a) provide user’s segment IDs to Styla on your website b) set up an alternative module per one or all segments when creating Styla pages.

Based on segments a user is assigned to, Styla serves content different from the default (no segmentation) version of the page. You create such versions in Styla Editor and assign them to segment IDs.

Styla can use segment data from any provider (Dynamic Yield, Kameleoon, Nosto, Segmentify etc.) as long as segment IDs are provided as described below.

What is needed:

The points 1, 2 and especially 3 below are done by your developers while 4 is done by content creators.

1. Define list of all segments you will use when creating Styla content.

Enter them as a top-level JSON node in the domain's "Theme Settings" tab in Styla Organization Manager at https://admin.styla.com/:

List of segment IDs and descriptions set up in the Organization Manager

If you don't have an access, Styla will set it up for you. Contact your Customer Success Manager at Styla or simply support@styla.com and pass them the list of your segments. The id field will be used to match Styla content with user's segment on the website while the description field will be displayed in Styla Editor as a label when assigning content to a segment.

You can read more about the Organization Manager here: https://docs.styla.com/managing-styla-accounts

Try to limit the number of your segments used in Styla to 5. Using more segments might result in much longer loading times and will make managing your content in Styla Editor a complex process.

2. Activate the "segmentation" feature

Go to your account's settings and switch this feature on:

The feature flag (highlighted) that needs to be activated when using segmentation

This will make Styla Editor display an additional UI element for assigning modules to a segment (details below) and Styla front-end serve multiple versions of the same page depending on which modules are assigned to which segment.

3. Push website visitor's segments to Styla JavaScript hook

Styla front-end needs to get segment IDs assigned a visitor currently viewing the website to display segment-specific modules. This relies on JavaScript so for no-JS browsers, search engines (and also if no segments provided) the default set of modules will be displayed.

Push segment IDs as an array to Styla's activeSegments hook in the window object, like this:

window.styla = window.styla || {};
window.styla.hooks = window.styla.hooks || [];
window.styla.hooks.push(['activeSegments', () => ['Sgm Lapsed Customer','Sale'], 'data' ]);

The segment IDs need to match the ones passed to Styla in the step 1 above.

You can include this inside a provider-specific logic delivering segments, for instance:

<script>(function() {
var name="nostojs";
window[name]=window[name]||function(cb){(window[name].q=window[name].q||[]).push(cb);};
})();
nostojs(function(api){api.listen('prerender', function(event) {
  window.styla = window.styla || {};
  window.styla.hooks = window.styla.hooks || [];
  window.styla.hooks.push(['activeSegments', () => [event.segments], 'data' ]);
});});</script>

You can render this server-side too to be faster, example:

$segments = $fetchSegments();
<PHP>
window.styla = window.styla || {};
window.styla.hooks = window.styla.hooks || [];
window.styla.hooks.push(['activeSegments', () => [$segments, 'data' ]);
</PHP>

Make sure to deliver visitor's segments no later than in 500ms. Otherwise Styla content might flicker or simply show the default page version instead of the segment-specific modules. For this reason, delivering segments with a server logic is worth considering.

4. Assign modules in your content to segments

Log in to Styla Editor and use the new UI visible in page's row and select segment per module to make this module visible only to the selected audience segment.

Click the segmentation icon on the right of a row to manage content for different segments

Click the "+" icon to select a module type to be added

Select one of the segments to assign them to your module. The ones you already have assigned will be greyed-out.

After that you can edit each of the modules as you would do without segmentation on: upload images, update text and links, select products. The row options like width, top spacing, mobile-only and background will influence the modules for any segment.

Using segments limits the number of modules per segments to one, so you won't be able to have multiple modules displayed on a row you use segmentation on.

Once you're done setting up your content, you can preview it as any of the segments included on the page. Select it from the drop-down list top-right of the Preview tab:

Select one of the segments top-right of the Preview tab to see how this page for this segment will look like.

Make sure not to overuse the segmentation feature on one page. If you create a page with 10 rows and each of them displaying one module per segment and create mobile-only versions of these rows then such a page will definitely load slowly. It is best to only use segments for crucial content, modules that really need to look different for each of your audience segments.

For every user without an assigned segment, the default version of the page will be displayed. Such users will only see modules from row's "Default" tab and this is why you can't remove such modules. This default page version will also be served to users without JavaScript activated, like search engine bots. As a result, search engines will index default page versions, without segment-specific content, and display them in search results.

How to test it:

once the segments list set up (point 1.) and the feature activated (point 2.) check if the new UI on row is displayed in Styla Editor
once your segment-providing code is deployed to a local, stage or production website (point 3), check if segments are pushed to Styla hook as expected
set up a Styla page with rows with segment-specific content configured, publish the page and test if the segment-specific modules show up to a website visitor from this segment
if that's not the case, debug in this order:
1. segments assigned to modules vs. the visitor's segments
2. the 500ms treshold not exceeded
3. the segments pushed to the correct Styla hook
4. pass all the info to Styla for debugging: page URL, access credentials, the visitor's segment, what is expected to show o the page and is not showing

< Styla Hooks