Documentation Journey Optimizer Journey Optimizer Guide

Manage web modifications

Last update: October 29, 2024

Topics:
Web Channel

CREATED FOR:

Beginner
Intermediate
User

You can easily manage all the components, adjustments and styles you added to your web page. You can also add modifications directly from the dedicated pane.

Work with the Modifications pane

Select the Modifications icon to display the corresponding pane on the left.
You can review each of the changes you made to the page.
Select an unwanted modification and click the Delete modification option from the More actions button to remove it.

CAUTION
Proceed with care when deleting an action as it may impact subsequent actions.
If you are authoring a single-page application, you can apply any modification to other views. Learn more
To delete multiple modifications at the same time, click the Select button on top of the Modifications pane, check the modifications of your choice and click the Delete icon.
Use the More actions button on top of the Modifications pane to delete all modifications at once.
You can also delete only the invalid modifications, meaning the changes that were overriden by other changes. For example, if you modify the color of a text and then you delete that text, the color modification becomes invalid as the text does not exist anymore.
You can cancel and redo actions using the Undo/Redo button on top right of the screen.

Click and hold the button to switch between the Undo and Redo options. Then click the button itself to apply the desired action.

Add modifications from the dedicated pane

When editing a page using the web designer, you can add new changes to your content directly from the Modifications pane - without the need to select a component and edit it from the web designer interface. Follow the steps below.

From the Modifications pane, click the More actions button.
Select Add a modification.
Select the modification type:
- CSS Selector - Learn more
- Page <Head> - Learn more
Enter your content and Save your changes.
Click the More actions button next to your modification and select Info to display its details.

CSS selector

To add a CSS Selector type modification, follow the steps below.

Select CSS Selector as the modification type.
The CSS Element Selector field helps you find and select the HTML elements (or nodes in the DOM tree) you want to apply changes on.
Select an action type (Set Content or Set Attribute) and fill in the required information/content.
- Set Content: specify the content that goes into the element identified by the CSS Element Selector field.
- Set Attribute: specify an attribute to be associated with the current CSS selector so that this selector can then be identified also by this attribute. To do so, enter a name in the Attribute name field and a value in the Content field. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

Page `<head>`

You can add custom code using the Page <head> modification type.

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. In this case, code does not wait for body or page-load events - it is executed at the beginning of the page load.

The <head> element is commonly used to add JavaScript or CSS code to the top of the page. Selectors for subsequent visual actions depend on the HTML elements added in this tab.

To add a Page <head> type modification, follow the steps below.

Select Page <head> as the modification type.
Add your custom code in the Content box.

CAUTION
You can only add <script> and <style> elements to the <head> section. Adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
Click the Advanced editing options button. The personalization editor opens.

You can leverage the Journey Optimizer personalization editor with all its personalization and authoring capabilities. Learn more

Custom code examples

You can use the Page <head> modification type to:

Use JavaScript inline or link to an external JavaScript file.

For example, to change an element’s color:
<script type="text/javascript"> document.getElementById("element_id").style.color = "blue"; </script>
Configure a style inline or link to an external stylesheet.

For example, to define a class for an overlay element:
<style> .overlay { position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; } </style>

Custom code best practices

Always wrap the custom code in one element.

For example:

<script>
// Code goes here
</script>

In the case that any modifications are needed, make changes inside this container.

If you do not need the custom code anymore, just leave this container empty, but do not remove it. This ensures other experience modifications are not affected.

Do not perform document.write actions in custom code scripts.

Scripts are executed asynchronously. This often causes document.write actions to appear in the wrong place on your page. Using document.write in scripts created in custom code is not recommended.

If you create an element and then modify it, do not delete the original element.

Each change creates a new element in the Modifications panel. Because the second action modifies Element 1, if you delete Element 1, that action no longer has anything to modify, so the change no longer works.

Be careful when using the Page <head> modification type for two campaigns impacting the same URL.

If you use the Page <head> modification type for two campaigns impacting the same URL, the JavaScript is injected into the page from both campaigns. Journey Optimizer automatically determines the order of the delivered content. Make sure the code does not depend on placement. It is up to you to make sure there are no conflicts in the code.

recommendation-more-help