Implementação de Aplicativo de Página Única (Front End)

Os aplicativos de página única (SPA) estão se tornando cada vez mais populares no desenvolvimento web. Os frameworks populares de SPA incluem React, Vue, AngularJS, Ember e Backbone. Se seu site usa uma dessas estruturas, leia este artigo para conhecer os métodos de implementação recomendados

Orientações

Com esta solução, a implementação para SPAs é idêntica à de não SPAs. Não é necessário implementar uma chamada de API para carregar a página do SPA ou marcar quais campanhas são relevantes para essas chamadas. Além disso, a solução é perfeita para o framework.

Como funciona 

O trabalho pesado é feito pela Dynamic Yield:

• O carregamento dos elementos da página é monitorado, mesmo quando a própria página não recarrega totalmente. Isso é feito usando uma API da Web chamada MutationObserver, que fornece ganchos para mutações de um DOM e nos permite rastrear quando um nó DOM é inserido, destruído ou modificado. Assim, a Dynamic Yield aplica (ou reaplica) as alterações no momento certo. Quando a página é desativada, a Dynamic Yield não tenta mais alterar os elementos nessa página.
• O script da Dynamic Yield usa uma máquina de estados finita e todas as campanhas são objetos inteligentes com estado. Dessa forma, o script responde às mudanças em seus aplicativos.

Limitações conhecidas

• É necessária uma atualização da página para atribuir usuários a públicos baseados em CRM.
• Definir o contexto da página é obrigatório.

Observação: Se as regras de detecção automática (regras de contexto) estiverem habilitadas para um tipo de página específico, o contexto da página implementado nesse tipo de página serve como um substituto se todas as regras não se aplicarem.

Detecção de novas páginas

A solução SPA usa vários métodos para detectar alterações na página:

• As alterações de URL são detectadas usando eventos da API History e da Hashchange.
  A detecção de alteração de URL ignora as alterações nos parâmetros da string de consulta de URL.
• Alterações na tag Title no cabeçalho da página ou edições em Document.Title.
• Alterações de contexto são detectadas por edições no objeto DY.recommendationContext.

Renderização da campanha

O conteúdo dinâmico e as campanhas de recomendações são renderizadas diretamente no DOM.

Seções que não herdam o CSS do site

Se sua seção não herdar o CSS do site, as campanhas de conteúdo dinâmico e recomendações serão renderizadas diretamente no shadow DOM. Como resultado, essas campanhas não interferem na detecção de alterações do DOM no framework do front end.

Para permitir o acesso contínuo aos elementos HTML das campanhas, o código de JavaScript da campanha tem várias funções de consulta substituídas, consultando primeiro os Shadow DOMs da campanha. Se nenhum elemento for encontrado, ele consultará o DOM como substituto.

Essas funções são:

• document.getElementById
• document.querySelector
• document.querySelectorAll
• document.getElementsByName
• document.getElementsByClassName
• document.getElementsByTagName

Solução de problemas de uso do shadow DOM

O que é #shadow-root e por que ele está visível em todas as minhas campanhas da Dynamic Yield veiculadas na página?

#shadow-root (ou shadow DOM) é a forma como a Dynamic Yield insere o conteúdo em Sites habilitados para SPA e devem estar visíveis em todas as campanhas veiculadas nas páginas que estejam configuradas com as funções de substituir/adicionar antes/adicionar depois. Isso é considerado um comportamento normal para sites com SPA habilitado.

Por que o CSS da minha campanha não está afetando os elementos da minha página da web?

Essas informações são relevantes para sites sem o sinalizador de recurso INHERIT_SITE_CSS habilitado.

Esse comportamento também se deve ao shadow DOM. Elementos (e tags de estilo) dentro do shadow DOM estão em uma instância do DOM separada do resto da página da web.

Se você estiver tentando manipular objetos rodando dentro do Shadow DOM a partir de uma instância externa ou vice-versa, use JavaScript em vez de CSS.

Segmentando o DOM a partir do shadow DOM (mesma sintaxe que se não houvesse shadow DOM):

document.querySelector('#someElement').style.color = 'red';

Segmentando o shadow DOM a partir do DOM:

document.querySelector('div[data-dy-embedded-object]').shadowRoot.querySelector('#someElement').style.color = 'red'

Segmentando o shadow DOM a partir de um shadow DOM separado:

//o mesmo que “Segmentando o shadow DOM a partir do DOM”, mas talvez você queira adicionar um waitForElement para fins de cronometragem

DYO.waitForElement('#shadow-root-container div[data-dy-embedded-object]', function() {

   document.querySelector('#shadow-root-container div[data-dy-embedded-object]').shadowRoot.querySelector('#someElement').style.color = 'purple'

 })

Observação: o jQuery pode ser usado para atualizar o estilo ou alternar classes de elementos em execução no shadow DOM, usando esses mesmos métodos, mas com a sintaxe $() sintaxe ao invés de um querySelector.