Informações sobre o Modificações página em Adobe Target que permite exibir modificações na página e adicioná-las (Seletor de CSS, Mbox e Código personalizado).
A variável Modificações A página mostra todas as alterações feitas em sua página no Visual Experience Composer (VEC) e permite que você faça alterações adicionais clicando em cada elemento da página e selecionando uma ação. Cada alteração feita aparece como uma ação ou elemento separado na lista de Modificações. Além disso, é possível adicionar modificações, incluindo os seguintes tipos de modificação: Seletor CSS, Mbox. e Código personalizado.
A página de Modificações mostra todas as alterações feitas em sua página no VEC. Cada alteração feita aparece como uma ação ou elemento separado na lista de Modificações.
Use a página de Modificações para fazer pequenas alterações no seletor escolhido pelo Target quando você usa o VEC para configurar como o conteúdo será entregue. Você pode alterar o conteúdo ou um atributo de HTML. Você também pode editar o código para criar o equivalente a uma oferta HTML dentro de uma mbox.
Use a página de Modificações para:
Exibir uma ação realizada no visual composer.
Editar uma ação existente. Passe o mouse sobre a modificação desejada, em seguida, clique no ícone Editar.
Faça as alterações.
Excluir uma ação existente. Passe o mouse sobre a modificação desejada, em seguida, clique no ícone Excluir.
Adicione uma nova modificação. Clique em Adicionar modificação ou no ícone + e especifique as alterações, conforme descrito abaixo.
Observe que após a criação de uma modificação o Target exibe um ícone + na parte superior do painel Modificações em vez do botão Adicionar modificação, na parte inferior do painel.
Fixe o painel Modificações verticalmente na interface do Target ou horizontalmente na parte inferior. Clique no ícone de Fixar para alternar entre as duas configurações.
A ilustração a seguir mostra o painel Modificações fixado na parte inferior da tela:
Para exibir a página de Modificações de uma experiência selecionada, no VEC, clique no ícone Modificações </>.
Para abrir o painel de Modificações no Experience Composer baseado em formulário, crie ou edite uma oferta HTML. Para obter mais informações, consulte Experience Composer baseado em formulário.
A página de Modificações é aberta, dividindo a tela entre o modo visual, à esquerda, e o painel Modificações, à direita. Clique no ícone de Fixar para fixar o painel Modificações verticalmente na interface de usuário do Target ou horizontalmente na parte inferior. Observe que a experiência A na ilustração a seguir não tem modificações anteriores.
A experiência B mostra as modificações anteriores no painel Modificações à direita.
Para adicionar uma modificação:
O painel Modificações é exibido:
Na lista suspensa Tipo de modificações, escolha o tipo desejado:
Tipo de modificações | Detalhes |
---|---|
Seletor de CSS | Na caixa Seletor de elemento CSS, especifique o elemento CSS que deseja modificar, selecione um tipo de ação (Definir Conteúdo ou Definir atributo) e, em seguida, preencha com as informações necessárias e o conteúdo desejado. |
Mbox | Especifique o nome da mbox e o conteúdo desejado. Nota: as mboxes não são mais compatíveis com o VEC em páginas que usam o at.js 2.x. Como soluções alternativas:
|
Código personalizado | Especifique um nome opcional, selecione ou desmarque a caixa de seleção Adicionar código na <HEAD> Seção, como desejado, e em seguida adicione seu código personalizado.Se você selecionar Adicionar código na Se você desmarcar Adicionar código na Seção Se HTML para Observação: scripts são executados de forma assíncrona. Isso significa que você não pode, por exemplo, usar O código personalizado oferece uma interface não visual para exibir,editar e adicionar novas ações no VEC, no Experience Composer baseado em formulário e no editor de ofertas HTML. O painel oferece uma visualização de código de uma experiência para ajudá-lo a criar experiências mais complexas, experiências de ajuste fino existentes e solução de problemas. O código personalizado destina-se a usuários avançados familiarizados com HTML, JavaScript e CSS. A exibição do código pode ajudá-lo a ajustar alterações ou corrigir problemas do seletor. Ela também pode ser usada para adicionar novos códigos e ações personalizadas. É possível adicionar mais de um código personalizado e nomear cada um deles. Observação: o código personalizado está disponível somente para atividades A/B e de Direcionamento de experiência (XT). O código personalizado está desabilitado para sobreposição e se outra oferta de redirecionamento for aplicada. O código personalizado oferece suporte aos seguintes casos de uso:
O código personalizado oferece suporte a HTML, scripts e estilos. Qualquer código ou script HTML válido pode ser adicionado ou editado. |
Adicione modificações adicionais conforme necessário.
O painel Código personalizado contém o código executado no início do carregamento de página.
É possível executar o código JavaScript na tag <head>
. A execução do código não espera que a tag <body>
esteja presente no DOM.
Os seletores para ações visuais subsequentes dependem dos elementos HTML adicionados nessa guia.
O painel Código personalizado geralmente é usado para adicionar o JavaScript ou o CSS à parte superior da página.
Use a guia Código personalizado para:
Usar JavaScript em linha ou vincular a um arquivo JavaScript externo
Por exemplo, para alterar a cor de um elemento:
<script type="text/javascript">
document.getElementById("element_id").style.color = "blue";
</script>
Configurar um estilo em linha ou vincular a uma folha de estilo externa
Por exemplo, para definir uma classe para um elemento de sobreposição:
<style>
.overlay
{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
</style>
Adicionar trechos de HTML para definir novos elementos
Por exemplo, use o seguinte trecho HTML para criar uma sobreposição <div>
usando a classe CSS definida acima:
<div class="overlay"></div>
Ative o DOM pronto usando jQuery
O exemplo a seguir usando o JQuery presume que o site do cliente tenha o jQuery disponível na página quando Target O executa as ofertas.
<style>#default_content {visibility:hidden;}</style>
<script>
jQuery( document ).ready(function() {
jQuery("#default_content").html( "<span style='color:red'>Hello <strong>Again</strong></span>" );
jQuery("#default_content").css("visibility","visible");
});
</script>
Trocar para modo pronto para DOM, sem jQuery (não suporta Internet Explorer 8)
<style>#default_content {visibility:hidden;}</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("default_content").innerHTML = "<span style='color:red'>Hello <strong>Again</strong></span>";
document.getElementById("default_content").style.visibility="visible";
});
</script>
Personalizar o redirecionamento transmitindo os parâmetros existentes, o parâmetro s_tnt
(para integração herdada ao Analytics), o parâmetro de referenciador e a sessão da mbox
<style type="text/css">body{display:none!important;}</style>
<script type="text/javascript">
var qs='';window.location.search?qs=window.location.search+'&':qs='?';
window.location.replace('//www.mywebsite.com/'+qs+'s_tnt=${campaign.id}:${campaign.recipe.id}:${campaign.recipe.trafficType}&s_tntref='+encodeURIComponent(document.referrer)+'&mboxSession='+mboxFactoryDefault.getSessionId().getId()+''+window.location.hash+'');
</script>
Adicionar Modelos de experiência do Adobe Target para uso no código personalizado. Os Modelos de experiência do Target são amostras pré-codificadas com entradas configuráveis a serem usadas para executar casos de uso de profissionais de marketing comuns. Estes Modelos de experiência são fornecidos gratuitamente para desenvolvedores e profissionais de marketing como ponto de partida para executar casos de uso comuns, seja via VEC ou Experience Composer baseado em formulário. Os casos de uso incluem lightboxes, galerias, contagens regressivas e muito mais.
Para obter mais informações, consulte Modelos de experiência.
Sempre envolva o código personalizado em um elemento.
Por exemplo:
<div id="custom-code">
// My Code goes here
</div>
No caso de serem necessárias modificações, faça as alterações dentro deste contêiner.
Se não precisar mais do código personalizado, deixe esse contêiner vazio, mas não o remova. Isso garante que outras modificações da experiência não sejam afetadas.
Não use a ID de elemento "CDQID" para modificações na página feitas no Editor de códigos.
O Target aplica uma nova ID de elemento com o valor "CDQID" a qualquer elemento na página modificada pelo Target. Como essa ID é aplicada pelo Target, ela não deve ser usada para nenhuma outra modificação ou ajustes no Editor de códigos.
Não execute ações de document.write em scripts de código personalizado.
Os scripts são executados de modo assíncrono. Isso frequentemente faz com que as ações document.write
apareçam no lugar errado na página. Não é recomendado o uso de document.write
em scripts criados no código personalizado.
Se você criar um elemento e depois modificá-lo, não exclua o elemento original.
Cada alteração cria um novo elemento no painel Modificações. Como a segunda ação modifica o Elemento 1, se você o excluir, a ação não terá mais nada para modificar e a alteração não funcionará mais. Consulte "Soluções de problemas" abaixo para obter mais informações.
Tenha cuidado se usar o recurso de código personalizado para duas atividades que direcionam o mesmo URL.
Se você usar o recurso de código personalizado para duas atividades que direcionam o mesmo URL, o JavaScript será injetado na página de ambas as atividades. O Target determina automaticamente a ordem do conteúdo entregue. Verifique se o código não depende de posicionamento. Cabe a você verificar se não há conflitos no código.
O código personalizado não é executado ao usar triggerView
.
As ofertas de Code personalizado no VEC não são renderizadas novamente quando triggerView()
é chamado com {page: false}
como a opção.
Recebi um aviso de que uma ação não pode ser aplicada devido a alterações estruturais em uma página. O que isso significa?
Essa mensagem indica que a estrutura da sua página foi alterada desde que a atividade foi salva pela última vez.
Os seletores ausentes podem ser acessados usando o modo de Navegação. É recomendável que você exclua e recrie cada experiência para garantir que o seu conteúdo seja exibido conforme o esperado, como indicado na mensagem de aviso.
Quando excluo um elemento, vejo um aviso que diz "Excluir esta ação pode afetar as ações subsequentes". O que isso significa?
Por exemplo, se você realizou duas ações:
Cada alteração cria um novo elemento no painel Modificações. 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 adicionar um elemento com texto e, em uma ação separada, editá-lo com um texto diferente, o painel Modificações mostrará as duas ações como elementos distintos. 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.
Um elemento que criei usando document.write
em um script não é exibido onde esperava.
Os scripts são executados de modo assíncrono. Isso frequentemente faz com que as ações document.write
apareçam no lugar errado na página. A Adobe não recomenda usar document.write
em scripts criados no código personalizado.
Meu JavaScript exibe erros no código personalizado.
Qualquer JavaScript embutido que não seja um JavaScript válido mostrará erros no código personalizado.
Não consigo desfazer uma alteração no meu código personalizado.
Atualmente, a ação de desfazer não é suportada para editar e excluir ações do painel Modificações e no código personalizado. Desfazer um dessas operações pode fazer com que a experiência no VEC pareça incompatível com as ações visíveis no código personalizado. Contudo, as ações no código personalizado estão no estado correto e não há impacto na entrega. Esse é um problema de interface do usuário. Para atualizar a experiência, salve-a e abra-a novamente ou vá para a próxima etapa e volte. Essas ações recarregam a experiência, de forma que ela apareça como esperado e seja consistente com as ações no painel Modificações.
O código personalizado não produz os resultados esperados no Internet Explorer 8.
O Target não é mais compatível com o IE8.