Criação de mensagens de email
Depois de adicionar um ativo de email a um nó de ação de jornada, você pode definir o conteúdo da mensagem de email.
Clique em Editar conteúdo do email na guia Detalhes no painel direito.
Essa ação inicia as ferramentas de design de email, onde você pode escolher como deseja criar seu email a partir das seguintes opções:
-
Crie o email do zero usando a interface Designer de email.
-
Importe conteúdo existente do HTML de um arquivo ou de uma pasta .zip.
-
Selecione um modelo existente em uma lista de modelos de email predefinidos ou personalizados.
Após criar e personalizar o conteúdo do email, você pode exportar o conteúdo para validação ou para uso posterior. Clique em Exportar HTML para salvar o conteúdo como um arquivo .zip que inclui seu HTML e seus ativos.
Criar email do zero design-from-scratch
Use o espaço de design de conteúdo visual para definir a estrutura e o conteúdo do email. Ao adicionar e mover componentes estruturais com ações simples de arrastar e soltar, você pode criar a forma do conteúdo de email reutilizável em segundos.
-
Na página inicial Criar seu modelo, selecione a opção Criar do zero.
-
Na caixa de diálogo Criar email, escolha o tipo de conteúdo de email que deseja criar.
-
Usar Temas - Escolha esta opção para criar o email no Modo de Tema. Nesse modo, é possível usar um tema de marca definido para simplificar o processo de criação de conteúdo e garantir que o design se alinhe aos padrões definidos.
-
Estilo Manual - Escolha esta opção para criar o email no Modo manual. Nesse modo, você define manualmente o estilo de todos os componentes de estrutura e conteúdo adicionados à tela em branco.
-
-
Adicionar estrutura e conteúdo ao modelo.
Quando estiver satisfeito com o conteúdo, clique em Salvar.
Importar conteúdo existente do HTML
O conteúdo importado pode ser:
-
Um arquivo HTML com uma folha de estilos incorporada
-
Um arquivo .zip que inclui um arquivo HTML, a folha de estilos (.css) e imagens
note note NOTE Não há restrições na estrutura do arquivo .zip. No entanto, as referências devem ser relativas e se encaixar na estrutura de árvore da pasta .zip. As imagens são sempre carregadas no repositório de ativos do Marketo Engage conectado. Caso queira gerenciar os arquivos de imagem no Experience Manager Assets, faça upload deles separadamente na interface do aplicativo e altere os links de imagem no designer de email.
Para importar um arquivo com conteúdo HTML:
-
Na página inicial Criar seu modelo, selecione a opção Importar HTML.
-
Arraste e solte o arquivo HTML ou .zip que contém o conteúdo HTML e clique em Importar.
<table> como a primeira camada em um arquivo do HTML pode causar perda de estilo, incluindo configurações de plano de fundo e largura na marca de camada superior.Você pode personalizar o conteúdo importado conforme necessário com as ferramentas do editor visual de email.
Selecione um modelo
Você pode escolher entre:
-
Modelos de exemplo. A interface do Journey Optimizer oferece 20 modelos de email prontos para uso que você pode escolher.
-
Modelos salvos. Use um modelo personalizado salvo que você criou do zero usando o menu Modelos ou salvou de um email em uma jornada usando a opção Salvar como modelo de conteúdo.
Use a seção Selecionar modelo de design para começar a criar o conteúdo a partir de um modelo. Você pode usar um modelo de amostra ou um modelo de email personalizado salvo da instância do Journey Optimizer B2B Edition.
Na página inicial Criar seu modelo, a guia Modelos de amostra é selecionada por padrão. Para usar um modelo personalizado, selecione a guia Modelos salvos.
A lista de todos os modelos de email criados na sandbox atual é exibida. Você pode classificá-los por Nome, Última modificação e Última criação.
Selecione o template desejado na lista.
Após a seleção, é exibida uma pré-visualização do modelo. No modo de visualização, você pode navegar entre todos os modelos de uma categoria (amostra ou salva, dependendo da seleção) usando as setas para a direita e para a esquerda.
Quando a exibição corresponder ao que você deseja usar, clique em Usar este modelo na parte superior direita da janela de visualização.
Essa ação copia o conteúdo no designer de conteúdo visual, onde você pode editar o conteúdo conforme necessário.
O Adobe Journey Optimizer B2B Edition oferece uma seleção de modelos de email oferecidos prontos para uso, que podem ser usados para criar emails e modelos de email.
Adicionar estrutura e conteúdo structure-content
-
Para iniciar o design do conteúdo, arraste um item das Estruturas e solte-o na tela.
Adicione quantos itens de Estruturas forem necessários e edite as configurações para cada um no painel à direita.
note tip TIP Selecione o componente n:n coluna para definir o número de colunas de sua escolha (entre três e 10). Você também pode definir a largura de cada coluna movendo as setas abaixo dela. 
Cada tamanho de coluna não pode ser menor que 10% da largura total do componente de estrutura. Somente colunas vazias podem ser removidas.
-
Expanda a seção Conteúdo e adicione quantos componentes de conteúdo forem necessários em um ou mais componentes de estrutura.
-
Se necessário, você pode fazer personalizações adicionais para cada componente nas guias Configurações ou Estilo.
Por exemplo, é possível alterar o estilo do texto, o preenchimento ou a margem de cada componente.
-
Para adicionar conteúdo condicional e adaptar o conteúdo aos perfis direcionados com base em regras condicionais, selecione um componente de conteúdo e clique no ícone Habilitar conteúdo condicional na barra de ferramentas do componente.
Para obter mais informações, consulte Conteúdo condicional.
Adicionar CSS personalizado
Você pode adicionar seu próprio CSS personalizado diretamente no espaço de design de email. Use o CSS personalizado para aplicar um estilo avançado e específico, proporcionando maior flexibilidade e controle sobre a aparência do seu conteúdo. É uma prática recomendada adicionar esse estilo de mais alto nível antes de incluir componentes de conteúdo, como imagens, botões e texto.
Com pelo menos um componente de conteúdo na tela, selecione o componente Corpo na árvore de navegação esquerda para acessar o editor de CSS personalizado.
-
Na guia Estilos exibida à direita, clique em Adicionar CSS personalizado.
note note NOTE O botão Adicionar CSS personalizado está disponível somente quando o componente Corpo é selecionado. No entanto, você pode aplicar estilos CSS personalizados a todos os componentes dentro dele. O editor pop-up Adicionar CSS personalizado é exibido com comentários de código de espaço reservado.
-
Insira seu código CSS no editor.
Verifique se o CSS personalizado é válido e segue a sintaxe apropriada. Se o CSS inserido for inválido, uma mensagem de erro será exibida e o CSS não poderá ser salvo. Para saber mais, consulte validade de CSS.
-
Clique em Salvar para salvar o CSS personalizado.
A folha de estilos personalizada é aplicada ao conteúdo existente. Você pode verificar se o CSS personalizado é aplicado de acordo com suas necessidades. Para obter informações sobre como fazer alterações e ajustar o aplicativo da folha de estilos, consulte Solução de problemas.
Adicionar fragmentos
Um fragmento visual é um componente de design reutilizável que pode ser referenciado por vários ativos de conteúdo no Adobe Journey Optimizer B2B edition. Geralmente, é um bloco de conteúdo que pode ser pré-criado e inserido rapidamente para tornar a criação mais rápida e consistente.
O exemplo a seguir descreve as etapas para adicionar fragmentos à medida que você cria seu conteúdo.
-
Para abrir a lista de fragmentos, selecione o ícone Fragmentos (
É possível:
- Classifique a listagem.
- Procurar, pesquisar ou filtrar a listagem.
- Alternar entre as visualizações em miniatura e em lista.
- Atualize a lista para refletir qualquer um dos fragmentos criados recentemente.
-
Arraste e solte qualquer um dos fragmentos no componente estrutural.
O editor renderiza o fragmento na seção/elemento da estrutura de email.
note tip TIP Para adicionar o fragmento de forma que ele ocupe o layout horizontal inteiro no email, adicione uma estrutura de coluna 1:1 e arraste e solte o fragmento nele. O conteúdo do fragmento é atualizado dinamicamente na estrutura para mostrar como o conteúdo aparece no conteúdo.
Campos editáveis em fragmentos personalizáveis
Um fragmento visual pode incluir campos editáveis que você pode personalizar. Campos personalizados permitem modificar parâmetros ao incorporar o fragmento ao conteúdo e criar uma experiência personalizada sem afetar o fragmento original. O autor do fragmento pode criar o fragmento para personalização de componentes de texto, imagem e botão. Se um fragmento incluído contiver componentes com campos editáveis, você poderá alterar os valores padrão para personalizá-lo para o seu conteúdo.
-
Selecione o componente de fragmento.
As Configurações exibidas à direita incluem e editam campos com os valores padrão.
-
Altere qualquer campo editável, conforme necessário.
Depois que o email for salvo, ele aparecerá na página de detalhes do fragmento ao selecionar a guia Usado por no resumo.
Adicionar ativos de imagem
No editor de conteúdo visual, selecione o ícone do Marketo Engage Assets (
-
Adicione um novo ativo arrastando e soltando o ativo de imagem em um componente de estrutura.
-
Substitua um ativo de imagem existente selecionando-o na tela e clique em Selecionar um ativo nas ferramentas de origem de imagem.
Para obter mais informações sobre o uso de ativos do seu tipo de origem, consulte Usar ativos para criação de conteúdo.
Navegar pelas camadas, configurações e estilos
Conforme você trabalha com o conteúdo no espaço de design visual, pode acessar os componentes, as colunas e os elementos de conteúdo usando a árvore de navegação. Clique no ícone da Árvore de navegação (
O exemplo a seguir descreve as etapas para ajustar o preenchimento e o alinhamento vertical dentro de um componente de estrutura com colunas.
-
Selecione a coluna no componente de estrutura diretamente na tela ou usando a Árvore de navegação exibida à esquerda.
-
Na barra de ferramentas da coluna, clique na ferramenta Selecionar uma coluna e escolha a que deseja editar.
Também é possível selecioná-la na árvore de estrutura. Os parâmetros editáveis para essa coluna são exibidos nas guias Configurações e Estilos à direita.
-
Para editar as propriedades da coluna, clique na guia Estilos à direita e altere-os de acordo com suas necessidades:
-
Para Plano de fundo, altere a cor do plano de fundo conforme necessário.
Desmarque a caixa de seleção para um plano de fundo transparente. Habilite a configuração Imagem de plano de fundo para usar uma imagem como plano de fundo em vez de uma cor sólida.
-
Para o Alinhamento, selecione o ícone Superior, Meio ou Inferior.
-
Para Preenchimento, defina o preenchimento para todos os lados.
Selecione Preenchimento diferente para cada lado se desejar ajustar o preenchimento. Clique no ícone Bloquear para interromper a sincronização.
-
Expanda a seção Avançado para definir estilos embutidos para a coluna.
-
-
Se necessário, repita essas etapas para ajustar o alinhamento e o preenchimento das outras colunas no componente.
-
Salve as alterações.
Personalizar conteúdo
O Journey Optimizer B2B edition usa uma sintaxe simples em linha que permite criar expressões com conteúdo personalizado delimitado por chaves {}. É possível adicionar várias expressões no mesmo conteúdo ou campo sem restrições.
Exemplos:
Hello {{lead.firstName}} {{lead.lastName}}Hello {%= lead.mktoName ?: "Marketer" %}
Ao processar o conteúdo, o Journey Optimizer B2B edition substitui a expressão pelos dados contidos no banco de dados do Experience Platform. Assim, o primeiro exemplo torna-se Olá, John Doe.
O exemplo a seguir descreve as etapas para personalizar o conteúdo usando atributos de lead/conta e tokens de sistema.
-
Selecione o componente de texto e clique no ícone Adicionar personalização na barra de ferramentas.
Esta ação abre a caixa de diálogo Editar Personalization.
-
Adicione um token clicando no sinal de adição ( + ) ao lado dele.
Se quiser adicionar o token com um fallback (texto padrão que aparece quando esse campo não está disponível para um cliente potencial), clique no ícone Mais ( … ) e escolha Inserir com texto de fallback.
-
Adicione tokens adicionais ou outro texto estático que deseje incluir.
-
Clique em Salvar.
O script de personalização é exibido no espaço de design visual. Você pode selecioná-la para fazer alterações quando necessário.
Editar rastreamento de URL vinculado
-
Clique no ícone Links (
-
Se necessário, clique no ícone Editar (
Você também pode adicionar Marcas para um link.
Aplicar estilo de modo escuro
Use o Modo escuro para analisar a exibição de emails para ver se há um tema escuro em um cliente de email. Um modo ou tema escuro permite que um cliente ou aplicativo de email de suporte exiba emails com planos de fundo mais escuros e cores mais claras para texto, botões e outros elementos visuais. Na parte superior direita da tela de design, altere o seletor para Modo escuro (
Para obter mais informações sobre o estilo e as práticas recomendadas do modo escuro, consulte Modo escuro para conteúdo de email.
Exibir opções
Aproveite as opções de exibição e validação de conteúdo disponíveis no editor visual de email.
-
Aumentar/diminuir o zoom do conteúdo nas opções de zoom predefinidas.
-
Alternar a exibição do conteúdo na área de trabalho, dispositivo móvel ou somente texto/texto sem formatação.
- Clique no ícone Exibir para visualizar o conteúdo entre dispositivos.
- Selecione um dos dispositivos prontos para uso ou insira dimensões personalizadas para visualizar o conteúdo.
Mais opções
No menu Mais…, na parte superior do espaço de design visual, você pode realizar as seguintes ações:
- Redefinir email - Clique nesta opção para limpar a tela de design de email em branco e reiniciar a criação do conteúdo.
- Salvar como fragmento - Salve todo o email ou partes dele como um fragmento a ser reutilizado em vários emails ou modelos de email. Forneça um nome e uma descrição para o fragmento e salve-o na lista de fragmentos disponíveis.
- Alterar seu design - Retorne à página Criar seu email. A partir daí, você pode escolher outro modelo para reiniciar o processo de design. Você também pode optar por criar o conteúdo do zero com uma tela em branco (Modo clássico) ou usar um Tema da marca (Modo do tema).
- Salvar como modelo de conteúdo - Salve o corpo do email como um modelo de email a ser reutilizado em vários emails ou modelos de email. Forneça um nome e uma descrição para o modelo e salve-o na lista de modelos de email salvos.
- Exportar HTML - Baixe o conteúdo na tela visual para o sistema local no formato HTML empacotado como um arquivo zip.
Verificar e testar o email email-testing
Quando o conteúdo da mensagem é definido, você pode usar perfis de teste para visualizá-la, enviar provas e revisar a renderização nas taxas de proporção do desktop e dos dispositivos móveis. Se você inseriu conteúdo personalizado, é possível visualizar como esse conteúdo é exibido na mensagem usando os dados do perfil de teste.
Para visualizar o conteúdo do email, clique em Simular conteúdo e selecione um perfil de teste para verificar sua mensagem usando os dados do perfil da pessoa.
É possível acessar ferramentas adicionais para validar e revisar o conteúdo do email: