Displaying Contentful entries to segmented visitors

note

The following instructions assume that you're a web developer familiar with JavaScript and Contentful's Content APIs.

You can display Contentful entries using a modification in the Frosmo Platform, or you can implement a display solution directly in the page source code (provided you have access to the code). The basic steps are the same for both approaches. The difference is in where you do the work and place the final code.

To display entries with attached segments only to visitors in those segments:

1. Get the IDs of the current visitor's segments.

   On the site, the Frosmo Platform stores the segment IDs in the visitor's context. You can find the IDs in the segments property of the context data (a JSON object). The segments property is an object where each child property corresponds to a single segment to which the visitor currently belongs. The key of each child property is a segment ID prefixed with "sgmt_", such as "sgmt_58508", while the child property value is always 1.

   // Example segments object in the visitor's context
   
   "segments": {
       "sgmt_58508": 1,
       "sgmt_58511": 1,
       "sgmt_58530": 1
   }

   Use the frosmo.easy.context.segments property to get the segment IDs. The property is available and validated only after Frosmo Core has finished initializing and triggered the frosmo.easy.EVENT_EASY_READY event, so make sure to wait for that event.

   The following code example uses the public Frosmo Core function frosmo.easy.ready() to listen for the event. The function can either invoke a callback function or resolve a Promise when the frosmo.easy.EVENT_EASY_READY event occurs.

   var visitorSegments = null;
   
   // Use a callback...
   frosmo.easy.ready(function coreReadyCb() {
       visitorSegments = Object.keys(frosmo.easy.context.segments);
   });
   
   // ...or use a Promise.
   frosmo.easy.ready()
       .then(function () {
           visitorSegments = Object.keys(frosmo.easy.context.segments);
       });
   
   // Example output: ["sgmt_58508", "sgmt_58511", "sgmt_58530"]
   tip

   If you're using a modification to display an entry:

   • If the modification content is not preloaded, Frosmo Core will always finish initializing before rendering the content on the page. The frosmo.easy.context.segments property will therefore always be available for the content. You do not need to wait for the property.

   • If the modification content is preloaded, create a trigger with Frosmo script ready as the evaluation point event, and attach the trigger to the modification's placement, instead of manually coding the event listener in the modification content. The trigger ensures that the content gets rendered only after Frosmo Core has finished initializing.

2. Get the entries matching the current visitor's segments from Contentful.

   Use the appropriate Content API to retrieve the entries from Contentful. Filter the entries based on the current visitor's segments.

3. Render the entries on the page.

   If you're using a modification, build the entries for display in the modification content or, if the modification uses a template, in the template content.

For a practical example that uses a modification and a template to target an entry to segmented visitors, see Example: Creating a segmented hero banner with Contentful.