Configurações

Animações

Efeitos de animação nas landing pages

Através do Google Tag Manager é possível deixar suas landing pages animadas com efeitos de transição dinâmicos. :)


Você pode animar os blocos criados através do menu "Estilo" ou verificar o código para atribuir o dado a uma classe existente.


O processo é bem simples:


1- Acesse sua conta do Google tag manager ou crie uma nova conta para vincular o ID na sua landing page. 

Clique aqui, caso você tenha interesse em verificar um tutorial de como realizar esse processo.


Agora, insira o Identificador através da guia "Documento".



2- Depois que tivermos o vínculo entre as plataformas, basta acessar a área de trabalho do GTM e adicionar uma nova TAG:




3- Você deverá nomear a tag para identificá-la no Google Tag Manager e selecionar a opção de utilização de HTML personalizado:




4- Vamos utilizar um plugin de licença gratuita que permite adicionar efeitos de transição em cada um dos blocos da sua landing page.


O plugin se chama "AOS" (Animation on scroll) e está disponível para inserção através de um código.


Você pode acompanhar o preview dos efeitos através desta página e escolher qual será pertinente adicionar em sua página.


Para que seja possível informar ao GTM qual o bloco deve receber o efeito desejado, você deve atribuir a animação a uma classe ou Id do código HTML.


Dica: Sempre que você criar um novo bloco e nomeá-lo, esse nome será o mesmo atribuído ao ID do estrutura, tornando possível realizar ações com o bloco criado exclusivamente.


No sistema:


Como o bloco é criado no código HTML:


Em nosso exemplo vamos usar uma classe comum em todos os blocos criados chamada ".gt". 


Depois de escolher qual será a classe ou id, você deverá copiar e colar o código abaixo na Tag do GTM substituindo o .gt pela classe ou id desejado:



<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
   $(".gt").attr('data-aos', 'fade-right');
</script>
<script>
  AOS.init();
</script>





5- Ative a tag com o gatilho de visualização de página e publique o conteúdo:




Prontinho, vamos analisar como ficou a animação?