Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Incluindo Analytics, Hotjar, Facebook Pixel no Angular

Olá,

Dentro de um site feito em angular eu tenho, nessa ordem - o Google Analytics, o Google Tag Manager, o Hotjar e o Facebook Pixel Code dentro do meu <Head>. E depois eu tenho o Tawk.to (que é um sistema de chat) antes do </body> (e portanto depois do <as-app></as-app>. Todos eles dentro do index.html.

Coloquei nesse locais pois é informado dessa forma na própria documentação de cada um deles. O problema é que eu não encontrei nada que fosse especifico para o angular.

E ao analisar a aba 'network' do devtools do chrome, esses scripts aparecem como responsáveis por um certa demora no carregamento do site. O tawk e o facebook pixel principalmente.

Eu até achei alguns pacotes que daria para instalar via npm, mas a maioria bem antigos, com poucos Weekly Downloads e que eu acredito que podem não ser tão úteis. Alguém já viu alguma forma melhor de colocar esses scripts no angular?

1 resposta
solução!

Fala ai Enzo, tudo bem? Minha recomendação seria adicionar o carregamento de todas as bibliotecas antes do body, ou seja, por último (depois até dos .js da aplicação).

Isso deve melhorar o carregamento da página, pois, seus arquivos JavaScript seria carregados e interpretados primeiro.

Outro ponto, você pode tenta adicionar um async ou defer no script dessas bibliotecas.

A diferença basicamente entre as duas seria:

  • async: Vai ser baixado e executado em paralelo ao processo de renderização da página.
  • defer: Vai ser baixado em paralelo e executado apenas quando a renderização da página finalizar.

Mais informações: https://braziljs.org/artigos/diferencas-entre-async-e-defer/

Espero ter ajudado.