On this page: Learn how to add CSS selector and page head modifications to your web pages with the Adobe Journey Optimizer non-visual editor, without installing a browser extension or loading the web designer.
In addition to the Journey Optimizer visual web designer, you can also add modifications to your web pages using a non-visual editor.
This can be useful if you cannot, or are not allowed to, install browser extensions such as the Adobe Experience Cloud Visual Helper, which is required to load your pages in the web designer.
In certain cases, you may also find it easier to use a non-visual editor to apply modifications on a particular CSS selector, without the risk to modify other elements on a web page or to change the page structure.
To author your web experiences with the non-visual editor, follow the steps below.
-
From the Edit content screen in the journey or campaign, unselect the Visual editor option.
-
Click Add a modification to start editing your web content.
-
The non-visual editor displays. You can add your first modification using the left pane.
-
In the drop-down list, select the modification type.
Two types are available. They come with different options. See the links below for more details:
- CSS Selector - Learn more
- Page
<head>- Learn more
-
Click the Add personalization button. The personalization editor opens.
You can leverage the Journey Optimizer personalization editor with all its personalization and authoring capabilities. Learn more
-
Enter your content and Save your changes.
-
Your first modification displays on top of the Modifications pane.
Click the More actions button next to your modification and select Info to display its details. You can also Delete the modification if needed.
note NOTE The Modifications pane is the same as when using the web designer. All the actions you can perform with it are detailed in this section. -
Click the Add button on top of the Modifications pane to add another modification, and repeat the steps above.
-
In addition, you can select any element of your website and track the clicks on that element. To enable click tracking, and define the actions to track, click the second icon on the left rail, as shown below:
Use the Add Component button to select a new action to track. Learn more about click tracking usage in this section.
-
Click the arrow on top left of the screen to browse back to the journey or campaign edition screen. You can see the current number of changes and add more modifications.
You can also switch to the web designer if desired. All your modifications will be preserved.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to add CSS selector and page head modifications to web pages using the Journey Optimizer non-visual editor, without installing a browser extension or loading the web designer.
Intents:
- Edit web content without installing a browser extension or loading the web designer
- Switch off the Visual editor option to open the non-visual editor
- Add a CSS Selector or Page head modification
- Apply personalization to a modification through the personalization editor
- Enable click tracking on a selected element
- Switch back to the web designer while preserving modifications
Glossary:
- Non-visual editor: An editor that adds CSS selector and page head modifications to web pages without installing a browser extension or loading the web designer (product-specific)
- CSS Selector: A modification type that applies changes on a particular CSS selector (product-specific)
- Page
<head>: A modification type that applies changes to the page head (product-specific) - Modifications pane: The pane listing added modifications, the same one used in the web designer (product-specific)
- Click tracking: Selecting any element of the website to track the clicks on it, enabled from the left rail (product-specific)
Guardrails:
- To open the non-visual editor, unselect the Visual editor option on the Edit content screen in the journey or campaign.
- Two modification types are available: CSS Selector and Page head.
- The non-visual editor can be used when you cannot, or are not allowed to, install browser extensions such as the Adobe Experience Cloud Visual Helper required to load pages in the web designer.
- Switching to the web designer preserves all your modifications.
Terminology:
- Canonical name: non-visual editor — Acronym: n/a — variants: web non-visual editor
- Synonyms: “web designer” = “visual editor”
- Do not confuse: “non-visual editor” (no browser extension or web designer required) ≠ “web designer” (visual editor requiring the browser extension)
- Do not confuse: “CSS Selector” (modification on a CSS selector) ≠ “Page head” (modification to the page head)
FAQ:
- Q: How do I open the non-visual editor? — From the Edit content screen in the journey or campaign, unselect the Visual editor option, then click Add a modification.
- Q: What modification types can I add? — CSS Selector and Page head.
- Q: Do I need a browser extension to use the non-visual editor? — No, it lets you edit content without installing a browser extension or loading the web designer.
- Q: Can I track clicks on an element? — Yes, select any element of your website and enable click tracking from the second icon on the left rail, using Add Component to select an action to track.
- Q: Will my modifications be kept if I switch to the web designer? — Yes, all your modifications will be preserved.