What makes AEM different from traditional CMSs? One of the main things is that you don’t have to deal with a page as a single unit of content. Instead, you can create smaller pieces of content to be reused across all and/or any of your pages. These small and page-agnostic content units are AEM Content Fragments and AEM Experience Fragments.

At first, it can be difficult to get the difference between Content Fragments vs. Experience Fragments. In this article, we’re going to clear up the confusion so that you know how to leverage each of them for efficient content production and management.

Content Fragments vs. Experience Fragments

In a nutshell, the difference between Content Fragments and Experience Fragments is that the former represents design-agnostic content while the latter specifies the layout and design: 

Experience Fragments in AEM (XF)

• Structured data in text format and images form a logical content unit.
• Design- and layout-agnostic, relying on the frontend application to define the look and feel of the content.
• Master variation is the primary version used by default and other variations are secondary and use-case specific.
• Serve mostly for the headless CMS implementation that separates content authoring and delivery.

Content Fragments in AEM (CF)

• Multiple AEM Components are assembled following a particular template.
• Presentation-centric, defining design and layout of content specific to different channels or front-end applications.
• All Variations are channel or context-specific and are synced using the AEM’s Live Copy feature.
• Serve for content reuse across pages on one website or multiple properties for centralized management of multi-channel marketing collateral.

AEM Content Fragments

Content Fragments in AEM are pieces of text-based content that can be either plain or structured but anyway free from any design or layout. When put together, several Content Fragments can form larger assets, such as blog posts, landing pages, etc.

Benefits of using AEM Content Fragments

Using AEM Content Fragments you separate authoring from content delivery. The content units you create are agnostic to any specific layout. It means that you can seamlessly fit them into various designs and benefit from:

• Modularity: With Content Fragments, you can create smaller pieces of content.
• Reusability: Every piece can be reused across multiple pages, ensuring information consistency across channels and properties.
• Flexibility: You can easily build different experiences using the same content units.

The listed benefits of Content Fragments create a prerequisite for implementing AEM as a headless CMS. A single piece of text from your database can be displayed on your site, mobile app, online store, or any other property where you need it.

How AEM Content Fragments Work

To use content fragments, you should first create a Content Fragment Model that will serve as a blueprint for a group of similar Content Fragment instances, describing what information you can include in them.

Using the blueprint, you can create as many Content Fragments as you need. Each of them will contain a Master Variation that will be used by default. If needed, you can add several more Variations to be used in specific channels or placements. Variations allow you to tailor content for different audiences.

All your content fragments are stored as assets for you to access, edit, and update through the Content Fragment Editor or the Assets Console. From the database they can:

• Get to a website built with AEM Sites
• Be sourced through Headless APIs into your single-page app
• Be sourced through AEM Content Services in a mobile app.

At every destination, there is a specific component that consumes the Content Fragment and defines how it fits in the layout and design. The following chart will help you visualize the Content Fragments architecture and better understand what happens under the hood:

AEM Content Fragments use cases

What types of content do AEM Content Fragments support? The short answer is mostly text, sometimes images. But it’s important to clarify that your texts can be of any length and structure. You can create a simple fragment with single-line or multi-line text. Or you can use structured text that includes different types of information: name, text, contact details, date, time, etc. For example, you can create a blog contributor profile as a Content fragment.

Here are some other examples of text-based assets that you can create:

• A library of product descriptions to be reused across different pages and channels.
• A set of customer testimonials, which can be integrated into different pages of a site.
• A set of call-to-actions that can be tailored to different campaigns and audiences.
• Blog posts, news, and articles are to be displayed on different properties and channels.
• Elements of an event page, such as speakers’ bios, session descriptions, and agenda.

This list can go on. The main thing you should know is that any piece of text that makes sense as an independent unit can be created and used as a Content Fragment.

AEM Experience Fragments

An Experience Fragment in AEM is a coherent set of components arranged in a certain way to represent a portion of a page or sometimes an entire page. For example, an Experience Fragment can contain pictures, paragraphs of text, and buttons that make the featured blog posts section on a home page.

Benefits of using AEM Experience Fragments

The main advantage of AEM Experience Fragments is in creating universal page sections to be reused across multiple pages and properties. With Experience Fragments, you benefit from:

• Consistency. Experience fragments can be reused on different pages and properties to keep your content in sync.
• Flexibility. You can respond quickly to changes in the market or in customer needs by updating content simultaneously across properties.
• Multichannel. Experience Fragments can be used as content ready to be published as social media posts.
• Optimization. You can create variations of experiences to cater to specific use cases, different audiences, and channels.

Overall, Adobe Experience Fragments support the headless deployment of AEM and enable content reuse across sites, social media, mobile apps, etc.

How AEM Experience Fragments Work

To create an Experience Fragment you need to choose a template that defines what components will be used to compose an experience. For every fragment, you add several Variations. They use the same content but have different layouts and designs adjusted to communication channels or properties where the content will be displayed:

• Integrated into a page on AEM Sites via the AEM Experience Fragment component.
• Delivered via AEM Content Services and API Pages to apps and third-party platforms.
• Exported to Adobe Target as an HTML/JSON file to create Offers and embed them into different activities.

Let’s see what the flow looks like in the Experience Fragments architecture diagram:

Experience Fragments use case

Let’s consider an example of a travel company using Experience Fragments to promote a tourist destination on their site and socials. Here’s what a marketing manager would do to quickly create a multi-channel experience:

• Create an Experience Fragment that follows a template the company uses for promoting destinations.
• Add several variations of the Experience Fragment for the desktop and mobile versions of the website, Pinterest, and Facebook.
• Publish the new Experience Fragment from the AEM console across all channels.

In a similar way, using a different template the marketer could create Experience Fragments representing portions of the tourist destination details page, including the location overview, accommodation, popular things to do in the nearby area, and more.

Not Counterparts But a Dynamic Duo

As you can see these two features of the AEM content management system serve different purposes. At the same time, each fulfilling its function, they perfectly work together.

An Experience Fragment can include some components that consume Content Fragments. These components shape text and images from Content fragments and integrate them in particular placements on pages and screens.

Both AEM Content Fragments and AEM Experience Fragments offer unique benefits that can help businesses create and manage their content more efficiently. They both enable the headless approach to content management and foster cross-channel content reuse.

FAQ

How is content stored in AEM?

Content is stored in AEM as a hierarchy of nodes within the Java Content Repository (JCR), which is a hierarchical data store that uses a standardized query language (SQL2) to access and manipulate content. The JCR provides a flexible and scalable storage solution that enables efficient content retrieval and management within AEM.

Is it possible to export AEM Experience Fragments to Target?

Yes, it is possible to export AEM Experience Fragments to Adobe Target as HTML and JSON files. This integration allows you to use Experience Fragments as offers in Target activities to test and personalize digital experiences at scale.

What is the difference between the AEM component and Experience Fragment?

An AEM Component is a self-contained unit that represents a specific functionality or piece of content structured and designed in a particular way. An Experience Fragment represents a group of components tied together to create a specific user experience.