Nesta página: Saiba como adicionar o seletor de CSS e as modificações do cabeçalho da página às suas páginas da Web com o editor não visual do Adobe Journey Optimizer, sem instalar uma extensão de navegador ou carregar o designer da Web.
Além do Journey Optimizer visual web designer, você também pode adicionar modificações às suas páginas da Web usando um editor não visual.
Isso pode ser útil se você não puder, ou não tiver permissão, instalar extensões de navegador, como o Adobe Experience Cloud Visual Helper, que é necessário para carregar suas páginas no web designer.
Em certos casos, também é possível usar um editor não visual para aplicar modificações em um seletor de CSS específico, sem o risco de modificar outros elementos em uma página da Web ou alterar a estrutura da página.
Para criar suas experiências da Web com o editor não visual, siga as etapas abaixo.
-
Na tela Editar conteúdo da jornada ou campanha, desmarque a opção Editor visual.
-
Clique em Adicionar uma modificação para começar a editar o conteúdo da Web.
-
O editor não visual é exibido. É possível adicionar a primeira modificação usando o painel esquerdo.
-
Na lista suspensa, selecione o tipo de modificação.
Dois tipos estão disponíveis. Eles vêm com opções diferentes. Consulte os links abaixo para obter mais detalhes:
- Seletor de CSS - Saiba mais
- Página
<head>- Saiba mais
-
Clique no botão Adicionar personalização. O editor de personalização é aberto.
Você pode aproveitar o editor de personalização do Journey Optimizer com todos os seus recursos de personalização e criação. Saiba mais
-
Insira seu conteúdo e Salve suas alterações.
-
Sua primeira modificação é exibida na parte superior do painel Modificações.
Clique no botão Mais ações ao lado da sua modificação e selecione Informações para exibir seus detalhes. Você também pode Excluir a modificação, se necessário.
note NOTE O painel Modificações é igual ao usado com o web designer. Todas as ações que você pode executar com ele estão detalhadas em esta seção. -
Clique no botão Adicionar na parte superior do painel Modificações para adicionar outra modificação e repita as etapas acima.
-
Além disso, você pode selecionar qualquer elemento do site e rastrear os cliques nesse elemento. Para ativar o rastreamento de cliques e definir as ações a serem rastreadas, clique no segundo ícone no painel à esquerda, conforme mostrado abaixo:
Use o botão Adicionar Componente para selecionar uma nova ação a ser monitorada. Saiba mais sobre o uso do rastreamento de cliques em esta seção.
-
Clique na seta na parte superior esquerda da tela para navegar de volta para a tela de edição de jornada ou campanha. Você pode ver o número atual de alterações e adicionar mais modificações.
Você também pode alternar para o web designer, se desejar. Todas as modificações serão preservadas.
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.