Autor do artigo: isabela.carvalho.pro

(Não remova esse quadro) Descreva o passo a passo para o cliente seguindo os padrões de escrita de artigos, como: 1. Escreva em voz ativa. 2. Numere o passo a passo. 3. Atenção com imagens: utilize uma resolução apropriada ao local de inserção. 4. Escreva em tempo presente, na primeira pessoal e no imperativo (em passo a passo). Essas informações não se tonam parte do conteúdo em sua nova página, elas ficam ocultas e só aprecem para usuário logado e se o artigo/dica estiver em modo de edição!

É importante que os testes citados a seguir sejam realizados no Servidor e nas estações e ambos os ambientes deverão ser considerados para a análise. 

(Não remova esse quadro)

Essas informações não se tonam parte do conteúdo em sua nova página, elas ficam ocultas e só aprecem para usuário logado e se o artigo/dica estiver em modo de edição!

<div id="text-end"></div>




<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-193974933-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag2(){dataLayer.push(arguments);}
  gtag2('js', new Date());

  gtag2('config', 'UA-193974933-1');


  function gtagevents (action,category) {
     console.log(category + ':' + action);
     gtag2('event',action,{event_category:category,event_label: document.title});
  };

</script>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    (function(){
        // RASTREIO DE USO DO VÍDEO
        function gtagvideo(action){
           gtagevents(action,'Video')
        }

        var iframe = document.querySelector('iframe');
        var player = new Vimeo.Player(iframe);

        var seeking = false;
        var priorTime = 0;
        var currentTime = 0;
        var reportouFinalDoConteudo = false;

        // se pausar o play é acionado também.
        player.on('play', function(data) {
            if(data.seconds == 0){ 
              gtagvideo('video-iniciado');
            }
            priorTime = data.seconds;             
        });

        player.on('ended', function() {
            gtagvideo('video-finalizado');
        });

        //seeking e timeupdate são disparados juntos, logo o tempo dos 2 é atualizado também. Preciso garantir que a variavel starttime seja atualizada ordenadamente (sempre antes ou após o seeking).
        // pra isso preciso setar uma variavel no timeupdate e ler no seeking para garantir a ordem. Se ela estiver false será alterada na próxima iteração.
        player.on('seeking', function(data) {               
            seeking = true;
        });


        player.on('pause',function(data){
            gtagvideo('video-pausado');    
        });

        player.on('timeupdate', function(data) {
            if(seeking){
                if(currentTime < priorTime){
                    gtagvideo('video-voltando');    
                }
                if(currentTime > priorTime){
                    gtagvideo('video-avancando')
                }
                seeking = false;
            }
            priorTime = currentTime;
            currentTime = data.seconds;


           var finalDoConteudo = (data.duration - data.seconds) < 5;
           if(finalDoConteudo && !reportouFinalDoConteudo){
            gtagvideo('conteudo-finalizado')
            reportouFinalDoConteudo = true;
           }
        });

        player.on('fullscreenchange', function() {
            gtagvideo('video-fullscreen');
        });
    })();
</script>

<script>
 // RASTREIO DO USO DE AUDIO
 (function(){
    function gtagaudio(action){
           gtagevents(action,'Audio')
    }            

    var audio = document.querySelector("audio");

    var seeking = false;
    var priorTime = 0;
    var currentTime = 0;

    audio.addEventListener('play',function(){
        if(audio.currentTime == 0){
          gtagaudio('audio-iniciado');
        }
        priorTime = audio.currentTime;        
    });

    audio.addEventListener('ended',function(){
        gtagaudio('audio-finalizado');
    });

    audio.addEventListener('pause',function(){
        gtagaudio('audio-pausado');
    });

    audio.addEventListener('seeking', function(data) {               
        seeking = true;
    });

    audio.addEventListener('timeupdate', function(data) {               
        if(seeking){
                if(currentTime < priorTime){
                    gtagaudio('audio-voltando');    
                }
                if(currentTime > priorTime){
                    gtagaudio('audio-avancando')
                }
                seeking = false;
            }
            priorTime = currentTime;
            currentTime = audio.currentTime;
    });    
 })();
 </script>

<script>
    (function(){
        var terminou = false;
        //RASTREIO DE LEITURA ATÉ O FINAL DA PÁGINA
        document.addEventListener('scroll',() => {
            if(document.getElementById('text-end').getBoundingClientRect().top < window.innerHeight){
                if(!terminou){
                    terminou = true;
                    gtagevents('artigo-lido','Pagina')
                }
            }else{
                terminou = false;
            }
                
        });
    })();
 </script>