A Adobe Experience Platform Launch foi reformulada como um conjunto de tecnologias de coleta de dados no Adobe Experience Platform. Como resultado, várias alterações de terminologia foram implementadas na documentação do produto. Consulte o seguinte documento para obter uma referência consolidada das alterações de terminologia.
A implantação de desempenho e não de bloqueio das bibliotecas JavaScript necessárias para nossos produtos é cada vez mais importante para os usuários da Adobe Experience Cloud. Ferramentas como Google PageSpeed recomendam que os usuários alterem a forma como implantam as bibliotecas do Adobe em seu site. Este artigo explica como usar as bibliotecas JavaScript do Adobe de forma assíncrona.
Frequentemente, as bibliotecas são carregadas de forma síncrona na tag <head>
de uma página. Por exemplo:
<script src="example.js"></script>
Por padrão, o navegador analisa o documento, chega a essa linha e começa a buscar o arquivo JavaScript do servidor. O navegador aguarda até que o arquivo seja retornado, então analisa e executa o arquivo JavaScript. Por fim, continua analisando o restante do documento HTML.
Se o analisador encontrar a tag <script>
antes de renderizar o conteúdo visível, a exibição do conteúdo será adiada. Se o arquivo JavaScript que está sendo carregado não for absolutamente necessário para mostrar conteúdo aos usuários, você está exigindo desnecessariamente que seus visitantes aguardem o conteúdo. Quanto maior for a biblioteca, maior será o atraso. Por isso, as ferramentas de benchmark de desempenho do site como Google PageSpeed ou Lighthouse muitas vezes sinalizarão scripts carregados de forma síncrona.
As bibliotecas do Tag Management podem crescer rapidamente se você tiver muitas tags para gerenciar.
É possível carregar qualquer biblioteca de maneira assíncrona adicionando um atributo async
à tag <script>
. Por exemplo:
<script src="example.js" async></script>
Isso indica ao navegador que quando essa tag de script é analisada, ele deve começar a carregar o arquivo JavaScript, mas em vez de esperar que a biblioteca seja carregada e executada, ela deve continuar analisando e renderizando o restante do documento.
Conforme descrito acima, em implantações síncronas, o navegador pausa a análise e renderiza a página, enquanto a biblioteca de tags Adobe Experience Platform é carregada e executada. Em implantações assíncronas, por outro lado, o navegador continua analisando e renderizando a página enquanto a biblioteca é carregada. A variação de quando a biblioteca de tags pode terminar o carregamento em relação à análise e renderização da página deve ser levada em consideração.
Primeiro, como a biblioteca de tags pode terminar o carregamento antes ou depois que a parte inferior da página tenha sido analisada e executada, você não deve mais chamar _satellite.pageBottom()
do código da página (_satellite
não estará disponível até que a biblioteca tenha carregado). Isso é explicado em Carregamento do código incorporado das tags de forma assíncrona.
Segundo, a biblioteca de tags pode terminar o carregamento antes ou depois que o evento do navegador DOMContentLoaded
(DOM Ready) ocorrer.
Por causa desses dois pontos, vale a pena demonstrar como os tipos de evento Biblioteca carregada, Parte inferior da página, Pronto para DOM e Janela carregada da função de extensão principal ao carregar uma biblioteca de tags de forma assíncrona.
Se a propriedade da tag contiver as quatro regras a seguir:
Independentemente de quando a biblioteca de tags terminar o carregamento, todas as regras serão executadas e serão executadas na seguinte ordem:
Regra A → Regra B → Regra C → Regra D
Embora a ordem seja sempre aplicada, algumas regras podem ser executadas imediatamente quando a biblioteca de tags terminar de carregar, enquanto outras podem ser executadas posteriormente. O seguinte ocorre quando a biblioteca de tags termina o carregamento:
DOMContentLoaded
(DOM Pronto) já tiver ocorrido, a Regra B e a Regra C serão executadas imediatamente. Caso contrário, as Regras B e C serão executadas posteriormente quando o evento do navegador DOMContentLoaded
ocorrer.load
(janela carregada) já tiver ocorrido, a Regra D será executada imediatamente. Caso contrário, a Regra D será executada mais tarde quando o evento do navegador load
ocorrer. Observe que, se tiver instalado a biblioteca de tags de acordo com as instruções, a biblioteca de tags sempre finaliza o carregamento antes que o evento do navegador load
ocorra.Ao aplicar esses princípios ao seu próprio site, considere o seguinte:
Caso veja algo fora de ordem, é provável que você tenha problemas com tempo para resolver. Implantações que requerem tempo preciso podem precisar usar ouvintes de eventos e o tipo de evento Evento personalizado ou Chamada direta para tornar suas implementações mais robustas e consistentes.
As tags fornecem um botão para ativar o carregamento assíncrono ao criar um código incorporado ao configurar um ambiente. Você também pode configurar o carregamento assíncrono sozinho:
Adicione um atributo assíncrono à tag <script>
para carregar o script de maneira assíncrona.
Para o código incorporado das tags, isso significa alterar isso:
<script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>
para isto:
<script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script>
Remova qualquer código que tenha adicionado anteriormente na parte inferior da sua tag:
<script type="text/javascript">_satellite.pageBottom();</script>
Esse código informa à Platform que o analisador do navegador chegou à parte inferior da página. É provável que as tags não tenham sido carregadas e executadas antes dessa hora, portanto, chamar _satellite.pageBottom()
resulta em um erro e o tipo de evento Final da página pode não se comportar conforme esperado.