+ isIdentified: boolean
+ personalizationCount: number
+ onConsentChange: (accepted: boolean) => void
+ onIdentify: () => void
+ onReset: () => void
+}
+
+function isConsentAccepted(consent: boolean | undefined): boolean {
+ return consent === true
+}
+
+export function HomePage({
+ consent,
+ entriesById,
+ isIdentified,
+ personalizationCount,
+ onConsentChange,
+ onIdentify,
+ onReset,
+}: HomePageProps): JSX.Element {
+ return (
+ <>
+
+ Utilities
+
+
+ {isConsentAccepted(consent) ? (
+
+ ) : (
+
+ )}
+
+ {!isIdentified ? (
+
+ ) : (
+
+ )}
+
+
+ Consent: {String(consent)}
+ Personalizations: {personalizationCount}
+
+
+
+ Auto Observed Entries
+
+ {AUTO_OBSERVED_ENTRY_IDS.map((entryId) => {
+ const entry = entriesById.get(entryId)
+ if (!entry) {
+ return null
+ }
+
+ if (entry.sys.contentType.sys.id === 'nestedContent') {
+ return
+ }
+
+ return
+ })}
+
+
+
+
+ Manually Observed Entries
+
+ {MANUALLY_OBSERVED_ENTRY_IDS.map((entryId) => {
+ const entry = entriesById.get(entryId)
+ if (!entry) {
+ return null
+ }
+
+ return
+ })}
+
+
+
+ )
+}
diff --git a/implementations/web-react/src/pages/PageTwoPage.tsx b/implementations/web-react/src/pages/PageTwoPage.tsx
new file mode 100644
index 00000000..9410c299
--- /dev/null
+++ b/implementations/web-react/src/pages/PageTwoPage.tsx
@@ -0,0 +1,15 @@
+import type { JSX } from 'react'
+import { Link } from 'react-router-dom'
+import { HOME_PATH } from '../config/routes'
+
+export function PageTwoPage(): JSX.Element {
+ return (
+
+ Page Two
+ Secondary route for SPA navigation and page event validation.
+
+ Back to Home
+
+
+ )
+}
diff --git a/implementations/web-react/src/sections/ContentEntry.tsx b/implementations/web-react/src/sections/ContentEntry.tsx
new file mode 100644
index 00000000..8012d931
--- /dev/null
+++ b/implementations/web-react/src/sections/ContentEntry.tsx
@@ -0,0 +1,126 @@
+import { type JSX, useEffect, useMemo, useRef } from 'react'
+import { RichTextRenderer } from '../components/RichTextRenderer'
+import { useOptimization } from '../optimization/hooks/useOptimization'
+import { usePersonalization } from '../optimization/hooks/usePersonalization'
+import type { ContentfulEntry, RichTextDocument } from '../types/contentful'
+import { isRecord } from '../utils/typeGuards'
+
+interface ContentEntryProps {
+ entry: ContentfulEntry
+ observation: 'auto' | 'manual'
+}
+
+interface PersonalizationMeta {
+ experienceId?: string
+ sticky?: boolean
+ variantIndex?: number
+}
+
+function isRichTextField(field: unknown): field is RichTextDocument {
+ return (
+ typeof field === 'object' &&
+ field !== null &&
+ 'nodeType' in field &&
+ (field as { nodeType: unknown }).nodeType === 'document' &&
+ 'content' in field &&
+ Array.isArray((field as { content: unknown }).content)
+ )
+}
+
+function getPersonalizationMeta(value: unknown): PersonalizationMeta {
+ if (!isRecord(value)) {
+ return {}
+ }
+
+ const experienceId = typeof value.experienceId === 'string' ? value.experienceId : undefined
+ const sticky = typeof value.sticky === 'boolean' ? value.sticky : undefined
+ const variantIndex = typeof value.variantIndex === 'number' ? value.variantIndex : undefined
+
+ return { experienceId, sticky, variantIndex }
+}
+
+function getEntryText(contentEntry: ContentfulEntry): string {
+ return typeof contentEntry.fields.text === 'string' ? contentEntry.fields.text : 'No content'
+}
+
+export function ContentEntry({ entry, observation }: ContentEntryProps): JSX.Element {
+ const { sdk, isReady } = useOptimization()
+ const { resolveEntry } = usePersonalization()
+ const containerRef = useRef(null)
+
+ const resolved = useMemo(() => resolveEntry(entry), [entry, resolveEntry])
+ const { entry: resolvedEntry, personalization } = resolved
+
+ const { experienceId, sticky, variantIndex } = useMemo(
+ () => getPersonalizationMeta(personalization),
+ [personalization],
+ )
+
+ useEffect(() => {
+ if (!isReady || sdk === undefined || observation !== 'manual') {
+ return
+ }
+
+ const { current: element } = containerRef
+ if (!element) {
+ return
+ }
+
+ sdk.untrackEntryViewForElement(element)
+
+ sdk.trackEntryViewForElement(element, {
+ data: {
+ entryId: resolvedEntry.sys.id,
+ personalizationId: experienceId,
+ sticky,
+ variantIndex,
+ },
+ })
+
+ return () => {
+ sdk.untrackEntryViewForElement(element)
+ }
+ }, [experienceId, isReady, observation, resolvedEntry.sys.id, sdk, sticky, variantIndex])
+
+ const richTextField = Object.values(resolvedEntry.fields).find(isRichTextField)
+
+ const fullLabel = `Entry: ${resolvedEntry.sys.id}`
+
+ const autoTrackingAttributes =
+ observation === 'auto'
+ ? {
+ 'data-ctfl-entry-id': resolvedEntry.sys.id,
+ 'data-ctfl-baseline-id': entry.sys.id,
+ 'data-ctfl-personalization-id': experienceId,
+ 'data-ctfl-sticky': sticky === undefined ? undefined : String(sticky),
+ 'data-ctfl-variant-index': variantIndex === undefined ? undefined : String(variantIndex),
+ }
+ : undefined
+
+ const manualTrackingAttributes =
+ observation === 'manual'
+ ? {
+ 'data-entry-id': entry.sys.id,
+ }
+ : undefined
+
+ return (
+
+
+
+ {richTextField ? (
+
+ ) : (
+
{getEntryText(resolvedEntry)}
+ )}
+
{`[Entry: ${entry.sys.id}]`}
+
+
+
+
{text}
+
{`[Entry: ${resolvedEntry.sys.id}]`}
+
+
+ {nestedEntries.filter(isEntry).map((nestedEntry) => (
+
+ ))}
+