Práticas recomendadas e limitações do Visual Experience Composer

Para habilitar o Enhanced Experience Composer no nível da conta, clique em Administration > Visual Experience Composer e alterne a opção Enable Enhanced Experience Composer para a posição Ligado.

Para habilitar Enhanced Experience Composer no nível de atividade ao criar uma atividade no Visual Experience Composer, clique em Configure > Page Delivery e alterne o switch Enable Enhanced Experience Composer para a posição Ligado.

Problemas ao carregar o Enhanced Experience Composer podem ser resolvidos através do incluir na lista de permissões dos seguintes endereços IP. Esses endereços IP são para Adobe servidores usados para o proxy Enhanced Experience Composer. Eles são necessários somente para a atividade de edição. Incluir na lista de permissões Os visitantes do seu site não precisam desses endereços IP resolvidos.

Para obter mais informações, consulte O EEC não carregará uma URL de controle de qualidade interna que não esteja acessível no IP público em Solução de problemas relacionados ao Enhanced Experience Composer.

Qualquer item imediatamente dentro do elemento body deve ter uma ID única. Se novos elementos forem inseridos no corpo de texto e o código for movido, pelo menos os elementos pai serão mais fáceis de reconhecer.

Target não requer IDs, mas usar IDs aumenta a confiabilidade das experiências criadas com o compositor de experiências. Target usa seletores de CSS para modificar seu conteúdo quando a experiência é entregue. Quando você edita uma experiência, o Visual Experience Composer ancora o seletor ao ancestral mais próximo com um atributo de ID não nulo ao elemento HTML que está sendo modificado. Portanto, não é aconselhável usar nenhum mecanismo, incluindo bibliotecas de JavaScript, que defina ou modifique atributos de ID HTML. Embora essas IDs possam estar disponíveis para o compositor de experiência do Target para criação de atividades, se o JavaScript modificar IDs, a ID usada quando a experiência foi criada pode não estar disponível quando a experiência foi executada. Se não houver uma ID disponível, o seletor ancorado para a ID falhará.

Ao editar classes CSS no Visual Experience Composer, é útil facilitar a identificação das classes usando nomes de classe descritivos. Isso o ajuda a assegurar que você edite as classes CSS certas e suas páginas tenham a aparência esperada.

Não use a propriedade de CSS !important CSS ao ocultar ou remover elementos.

Se a propriedade CSS !important estiver presente, as alterações feitas por target.js durante a entrega serão substituídas pelas regras CSS do site.

<a>Anchor Text</a>

OU

<a href=""> <img src=""> </img> </a>

Por exemplo, se você realizou duas ações:

• Adicionou uma classe ao Elemento 1
• Editou o HTML do Elemento 1

Cada alteração cria um novo elemento no VEC. Como a segunda ação modifica o Elemento 1, se você o excluir, a segunda ação não terá mais nada para modificar, e a alteração não funcionará mais.

Em outras palavras, se você adicionar um elemento com texto e, em seguida, editar esse elemento em uma ação separada com um texto diferente, o editor de códigos mostrará ambas as ações como elementos separados. Ao editar o elemento, você criou um novo elemento que modifica o elemento original que você criou, contendo o texto editado. Se você então excluir o elemento original, o texto editado não poderá encontrar o elemento que foi editado e não será exibido. O segundo elemento permanece na lista de elementos, mas não afeta a página porque o elemento que ele modifica não existe mais.

Consulte Seletores de elementos usados em Visual Experience Composer.

• Para texto em negrito, use <b> em vez de <strong>.
• Para texto em itálico, use <i> em vez de <em>.

As tags <strong> e <em> podem causar resultados inesperados.

Quando uma ação (Editar HTML) é executada em componentes da página (como controles deslizantes, carrosséis e assim por diante), a entrega pode parecer interrompida. O VEC executa a ação depois que o componente de página é instanciado pelo JavaScript.

Entretanto, quando o conteúdo da página for entregue aos visitantes, a ação é aplicada antes de instanciar o componente. Devido a isso, a funcionalidade desse componente pode ou não ser quebrada no momento da entrega. A funcionalidade depende da natureza do script usado nesta página, para definir o componente.

Se você testar para entrega e ela funcionar da primeira vez, não há garantias de que ela continuará funcionando. Pode (ou não) ser uma condição de corrida.

• Se houver uma condição de corrida, a entrega funciona intermitentemente.
• Se não houver condição de corrida, a entrega sempre funcionará.

Teste a sua página várias vezes, para ter certeza de que a entrega funciona conforme esperado.

Por exemplo, você não pode direcionar o texto do Carrinho de compras no VEC, se o código for parecido com este:

<a href="https://www.botanicchoice.com/shop.axd/Cart">
   <img alt="Shopping Cart"src="/images/ico-cart.gif"></img>
   Shopping Cart:
   <span id="HeaderCartQtyTotal">
      0
  </span>
  Items
  <span id="HeaderCartPriceTotal"></span>
</a>

Neste exemplo, todo o elemento de ancoragem é selecionado no VEC, o que afeta negativamente outros elementos se o direcionamento for executado.

Por exemplo, para abrir www.abc.com, os seguintes parâmetros de URL são usados:

www.abc.com?mboxEdit=1&mboxDisable=1

Esses parâmetros ativam a edição em um iframe.

Certifique-se de que o seu site carregue conforme esperado, após adicionar parâmetros como esses.

Desative as técnicas de interrupção de iframe no seu site e verifique se o site abre como esperado em um iframe em uma página de testes. Por exemplo:

<!DOCTYPE
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <iframe src="https://www.homedepot.com"</iframe>
</body>
</html>

Se um elemento marcado para rastreamento de cliques for reorganizado, os caminhos dos elementos reorganizados são alterados. Assim, o elemento no local em que o elemento original estava antes de ser reorganizado é aquele cujos cliques são acompanhados.

Isso ocorre porque o código para entregar o conteúdo da atividade e o código para rastrear os cliques está incluído em um pedaço de código entregue à página. Se você navegar para uma página diferente e configurar o acompanhamento por clique, então o código de conteúdo da atividade e o código de rastreamento de cliques são fornecidos para essa página. Se a página de acompanhamento de clique tem uma estrutura de página similar à página de execução de teste, então o conteúdo de teste pode aparecer também na página de acompanhamento de clique.

Por exemplo, se a sua página contiver:

<div>
  <div class="mboxDefault" >
  </div>
  <script>mboxCreate('myMbox');
</div>`

A div externa não deve ser selecionada em uma experiência porque a mbox codificada na página ainda faz uma chamada para Target e recebe uma resposta. Essa resposta interfere na resposta pretendida para o elemento de página maior.

Devido às políticas atualizadas do Manifesto V3 no Google Chrome, as extensões não podem mais modificar o DOM original antes que ele seja analisado pelo navegador. Como resultado, determinados scripts de segurança, como implementações de edição de iframe, podem impedir que as páginas sejam carregadas no VEC.

Para garantir a compatibilidade, esses scripts devem ser desabilitados condicionalmente quando a página for carregada dentro do iframe Target. Esse processo pode ser feito com segurança verificando a presença do objeto window.adobeVecExtension, que é inserido por Target durante o carregamento do VEC.

Os trechos de código a seguir são exemplos de código de interrupção de iframe que podem fazer com que a página da Web não seja carregada no VEC:

window.top.location = window.self.location;

top.location.href = self.location.href;

Uma verificação simples pode ser usada para verificar quando uma página da Web é inserida dentro de Target. Um trecho de código deve ter esta aparência:

if(!window.adobeVecExtension) {
    // additional security logic
}

Se, por exemplo, sua página contiver um carrossel com seis imagens e você quiser trocar uma imagem pela segunda imagem do carrossel, a ação Change Image não funcionará.

A solução alternativa é selecionar o contêiner pai e usar a ação Edit HTML para editar a HTML do carrossel e atualizar a fonte de imagem da imagem desejada.

O script é executado no escopo de target.js depois que a página é carregada. Portanto, qualquer variável ou função que seja declarada localmente não está acessível da parte externa do bloco do script.

Incorreto:

<script>
  var myVar = 123;
  function myFunc() {
    //
  }
</script>`

Correto:

<script>
  window.myVar = 123;
  window.myFunc = function() {
    //
  };
</script>

Adicione um elemento da âncora dentro do div 'customHeaderMessage' com algum texto de teste:

<a href="#">
<span> Dummy text </span>
</a>

Selecione esta div usando a ação Insert Element para inserir uma imagem como irmã desta div de texto fictício.

Após a inserção da imagem, ele tem a seguinte aparência:

<a href="#">
<span> Dummy text </span>
<img src=""> This is inserted Image. </img>
</a>

Remova a extensão de texto de teste.