We use cookies to customize content for your viewing and for analytics. If you continue to browse this website, we will assume that you are happy to receive all our cookies. For further information please read our cookie policy.
Experience fragments
Release 5.0.9
Relative links in experience fragments
- Relative links are now supported in experience fragments (XF). When a page using an experience fragment is rolled down to a country site, links created in the XF that point to a parent site (e.g. us/en/) will be converted to a local link.
- For example: If an experience fragment contains a relative link (/us/en/about.html) and the page using that XF is rolled out to another site (Italy), the link will be updated to point to the page for the respective site (/it/it/about.html).
- When customers click on the link in the XF on a page in the Italy site, customers will be taken to the Italian "About" page.
- NOTE: Authors will be responsible for ensuring the respective page exists on the local site. If the page does not exist, the customer will have a broken link.
- If authors do not want the link to be translated to the local site upon roll-out, the XF will need to use the full URL rather than the path selector. (e.g. https://www.stryker.com/us/en/about.html)
Original release
An Experience Fragment (XF) is a set of content that create an experience which makes sense on its own. XFs are essentially standalone content that can be utilized to build an experience that is delivered through a digital channel such as a webpage. With Experience Fragments, marketers can:
- Reuse an experience across multiple channels
- Create variations of an experience for specific use-cases (desktop/app/mobile web)
Experience fragments need a delivery channel for an end user to interact with the content.
Key terms
- Experience fragment (XF): the group of components that make up the presentation of a message
- Variation: different ways of presenting the same message contained in a fragment. The message should not change between variations of a fragment--only the presentation should vary.
- Delivery channel: an application that consumes the fragment and allows the intended audience to experience the content contained within the fragment. Examples of delivery channels are: a site page, a mobile application, an ecommerce site, an email.
Common use cases
- Centralized management of digital collateral designed to be consumed across multiple channels.
- Content re-used across multiple pages in a web site
Best practices
- The message should stay consistent across variations for a single fragment variation; only the presentation should change.
- If the message needs to change, create a new XF.
- Develop a strategy when constructing your content so that the necessary flexibility is built into the way it is authored. Consider the questions "When to use an XF vs a webpage" when planning your content strategy.
- Designers should test the presentation across all planned screen widths (desktop/tablet/mobile), making presentation adjustments and variations as needed.
Adobe Resources
Learn about Experience fragments directly from Adobe.
A simple experience fragment
Use case: A product needs to be launched in multiple countries, however some countries do not permit descriptions or claims about the product to be mentioned on the website. Other countries are not as restrictive and permit visitors to learn more or even drive visitors to an extensive web campaign.
The example below shows how an XF for a Product Name presentation can be authored with variations to support the needs of different markets.
Product name only
The Product Name variation only displays the trademarked name of the product.
Product with subtitle
The Product Name and Subtitle variation displays the name of the product and a common description that leverages keywords to make the product findable by search engines.
Product, subtitle and call to action*
The addition of a call to action (CTA) provides the visitor with a way to navigate to a global marketing campaign for the product.
*NOTE: The URL should not vary across markets. If the URL for the CTA needs to be different for each country, it does not pass the test that the "message should not change across variations". A new XF should be created per country.
Nested experience fragments
Experience fragments can contain other experience fragments. Be thoughtful when nesting XFs as it can add complexity when making updates. When future updates are made, the author will need know to which XF requires the changes.
Use case: An author would like to re-use the Product Name XF to create a Page Hero that has a graphic of the product. The author would like to have variations on which graphic is presented. For countries where only the title can be presented, the author would like to create a more interesting crop on the image to fill in the space. For countries where the hero can contain more information, the author would like to use original hero shot of the product.
Baseline Hero
Knowing that some countries will not allow more than the trademarked name, the author creates a hero that only has an image and product name. Because of the minimal content, the author chooses an interesting crop of the image so that it fills the space better.
Baseline hero with subtitle
Knowing that for most countries a short description is permitted, the author creates a hero that uses the additional information and would be used most often.
This helps make the page rank higher in search engines and increases conversions.
Hero with CTA and full product photo
For markets where the business can promote a global campaign for the product, the author creates a variation of the page hero that has a "Learn More" CTA.
With the additional content, the author chooses to use the original hero shot of the product. Overall, the content and message are the same, only the presentation is different between variations.
A PAGE is an object created in the SITES section of AEM and can contain:
- Content directly authored on the page, itself, using components
- One or more XFs curated from the EXPERIENCE FRAGMENT area in AEM
- A mix of both page content and XFs
Before creating a new page of content, consider how you would answer the questions "When to use an XF vs a webpage".
| Use case | Create as page content | Create as XF content |
|---|---|---|
| A contact us button that navigates to the local office within the country | X | |
| Product Hero that contains the trademarked name and hero image; it does not change per country | X | |
| Product features and benefits that can be reused in several countries but is not globally approved | X |
When to use an XF vs a web page
If you can answer "Yes" to these questions, then it may be better to create the content using an experience fragment and then build a webpage as a delivery channel for the XF.
- Will the content be used on more than one page?
- Are you creating the content for other authors to re-use?
- Does the content generally stay the same regardless of country/market?
- Does the content need to be presented differently based on screen size?
- Does the content need to be presented differently based on context? (e.g. A news story needs to appear in long form, short form, and a teaser)
Product page in Australia
Use Case: In Australia, the product cannot be marketed beyond the product name and image. Customers looking to learn more must contact the in-country distributor.
Implementation: The author uses the baseline hero version to construct the product page, the contact button remains as page-specific content.
Product page in US
Use Case: In the US, the product can be marketed with extensive features and benefits. Customers looking to learn more can navigate to an additional campaign page and can also contact the US based sales rep.
Implementation: The author uses the full product hero version that includes a CTA that navigates to the campaign page. A second XF is added containing the features and benefits (teal box). The contact button and brochure links remain as page-specific content because they link to a US version of the brochure and contact information.
Product page in Indonesia
Use Case: In Indonesia, the product can be marketed the same information as the US, including the features and benefits. However, the regional team does not want to drive customers to the call to action that sends customers to the marketing campaign. Customers looking to learn more must contact the in-country distributor.
Implementation: The author uses the hero version that includes the subtitle but not the CTA. Because the features and benefits can also be reused, the page is constructed a second XF (teal box). The contact button and brochure links remain as page-specific content because they link to a version of the brochure and contact information specifically for the market in Asia Pacific.
Experience fragments can only be created by people with the Fragment Superuser role. The Fragment Superuser is responsible for determining the governance that is in place for their busienss. It is recommended to only have one person serve as the Fragment superuser per business.
Role: Fragment Superuser
1. Navigate to the respective location your business in AEM Experience Fragments area
- Fragments should be created in the English (en) language node; to create translations, busiensses should use Clay Tablet.
- It is recommended to create folders to organize your fragment categories (e.g. products, contact information, events, etc.)
2. Create the XF by clicking the "CREATE" button and selecting "Experinece Fragment > Reusable component template"
3. Name the Fragment.
Role: Fragment Updater or Superuser
1. Once the XF is created, an UPDATER can edit and modify the design.
1. Click the "Drag components here" bar, and then click the "+" icon
2. Select "Experience Fragment" from the drop down list.
3. Wait for the page to refresh and then click the "Experience Fragment" bar, and then click the "Wrench" icon.
4. In the pop up window underneath "Variation" click the "Square Check Box" icon.
5. A pop up window linking to the Experience Fragment Section of AEM will appear. Navigate to the variation of the experience you would like to link to the page, and click the "Page Icon" so that the page is highlighted and a small circle with a check appears on the page. Then click the blue "Select" button in the top right corner.
6. Then click the "✓" to close the window
Adding/editing an experience fragment works very similar to how you manage any other page on AEM. If a component is curruently available on an experience fragment you can learn how to edit the specific component in our components guide
When creating an experience fragment you can create multipule variations within one fragment. This allows you to have the same experience fragment on different pages while also displaying slightly different content.
Example:
You want one page to display an address, and a map, but on the next page you want it to display just the address. You can create a variation that will display just the address.
Here's a list of current components available to use in an experience fragment:
- Accordion
- Adobe Sign WebForm
- Animated Bar Chart
- Animated Number Counter
- Button Set
- Content Fragment
- Curated CTA
- Experience Fragment
- Jump Bar Navigation: Bar
- Large Headline
- Pie Chart
- RTE (Rich Text Editor)
- Resource and Download for XFs
- Section Separator
- Section Title
- Standalone Image
- Standalone Video
- Table
- Tabs
- Title