Experience Fragments

Learn what Experience Fragments are, how they differ from Content Fragments, and when to use them in real AEM projects.

Last reviewed: December 2024

·AEM 6.3+AEM 6.5AEM as a Cloud Service
✅
Quick Understanding: An Experience Fragment is a group of components — with content AND layout — that can be saved and reused across multiple pages. Think of it as a "saved section" of a page. A promotional banner that appears on 50 pages? Make it an Experience Fragment. Update it once, it updates everywhere.

🔍 What Is It?

An Experience Fragment (XF) is:

  • →A reusable page section that includes both content and presentation
  • →Stored under /content/experience-fragments in AEM Sites
  • →Built using the page editor (just like a regular page)
  • →Can be placed on multiple pages using the Experience Fragment component
  • →Supports variations — one XF can have a "Web" variation and a "Facebook" variation
  • →Can be exported to Adobe Target for A/B testing and personalization

Unlike Content Fragments (which are pure content), Experience Fragments are complete experiences — they contain the HTML structure, styles, and content together.

🎯 Why Do We Need It?

The Problem: Large websites have repeating sections — promotional banners, newsletter signups, cookie notices, footer CTAs. Without XFs, the same content is copy-pasted across hundreds of pages. When it needs to change, someone manually updates each page.

The Solution: Experience Fragments solve this by:

  • →Single source of truth — update the XF once, all pages using it update
  • →Author empowerment — authors can build and manage reusable sections without developer help
  • →Adobe Target integration — export XFs to Target for personalization and A/B testing
  • →Multi-channel — create different variations of the same experience for web, email, and social

🏗️ What Happens in Real Projects?

Real Project Scenarios:

Scenario 1: Promotional Banner

Marketing wants a "Black Friday Sale" banner on 200 pages. Create one XF, add it to all 200 pages. When the sale ends, update the XF once — all pages update instantly.

Scenario 2: Cookie Consent Banner

Legal requires a GDPR cookie banner on every page. Create it as an XF in the page template's footer area. Update it centrally when legal requirements change.

Scenario 3: Adobe Target Personalization

Marketing wants to A/B test two versions of a hero banner. Create two XF variations, export them to Adobe Target, and let Target serve the right version based on audience segments.

Scenario 4: Footer CTA

A subscription CTA appears in the footer of all blog pages. Create it as an XF. When the offer changes, update once.

⚙️ How It Works

Creating an Experience Fragment:

  1. Go to AEM Sites → Experience Fragments
  2. Create a new XF (choose a template — usually "Experience Fragment - Web Variation")
  3. Build the section using components in the page editor (just like a normal page)
  4. Save and publish the XF

Using an XF on a Page:

  1. Open a page in the editor
  2. Drop the "Experience Fragment" Core Component into a container
  3. In the component dialog, browse to and select your XF
  4. The XF renders in place on the page

Variations:

An XF can have multiple variations:

  • →Master — the default variation
  • →Web — optimized for web display
  • →Social Media — cropped/formatted for social
  • →Email — formatted for email clients

Building Blocks (XF Fragments):

You can create "building block" XFs that are used inside other XFs. This is like nesting components — a header XF might contain a logo building block and a navigation building block.

Export to Adobe Target:

In the XF editor, use the "Export to Adobe Target" action. AEM converts the XF to an HTML offer in Target. Target then serves it based on activity rules.

💻 Example

Experience Fragment in Practice — Creating a promotional banner XF and using it across multiple pages.

xml
<!-- Experience Fragment node structure -->
/content/experience-fragments/
  mysite/
    en/
      promotions/
        black-friday-banner/
          jcr:content/           ← XF page content
          master/                ← Master variation
            jcr:content/
              root/
                container/
                  banner/        ← Actual components
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="mysite/components/banner"
                    heading="50% Off Everything!"
                    subtext="Black Friday Sale - This Weekend Only"
                    ctaLabel="Shop Now"
                    ctaLink="/content/mysite/en/sale"
          web/                   ← Web variation
            jcr:content/ ...
          email/                 ← Email variation
            jcr:content/ ...

🤔 Common Confusions

❓ What is the difference between Content Fragments and Experience Fragments?

Content Fragments = content only (no HTML/styling). Experience Fragments = content + layout + styling. Use Content Fragments when you want to reuse raw content across channels (headless). Use Experience Fragments when you want to reuse a complete visual section (a banner, a footer, a promo block).

❓ Can I edit an Experience Fragment directly on a page?

No. When you see an XF on a page, it's read-only. To edit it, you must go to the Experience Fragments console and edit it there. This is intentional — it ensures the change applies everywhere the XF is used.

❓ What is the difference between an XF and a Template?

A template defines the structure of an entire page (header, footer, main area). An XF is a reusable section that can be placed inside a page. Templates are for page structure; XFs are for reusable content sections.

❓ Do Experience Fragments affect SEO?

Yes, but positively. The XF content is rendered inline on the page, so search engines see it as regular page content. However, if the same XF appears on many pages, the duplicate content could be a concern — use canonical tags appropriately.

🚨 Common Production Issues

XF changes not reflecting on pages

the page is cached by Dispatcher. After updating an XF, the Dispatcher cache for all pages using that XF must be invalidated.

XF shows blank on page

the XF path is wrong, or the XF isn't published. Always publish both the XF and the page.

Adobe Target export fails

check that the XF template is marked as "Experience Fragment" type, and that the Target cloud configuration is correctly set up.

XF appears differently across pages

the XF's Client Libraries aren't loading correctly on some pages. Check that the XF's clientlib categories are included in the page's template.

Performance issues

too many XFs on a single page causes multiple JCR reads. Consider consolidating or caching XF data.

Localized XF uses global content by accident

page references the Blueprint or master-language XF instead of the localized variation.

XF update creates inconsistent campaign pages

pages using the XF were not all republished or cache-invalidated after the XF change.

Target personalization differs from AEM preview

exported XF markup, clientlibs, or audience-specific data does not match the page where the offer is rendered.

✅ Best Practices

Use XFs for content that appears on 3+ pages

the overhead of creating an XF isn't worth it for one-off sections.

Name XFs clearly and organize them in a logical folder structure in the Experience Fragments console.

Always create a "Web" variation as your primary variation

the master is the template for other variations.

Keep XFs focused

one XF per distinct section (header, footer, promo banner). Don't create a single giant XF.

Publish XFs before publishing pages that use them

otherwise the page will render with a broken XF.

Use XF Building Blocks for sub-sections that are reused within multiple XFs.

Track where critical XFs are used so support teams know which pages need cache checks after a fragment update.

For global sites, create clear rules for when pages should reference global XFs, localized XFs, or MSM-managed XF copies.

Keep Target-ready XFs lean and self-contained so exported offers do not depend on page-specific styles or scripts.

🏛️ Architect's Note

Senior Architect's Perspective

Experience Fragments are powerful but often over-used. Here's the architect's perspective:

When to use XFs:

  • →Repeating promotional content (banners, offers)
  • →Navigation and footer sections
  • →Content that needs Adobe Target personalization
  • →Sections managed by a different team than the page

When NOT to use XFs:

  • →One-off page sections — just put the component directly on the page
  • →Highly dynamic content — XFs are better for relatively stable content
  • →Content that varies significantly per page — use page-level components instead

Performance consideration: Each XF reference adds a JCR read. For pages with many XFs, this can add up. Consider using page templates to include common XFs (header/footer) rather than adding them to every page individually.

💬 Frequently Asked Questions

Can Experience Fragments be translated?

Yes. AEM's Multi-Site Manager (MSM) and translation workflows support Experience Fragments. You can create language copies of XFs just like pages. This is important for global sites where the same promotional content needs to be localized.

What is an XF Building Block?

A Building Block is a component group within an XF that can be reused in other XFs. For example, a "Logo" building block used in both the header XF and the footer XF. When you update the logo building block, both XFs update.

How do I handle XF caching with Dispatcher?

XFs themselves can be cached by the Dispatcher. When an XF is updated and published, AEM sends flush requests for both the XF path and all pages that include the XF. Configure your Dispatcher flush agent to handle XF path invalidation.

Can I use Experience Fragments in email campaigns?

Yes. Create an "Email" variation of your XF with email-compatible HTML (inline styles, table layouts). You can export this variation and use it in email marketing tools. Some AEM integrations (like Adobe Campaign) can directly consume XF variations.

🎯 Key Takeaways

1Experience Fragments = content + layout + styling — a complete visual section
2Stored in /content/experience-fragments, built in the page editor
3Update once → updates everywhere the XF is used
4Supports variations for different channels (web, email, social)
5Exports to Adobe Target for A/B testing and personalization
6Different from Content Fragments: XFs have presentation; CFs don't

🎯 Practice this topic in interviews

↗ Where this topic fits

Sources

Sources / References

Use these AEM references to verify the concept in official docs and continue into the most relevant SplashRide pages.

Related SplashRide pages

SplashRide AEM learning path

Browse the full AEM topic collection and learning order on SplashRide.

AEM Interview Prep

Practice AEM interview questions and scenario-based answers.

AEM Developer Career Path

This AEM developer career path explains how to become an AEM developer through JCR, Sling, HTL, client libraries, Dispatcher, Cloud Service delivery, project depth, and interview-ready enterprise implementation skills.

Drupal Developer Career Path

A practical route through Drupal content modeling, site building, theming, modules, configuration management, APIs, performance, deployment discipline, and interview preparation.

Content Fragments

Learn what Content Fragments are, how they differ from regular page content, and why they're the foundation of headless AEM delivery.

AEM Components Explained: Dialogs, HTL, Sling Models, and Core Components

Learn AEM components with component nodes, dialogs, HTL, Sling Models, Core Components, authoring, inheritance, and real project patterns.