ÃÛ¶¹ÊÓƵ

Fragments

A fragment is a reusable component that can be referenced in one or more emails and email templates across ÃÛ¶¹ÊÓƵ 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 ÃÛ¶¹ÊÓƵ 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.

Access the fragments library {width="700" modal="regular"}

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.

Status
Description
Draft

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
Published

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)
Published with draft

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)

Fragment status lifecycle {width="800" modal="regular"}

IMPORTANT
Fragment status was introduced in the Journey Optimizer B2B Edition August release. All fragments created before this release have the Draft status, even if they are used in an email or template. If you make any change to these fragments, you must publish the fragment to propagate the changes.

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 ( Show or hide filters icon ) to show the available filter options and change the settings to filter the displayed items according to your specified criteria.

Filter the displayed fragments {width="700" modal="regular"}

Customize the column display

Customize the columns that you want to display in the table by clicking the Customize table icon ( Customize table icon ) at the top right.

In the dialog, select the columns to display and click Apply.

Select the columns that you want to display {width="300"}

Create fragments

You can create new visual fragments in Journey Optimizer B2B Edition by clicking Create fragment at the top right.

  1. 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: \ / : * ? " < > |

    Create fragment dialog {width="400"}

  2. Click Create.

    The visual designer opens with an empty canvas.

  3. Use the content design tools to create the visual fragment content:

  4. Click Save at any time to save the draft fragment.

  5. 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

  1. 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.

    Drag a structure onto the canvas and adjust the settings {width="800" modal="regular"}

    Each column size cannot be less than 10% of the total width of the structure component. Only empty columns can be removed.

  2. Expand the Contents section and add as many elements as you need into one or more structure components.

    Drag a content element onto the canvas and adjust the settings {width="800" modal="regular"}

  3. 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.

  4. 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 ( Show Assets ) that is displayed on the left.

NOTE
If you have a subscription for Experience Manager Assets as a Cloud Service along with the default ÃÛ¶¹ÊÓƵ Marketo Engage Design Studio, you choose the image source at the time of creation for an email, email template, or visual fragment. You can also select the image source before you open the visual designer for editing.

The following example outlines steps to add assets to the template content:

  1. To open the assets library, click the Assets icon.

    From the asset selector, you can directly select assets stored in the source library.

  2. Add a new asset by dragging and dropping the image asset into a structure component.

    Drag a Marketo Engage asset onto the canvas and adjust the settings {width="800" modal="regular"}

    For more information about using assets from your source type, see Add assets to your content.

  3. Replace an existing image asset by selecting it on the canvas and click Select an asset in the image source tools.

    Select an asset from the source library {width="600" modal="regular"}

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.

Access the content layers {width="800" modal="regular"}

The following example outlines steps to adjust padding and vertical alignment inside a structure component composed of columns.

  1. Select the column in the structure component directly in the canvas or using the Navigation tree displayed at the left.

  2. 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.

    Column components displayed in the visual designer {width="800" modal="regular"}

  3. 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.

    Change the styles for the selected column {width="700" modal="regular"}

  4. If needed, repeat these steps to adjust the alignment and padding for the other columns in the component.

  5. 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.

  1. Select the text component and click the Add personalization icon in the toolbar.

    Click the Personalize icon {width="600"}

    This action opens the Edit Personalization dialog.

  2. Click + or … to add a token to the blank space.

    Construct personalized text using tokens {width="700" modal="regular"}

  3. Click Save.

Edit linked URL tracking

  1. Click the Links icon on the left to display all the URLs of your content to be tracked.

  2. If needed, click the Edit (pencil) icon and modify the Tracking Type or Label.

    You can also add Tags for a link.

Click More to access template actions {width="500"}

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.

NOTE
If a published fragment is in use by an email or email template, you cannot change the name or edit the content. You can create a draft version if you want to make changes to the fragment.

View details for a published fragment {width="600" modal="regular"}

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.

IMPORTANT
Any fragment that is currently in use by any email or email template cannot be deleted.

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.

Used by references for the fragment {width="600" modal="regular"}

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.

Delete fragment dialog {width="400"}

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.

Delete fragment dialog - cannot delete in-use fragment {width="400"}

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.
Draft
  1. 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.

  2. Modify any of the details, such as name and description.

    Details for frament with Draft status {width="600" modal="regular"}

  3. To make changes to the content in the visual designer, click Edit fragment.

    Use the visual designer tools as needed:

    Click Save, or Save & close to return to the fragment details.

  4. When the fragment meets your criteria and you want to make it available for use in an email or email template, click Publish.

Published
  1. 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.

  2. Modify the description, if needed.

    For a published fragment, all other details cannot be changed.

  3. 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.

    Create draft version dialog {width="300"}

    Use the visual designer tools as needed:

    Click Save, or Save & close to return to the fragment details.

  4. 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.

Published with draft

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.

    Open draft version {width="300"}

  • 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:

  1. Click Edit fragment at the top right. Use the visual designer tools as needed:

    Click Save, or Save & close to return to the fragment details.

  2. 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.

Duplicate the fragment {width="600" modal="regular"}

In the dialog, enter a useful name (unique) and description. Click Duplicate to complete the action.

Enter a name and description for the duplicated fragment {width="400"}

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.

  1. When you have some content to be saved as a fragment, click More and choose Save as Fragment.

  2. 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.

  3. With the content selected, click Create at the top right.

  4. 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.

Add fragments to an email
  1. Navigate to Account Journeys and open an existing journey or create a new journey.

  2. Create a Send Email node.

  3. Create or edit email content for the node.

  4. Drag and drop an item from the Components menu to provide a structure for the fragment.

  5. 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.

    Search for a fragment in the visual designer {width="600"}

  6. 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.

Add fragments to an email template
  1. From the left navigation, click Content Management > Templates.

  2. Create a new template, or open an existing email template and click Edit Email Template.

  3. Drag and drop an item from the Components menu to provide a structure for the fragment.

  4. 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.

    Search for a fragment in the visual designer {width="600"}

  5. 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.

  6. 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.

Apply actions to the selected fragment {width="600" modal="regular"}

recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0