contentful · Charles Hudson (phobetron) · Nov 20, 2025 · Nov 20, 2025
@@ -28,7 +28,7 @@ test.describe('identified user', () => {
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a baseline content entry for an A/B/C experiment: A'),
+      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
     ).toBeVisible()
 
     await expect(

@@ -26,7 +26,7 @@ test.describe('unidentified user', () => {
     await expect(page.getByText('This is a variant content entry for new visitors.')).toBeVisible()
 
     await expect(
-      page.getByText('This is a baseline content entry for an A/B/C experiment: A'),
+      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
     ).toBeVisible()
 
     await expect(

@@ -29,12 +29,18 @@ test.describe('identified user', () => {
   })
 
   test('displays identified user variants', async ({ page }) => {
+    await expect(page.getByText('This is a level 0 nested variant entry.')).toBeVisible()
+
+    await expect(page.getByText('This is a level 1 nested variant entry.')).toBeVisible()
+
+    await expect(page.getByText('This is a level 2 nested variant entry.')).toBeVisible()
+
     await expect(
       page.getByText('This is a variant content entry for return visitors.'),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a baseline content entry for an A/B/C experiment: A'),
+      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
     ).toBeVisible()
 
     await expect(

@@ -23,10 +23,16 @@ test.describe('unidentified user', () => {
   })
 
   test('displays unidentified user variants', async ({ page }) => {
+    await expect(page.getByText('This is a level 0 nested baseline entry.')).toBeVisible()
+
+    await expect(page.getByText('This is a level 1 nested baseline entry.')).toBeVisible()
+
+    await expect(page.getByText('This is a level 2 nested baseline entry.')).toBeVisible()
+
     await expect(page.getByText('This is a variant content entry for new visitors.')).toBeVisible()
 
     await expect(
-      page.getByText('This is a baseline content entry for an A/B/C experiment: A'),
+      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
     ).toBeVisible()
 
     await expect(

@@ -1,12 +1,15 @@
 import { expect, test } from '@playwright/test'
 
 const variantEntryTexts: Record<string, string> = {
+  '1JAU028vQ7v6nB2swl3NBo': 'This is a level 0 nested baseline entry.',
+  '5i4SdJXw9oDEY0vgO7CwF4': 'This is a level 1 nested baseline entry.',
+  uaNY4YJ0HFPAX3gKXiRdX: 'This is a level 2 nested baseline entry.',
   '1MwiFl4z7gkwqGYdvCmr8c':
     'This is a merge tag content entry that displays the visitor\'s continent "EU" embedded within the text.',
   '4k6ZyFQnR2POY5IJLLlJRb': 'This is a variant content entry for visitors from Europe.',
   '6iyPl6vfDH5AoClf3MtYlh': 'This is a variant content entry for visitors using a desktop browser.',
   '1UFf7qr4mHET3HYuYmcpEj': 'This is a variant content entry for new visitors.',
-  '5XHssysWUDECHzKLzoIsg1': 'This is a baseline content entry for an A/B/C experiment: A',
+  '4bmHsNUaEibELHwWCon3dt': 'This is a variant content entry for an A/B/C experiment: B',
   '6zqoWXyiSrf0ja7I2WGtYj':
     'This is a baseline content entry for all visitors with or without a custom event.',
   '7pa5bOx8Z9NmNcr7mISvD':
@@ -81,7 +84,7 @@ test.describe('events', () => {
         .filter({ has: page.getByRole('button', { name: 'component' }) })
         .all()
 
-      expect(allComponentEvents.length).toEqual(7)
+      expect(allComponentEvents.length).toEqual(10)
     })
   })
 })
@@ -7,6 +7,9 @@
     <script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>
     <script src="/dist/index.umd.cjs"></script>
     <style>
+      * {
+        box-sizing: border-box;
+      }
       html,
       textarea,
       input,
@@ -28,13 +31,15 @@
           sans-serif;
       }
       h1,
+      main {
+        max-width: 1040px;
+        margin-inline: auto;
+      }
       main {
         display: grid;
         grid-gap: 2rem;
         grid-template-rows: auto 1fr;
         grid-template-columns: 1fr auto;
-        max-width: 1040px;
-        margin-inline: auto;
       }
       section:first-of-type {
         grid-column: 1 / span 2;
@@ -73,18 +78,27 @@
       #manually-observed {
         display: grid;
         grid-gap: 2rem;
-        grid-auto-rows: 75dvh;
-        justify-items: center;
-        align-items: center;
+        grid-auto-rows: minmax(75dvh, auto);
         margin-block-end: 2rem;
 
         > div {
           display: grid;
+          grid-gap: inherit;
+          grid-auto-rows: inherit;
           width: 100%;
           height: 100%;
-          justify-items: center;
-          align-items: center;
+          padding: 2rem;
           background: #eee;
+          overflow: visible;
+        }
+
+        div.nested {
+          display: grid;
+          grid-gap: inherit;
+          grid-auto-rows: inherit;
+          padding: 1rem;
+          border: 1px solid #ccc;
+          overflow: visible;
         }
       }
     </style>
@@ -111,6 +125,9 @@ <h2>Utilites</h2>
         <h2>Entries</h2>
 
         <div id="auto-observed">
+          <div data-ctfl-entry-id="1JAU028vQ7v6nB2swl3NBo">
+            <!-- Nested Entry -->
+          </div>
           <div data-ctfl-entry-id="1MwiFl4z7gkwqGYdvCmr8c">
             <!-- Merge Tag "Rich Text" Entry -->
           </div>
@@ -273,17 +290,8 @@ <h2>Event Stream</h2>
         }
       }
 
-      // Get the personalized entry and render
-      async function addPersonalizedEntry(entryId, element, autoObserve = true) {
-        let rawEntry
-
-        try {
-          rawEntry = await contentfulClient.getEntry(entryId, { include: 10 })
-        } catch (error) {
-          console.warn(`Entry "${entryId}" could not be found in the current space`)
-          return []
-        }
-
+      // Render personalized entries
+      async function renderPersonalizedEntry(rawEntry, element, autoObserve = true) {
         const { entry, personalization } = optimization.personalization.personalizeEntry(rawEntry)
 
         if (isRichText(entry.fields?.text)) {
@@ -296,6 +304,15 @@ <h2>Event Stream</h2>
           element.replaceChildren(p)
         }
 
+        if (entry.fields?.nested) {
+          const div = document.createElement('div')
+          div.className = 'nested'
+          entry.fields.nested.forEach((nestedEntry) =>
+            renderPersonalizedEntry(nestedEntry, div, autoObserve),
+          )
+          element.appendChild(div)
+        }
+
         // NOTE: Elements that are not auto-observed may still be auto-tracked (see below)
         if (autoObserve) {
           // The `data-ctfl-entry-id` data attribute is required for auto-observing
@@ -312,6 +329,20 @@ <h2>Event Stream</h2>
         return [entry, personalization]
       }
 
+      // Get the personalized entry to render
+      async function addPersonalizedEntry(entryId, element, autoObserve = true) {
+        let rawEntry
+
+        try {
+          rawEntry = await contentfulClient.getEntry(entryId, { include: 10 })
+        } catch (error) {
+          console.warn(`Entry "${entryId}" could not be found in the current space`)
+          return []
+        }
+
+        return renderPersonalizedEntry(rawEntry, element, autoObserve)
+      }
+
       const manuallyObservedEntryElements = new Map()
 
       // Manually observe view elements for auto-tracking
@@ -362,7 +393,7 @@ <h2>Event Stream</h2>
         toggleIdentity(profile.traits && Object.keys(profile.traits).length)
 
         document.querySelectorAll('[data-ctfl-entry-id]').forEach(async (element) => {
-          const [entry] = await addPersonalizedEntry(element.dataset.ctflEntryId, element)
+          await addPersonalizedEntry(element.dataset.ctflEntryId, element)
         })
 
         document.querySelectorAll('[data-entry-id]').forEach(async (element) => {