Magnolia 6.0 reached end of life on June 26, 2019. This branch is no longer supported, see End-of-life policy.
This page describes component personalization. A component is the smallest block of content that editors can edit, delete and move as a single unit on the page. You can personalize the content of a component to meet the visitor's needs and preferences. Component personalization works the same way as page personalization except that you are personalizing a smaller item.
Component personalization is available only in Enterprise Edition Pro.
If you want personalize a page and its components at the same time you must enable this feature first. Nested variants are disabled by default because managing both types of personalized content can be overwhelming for editors.
Set /modules/personalization-components/config/allowNestedVariants
to true
.
Node name | Value |
---|---|
modules | |
personalization-components | |
config | |
allowNestedVariants | true |
Select a component and click the Add component variant action.
The variant icon and the default label variant-0 are displayed in the component bar:
The original component content is renamed to "Original". Click the variant-0 label to view and access the list of variants and the original from the pop-up menu that appears. If not associated with any target audience, the newly added variant of the component is named automatically by Magnolia ("variant-0"). Once the target audience is defined and associated with the variant, the name of the audience is displayed in place of the automatically generated name. This version of the component will be displayed to page visitors if no audience trait can be matched with the personalization properties assigned to the other variant(s) of the component.
Adding a variant to a component will affect its publishing status as well as the publishing status of its parent area and parent page: all of these are changed to "modified" (yellow) because creating a variant is considered an edit action on the component.
When a page has content variants for some of its components, the variants icon appears in the top bar of the page in the Edit and Preview views and next to the name of the page in the page tree view.
Select the Choose audience option in the Action bar to choose the target audience for a component variant. Selecting a component variant is a prerequisite to choosing an audience for the variant.
The "Original" content of a component can be marked as "ORIGINAL – HIDDEN". When marked as hidden, the content associated with the "ORIGINAL" will only be visible in the page Edit view.
Why hide the original? Hiding the original can be useful in a scenario in which the content is exclusive, targeting a particular audience. If no variants match, the original (fallback) content will be hidden. To hide/show the content of a component, select the Hide/Show original option in the Action bar.
You can serve different content to different audiences by changing the template used in a personalized component. This enables you to serve text to one audience, an image to another audience, video to a third audience and so on. To change the template of a component variant, select the variant you want to change in the component bar and click Change template in the Action bar. A dialog opens where you can choose the template you want to apply to the component variant.
There are three ways to delete a variant:
After the deletion of the component, the publishing status of the parent area and the parent page change to modified (yellow) because deleting a component is considered an edit action on the page.
Set the personalizable
property to false
in the component template to disable personalization. This disables the Add component variant action. You may disable personalization in components that must display the exact same content such as legal boilerplate text to all visitors. All components can be personalized by default.
renderType: freemarker templateScript: /my-module/components/html.ftl dialog: my-module:components/html deletable: false writable: false moveable: false personalizable: false
Node name | Value |
---|---|
html | |
deletable | false |
writable | false |
moveable | false |
personalizable | false |
dialog | my-module:components/html |
renderType | freemarker |
templateScript | /my-module/components/html.ftl |
Define which roles are allowed personalize components. Name the roles in your area definition.
areas: myArea: availableComponents: myComponent: id: my-module:components/myComponent permissions: write: roles: [editors, superuser] move: roles: [senior-editor, superuser] delete: roles: [editors, superuser] personalize: roles: [senior-editor, superuser]