Fragments
A fragment is a reusable component that can be referenced in one or more emails and email templates across Adobe Journey Optimizer B2B Edition. It is usually a block of content (text, image, or both) that can be pre-created and quickly inserted into an email or email template. With this functionality, you can prebuild multiple custom content blocks for use by your marketing team members to assemble email contents for an improved design process. Common use cases include header/footer content blocks for email, event invite banners, and seasonal greetings.
To make the best use of fragments in your workflows:
- Create your own fragments - Create visual fragments, either from scratch or by saving content as a fragment from the visual content editor.
- Reuse fragments - Use them as many times as needed in your content.
Visual fragments
Visual fragments are pre-defined visual blocks built using the visual content editor that you can reuse across multiple emails or email templates. The current scope of Journey Optimizer B2B Edition and this documentation are that of visual fragments only. Expression-based fragments are not yet supported in Journey Optimizer B2B Edition.
Access and manage fragments
To access visual fragments in Adobe Journey Optimizer B2B Edition, go to the left navigation and click Content Management > Fragments. This action opens a listing page with all the fragments created in the instance listed in a table.
The table is sorted by the Modified column, with the most recently updated fragments at the top by default. Click the column title to change between ascending and descending.
Fragment status and lifecycle
The fragment status determines its availability for use in an email or email template, and the changes that you can make to it.
When you create a fragment, it is in draft status. It remains in this status as you define or edit the visual content until you publish it for use in an email or email template. Available actions:
- Edit all details
- Edit in visual designer
- Publish
- Duplicate
- Delete
When you publish a fragment, it becomes available for use in an email or email template. A published fragment content cannot be modified in the visual designer. Available actions:
- Edit description
- Add to an email or template
- Create draft version
- Duplicate
- Delete (if not in-use)
When you create a draft from a published fragment, the published version remains available for use in an email or email template, and the draft content can be modified in the visual designer. If you publish the draft version, it replaces the current published version and the content is updated in the emails and email templates where it is in use. Available actions:
- Edit description
- Add to an email or template
- Edit draft version in visual designer
- Publish draft version
- Duplicate
- Delete (if not in-use)
Filter the fragments list
To search for a fragment by name, enter a text string into the search bar for a match. Click the Filter icon (
Customize the column display
Customize the columns that you want to display in the table by clicking the Customize table icon (
In the dialog, select the columns to display and click Apply.
Create fragments
You can create new visual fragments in Journey Optimizer B2B Edition by clicking Create fragment at the top right.
-
In the Create fragment dialog, enter a useful Name and Description (optional).
Fragment requirements:
-
Name - Maximum of 100 characters, must be unique, case-insensitive
-
Description - Maximum of 300 characters
-
Alpha, numeric, and special characters are allowed
-
Reserved characters are not allowed:
\ / : * ? " < > |
-
-
Click Create.
The visual designer opens with an empty canvas.
-
Use the content design tools to create the visual fragment content:
-
Click Save at any time to save the draft fragment.
-
When you are ready to make the fragment available for use in an email or email template, click Publish.
Add structure and content design-fragment
-
To start your content design, drag an item from the Structures and drop it onto the canvas.
Add as many items from Structures as you need and edit the settings for each in the pane on the right.
note tip TIP Select the n:n column component to define the number of columns of your choice (between three and 10). You can also define the width of each column by moving the arrows below the column. 
Each column size cannot be less than 10% of the total width of the structure component. Only empty columns can be removed.
-
Expand the Contents section and add as many elements as you need into one or more structure components.
-
If needed, you can make additional customizations for each component in the Settings or Style tabs.
For example, you can change the text style, padding, or margin of each component.
-
To add conditional content and adapt the content to the targeted profiles based on conditional rules, select a content component and click the Enable conditional content icon in the component toolbar.
For more informantion, see Conditional content.
Add assets
In the visual content editor, select the Assets icon (
The following example outlines steps to add assets to the template content:
-
To open the assets library, click the Assets icon.
From the asset selector, you can directly select assets stored in the source library.
-
Add a new asset by dragging and dropping the image asset into a structure component.
For more information about using assets from your source type, see Add assets to your content.
-
Replace an existing image asset by selecting it on the canvas and click Select an asset in the image source tools.
Navigate the layers, settings, and styles
As you work with the content in the visual designer, you can access the layers/containers and elements using the Navigation tree. Click the Navigation icon to display the tree to the left of the canvas.
The following example outlines steps to adjust padding and vertical alignment inside a structure component composed of columns.
-
Select the column in the structure component directly in the canvas or using the Navigation tree displayed at the left.
-
From the column toolbar, click the Select a column tool and choose the one that you want to edit.
You can also select it from the structure tree. The editable parameters for that column are displayed in the Settings and Styles tabs on the right.
-
To edit the column properties, click the Styles tab on the right and change them according to your needs:
-
For Background, change the background color as needed.
Clear the check box for a transparent background. Enable the Background image setting to use an image as the background instead of a solid color.
-
For Alignment, select the Top, Middle, or Bottom icon.
-
For Padding, define the padding for all sides.
Select Different padding for each side if you want to fine tune the padding. Click the Lock icon to break synchronization.
-
Exapnd the Advanced section to define inline styles for the column.
-
-
If needed, repeat these steps to adjust the alignment and padding for the other columns in the component.
-
Save your changes.
Personalize content
Journey Optimizer B2B Edition uses an inline simple syntax that allows you to create expressions with personalized content enclosed by double curly braces {}. You can add multiple expressions in the same content or field without restrictions.
Examples:
-
Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}} -
Hello {{profile.person.name.fullName}}
When processing the message (email and SMS), Journey Optimizer B2B Edition replaces the expression with the data contained in the Experience Platform database. So, the first example becomes Hello John Doe.
The following example outlines steps to personalize content using lead/account attributes and system tokens.
-
Select the text component and click the Add personalization icon in the toolbar.
This action opens the Edit Personalization dialog.
-
Click + or … to add a token to the blank space.
-
Click Save.
Edit linked URL tracking
-
Click the Links icon on the left to display all the URLs of your content to be tracked.
-
If needed, click the Edit (pencil) icon and modify the Tracking Type or Label.
You can also add Tags for a link.
View fragment details
Click the name of any fragment in the list page to open the fragment details page. You can choose to edit the fragment, rename the fragment, or update the fragment description. Make updates and click outside of the name or description field to auto-save changes.
Click Edit fragment to open the fragment in the visual content editor.
Exit the view at any time by clicking the Back arrow at the top left, which returns you to the Fragments list page.
View fragment used-by references
Within the fragment details page, click the Used By tab to view details of where the fragment is currently used within Journey Optimizer B2B Edition, across emails, email templates, and fragments.
References are displayed according to category: Email or Email template. Emails in Journey Optimizer B2B Edition are embedded and authored within account journeys, so the parent journey of the email that uses the fragment is displayed in references.
Click the link to open the corresponding email or email template where the fragment is used.
Delete fragments
Any fragment that is currently in use by any email or email template cannot be deleted, so ensure that you check the used-by references before initiating a fragment removal. Also, a removal cannot be undone, so check before initiating a delete action.
You can delete a fragment using either of the following methods:
- From the fragment details on the right, click Delete.
- From the Fragments listing page, click the ellipsis next to the fragment and choose Delete.
This action opens a confirmation dialog. You can abort the process by clicking Cancel, or click Delete to confirm deletion.
If the fragment is currently in use, the action opens an informational dialog that alerts you that it cannot be deleted. Click OK, which aborts the delete action.
Edit fragments
Edits to a fragment depend on its current status:
- When a fragment is in Draft status, you can edit any of its details and the visual content.
- When a fragment is in Published status, you can edit the fragment description, but not the name. You cannot edit the visual content.
- When a fragment is in Published with draft status, editing the details is limited to the description. You can also edit the visual content for the draft version.
-
From the Fragments listing page, click the fragment name to open it.
A preview of the visual content is displayed, with the fragment details on the right.
-
Modify any of the details, such as name and description.
-
To make changes to the content in the visual designer, click Edit fragment.
Use the visual designer tools as needed:
- Add structure and content
- Add Assets
- Navigate the layers, settings, and styles
- Personalize content
- Edit linked URL tracking
Click Save, or Save & close to return to the fragment details.
-
When the fragment meets your criteria and you want to make it available for use in an email or email template, click Publish.
-
From the Fragments listing page, click the fragment name to open it.
A preview of the visual content is displayed, with the fragment details on the right.
-
Modify the description, if needed.
For a published fragment, all other details cannot be changed.
-
If you want to update the content, click Create draft version at the top right.
Click OK in the dialog to open the draft version in the visual designer. You can change the image source if needed.
Use the visual designer tools as needed:
- Add structure and content
- Add Assets
- Navigate the layers, settings, and styles
- Personalize content
- Edit linked URL tracking
Click Save, or Save & close to return to the fragment details.
-
When the draft fragment meets your criteria and you want to make the changes available for use in an email or email template, click Publish.
When you publish the draft version, it replaces the current published version and the content is updated in the emails and email templates where it is already in use.
There are two ways to open the draft version for editing from the Fragments listing page:
-
Click the More icon (…) next to the fragment name and choose Open draft version.
-
Click the fragment name to open it. Then, click Open draft version at the top right.
A preview of the visual content for the draft version is displayed, with the fragment details on the right.
To update the content:
-
Click Edit fragment at the top right. Use the visual designer tools as needed:
- Add structure and content
- Add Assets
- Navigate the layers, settings, and styles
- Personalize content
- Edit linked URL tracking
Click Save, or Save & close to return to the fragment details.
-
When the draft fragment meets your criteria and you want to make the changes available for use in an email or email template, click Publish.
When you publish the draft version, it replaces the current published version and the content is updated in the emails and email templates where it is already in use.
Duplicate fragments
You can duplicate a fragment using either of the following methods:
- From the Fragments listing page, click the More icon (…) next to the fragment name and choose Duplicate.
- At the top right of the fragment details page, click … More and choose Duplicate.
In the dialog, enter a useful name (unique) and description. Click Duplicate to complete the action.
The duplicated (new) fragment then appears in the Fragments listing.
Save a new fragment from email or template content
When you are creating/editing an email or email template in the visual content editor, you can choose to save all or parts of the content as a fragment so that it is available for reuse.
-
When you have some content to be saved as a fragment, click More and choose Save as Fragment.
-
Select the different elements to be included in the fragment.
Select multiple structures by holding the Shift or Control button.
You can only select structures that are adjacent to each other and the interface does not allow you to select non-adjacent elements.
-
With the content selected, click Create at the top right.
-
In the dialog, enter a useful name and description for the fragment. Then click Create.
The new fragment is then displayed in the Fragments listing page and is also available for use within emails and email templates.
Add visual fragments to your email or template content
Fragments are designed for reuse and can be inserted for email and email template authoring. You can add up to 30 fragments in an email or template. Fragments can be nested up to one level only.
-
Navigate to Account Journeys and open an existing journey or create a new journey.
-
Create a Send Email node.
-
Create or edit email content for the node.
-
Drag and drop an item from the Components menu to provide a structure for the fragment.
-
To open the listing of published fragments, click the Fragments icon.
You can:
- Sort the listing.
- Browse, search, and filter the listing.
- Switch between card (thumbnail) and list views.
- Refresh the list to reflect any of the recently created fragments.
-
Drag and drop any of the fragments into the structure component placeholder.
The editor renders the fragment within the section/element of the email structure.
The content of the fragment is dynamically updated within the structure to render a visual of how the content appears in the email.
| note tip |
|---|
| TIP |
| If you want the fragment to occupy the entire horizontal layout within the email, add a 1:1 column structure and then drag and drop the fragment into it. |
After the email is saved, it appears in the fragment details page when the Used By tab is selected. Fragments added to an email are not editable within the email or template – the published source fragment defines the content.
-
From the left navigation, click Content Management > Templates.
-
Create a new template, or open an existing email template and click Edit Email Template.
-
Drag and drop an item from the Components menu to provide a structure for the fragment.
-
To open the fragments listing, click the Fragments icon.
You can:
- Sort the listing.
- Browse, search, and filter the listing.
- Switch between card (thumbnail) and list views.
- Refresh the list to reflect any of the recently created fragments.
-
Drag and drop any of the fragments into the structure component placeholder.
The editor renders the fragment within the section/element of the email template structure.
-
Drag and drop any of the fragments into the structure component placeholder.
The editor renders the fragment within the section/element of the email template structure.
| note tip |
|---|
| TIP |
| If you want the fragment to occupy the entire horizontal layout within the email template, add a 1:1 column structure and then drag and drop the fragment into it. |
After the email template is saved, it appears in the fragment details page when the Used By tab is selected. Fragments added to an email template are not editable within the template – the published source fragment defines the content.
Fragment actions during email and template authoring
When a fragment is added to an email or email template, the fragment content cannot be edited within the email or template. However, you can apply the following actions:
- Delete - This action removes the fragment from the current email or email template content (the fragment source is unaffected).
- Refresh - This action refreshes the content of the fragment in the current email or email template. Refreshing is useful when you want to reflect any recent edits to the fragment after the addition to the email or email template.
- Duplicate - This action duplicates the fragment within the same email or email template within the editor, with the same dimensions and added just below it.
- Open Fragment - This action opens a new browser tab with the fragment editor page and details.
- Break inheritance - This action breaks the inheritance of the fragment (and its changes) from the source. Use this action to make the fragment content available as independent and editable content within the email or email template. This action also removes the email or email template from the Used By reference for the original fragment.
When you select the fragment on the editor page, these actions are available from the context toolbar and the properties panel on the right.
