Velocidades do usuário - acompanhamento da Web (ga.js)

Este documento fornece um guia abrangente sobre como usar o método _trackTiming.

Introdução

Estudos demonstraram que a redução do tempo que uma página leva para carregar melhora a experiência geral do usuário de um site. O Google Analytics tem vários relatórios eficientes que acompanham automaticamente o tempo de carregamento da página. Mas e se você quiser acompanhar o tempo que leva para um determinado recurso ser carregado?

Por exemplo, o carregamento de uma biblioteca JavaScript popular leva muito tempo, prejudicando a experiência de alguns usuários no site?

Com a velocidade do usuário, você pode responder a essa pergunta fornecendo uma maneira nativa de acompanhar um período no Google Analytics.

Para ver um exemplo funcional, confira o exemplo de código de velocidade do usuário.

Como configurar as velocidades do usuário

Para coletar dados de velocidade do usuário, use o método _trackTiming, que envia dados de tempo ao Google Analytics.

_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);

Os parâmetros representam:

Parâmetro Valor Obrigatório Resumo
category string Sim Uma string para classificar todas as variáveis de velocidade do usuário em grupos lógicos para facilitar a geração de relatórios. Por exemplo, você pode usar o valor de jQuery se estiver acompanhando o tempo que levou para carregar essa biblioteca JavaScript específica.
variable string Sim Uma string para indicar o nome da ação do recurso que está sendo acompanhado. Por exemplo, você pode usar o valor de JavaScript Load se quisesse acompanhar o tempo que levou para carregar a biblioteca JavaScript do jQuery. As mesmas variáveis podem ser usadas em várias categorias para rastrear os tempos de um evento comum a essas categorias, como Javascript Load e Page Ready Time etc.
time number Sim Tempo decorrido em milissegundos que será informado ao Google Analytics. Se a biblioteca jQuery levar 20 milissegundos para carregar, você enviaria o valor de 20.
opt_label string não Uma string que pode ser usada para adicionar flexibilidade à visualização da velocidade do usuário nos relatórios. Os rótulos também podem ser usados para se concentrar em diferentes subexperimentos da mesma combinação de categoria e variável. Por exemplo, se carregarmos o jQuery a partir da rede de fornecimento de conteúdo do Google, usaríamos o valor de Google CDN.
opt_sampleRate number não Um número para substituir manualmente a porcentagem de visitantes cujos hits de velocidade são enviados ao Google Analytics. O padrão é definido da mesma forma que a coleta de dados gerais de velocidade do site e se baseia em uma porcentagem de visitantes. Portanto, se você quiser acompanhar os hits de _trackTiming para 100% dos visitantes, use o valor de 100. Cada hit é contabilizado no limite geral de 500 hits por sessão.

Voltar ao início

Monitorar o tempo gasto

Ao usar o método _trackTiming, você especifica a quantidade em milissegundos gasta no parâmetro time. Portanto, cabe a você, como desenvolvedor, escrever código para capturar esse período. A maneira mais fácil de fazer isso é criar um carimbo de data/hora no início de um período e outro no final. Assim, é possível identificar a diferença entre os dois carimbos de data/hora para determinar o tempo gasto.

Aqui está um exemplo trivial:

var startTime = new Date().getTime();

setTimeout(myCallback, 200);

function myCallback(event) {

  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;

  _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']);
}

O carimbo de data/hora inicial é recuperado criando um novo objeto Date e recebendo o tempo em milissegundos. Em seguida, a função setTimeout é usada para chamar a função myCallback em 200 milissegundos. Quando a função de callback é executada, o carimbo de data/hora endTime é recuperado criando um novo objeto Date. Em seguida, a diferença entre os horários de término e o de início é calculada para chegar ao tempo gasto. Por fim, o tempo gasto é enviado ao Google Analytics.

Esse exemplo é trivial, mas ilustra o conceito de como monitorar o tempo. Vejamos um exemplo mais realista.

Voltar ao início

Acompanhar o tempo gasto no carregamento de um recurso JavaScript

Hoje, muitos sites incluem bibliotecas JavaScript de terceiros ou solicitam dados por meio de objetos JSON. Seu site pode carregar esses recursos rapidamente em casa, mas os mesmos recursos podem ser carregados muito lentamente para usuários em outros países. Esses recursos de carregamento lento podem prejudicar a experiência dos usuários internacionais no site.

Com o recurso de velocidade do usuário da velocidade do site, você coleta e informa o tempo de carregamento desses recursos.

Veja um exemplo simples que demonstra como acompanhar o tempo gasto de uma função que carrega recursos JavaScript de forma assíncrona:

var startTime;

function loadJs(url, callback) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  var s = document.getElementsByTagName('script')[0];

  js.onload = callback;
  startTime = new Date().getTime();

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;
  _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']);

  // Library has loaded. Now you can use it.
};

Observe que esse exemplo é muito semelhante ao exemplo anterior.

Neste exemplo, loadJs é uma função utilitária que carrega recursos JavaScript criando dinamicamente um elemento de script e anexando-o ao DOM do navegador. A função aceita dois parâmetros: um URL como uma string e uma função de callback que será executada depois que o script for carregado.

Dentro de loadJs, um carimbo de data/hora de início é armazenado em startTime. Depois que o recurso é carregado, a função de callback é executada. Na função de callback, o carimbo de data/hora final é recuperado e usado para calcular o tempo necessário para carregar o recurso JavaScript. O tempo gasto é enviado ao Google Analytics pelo método _trackTiming.

Então, chamando:

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);

Vai carregar de forma assíncrona a biblioteca jQuery a partir da rede de fornecimento de conteúdo do Google e, após a conclusão, executar a função de callback, que, por sua vez, envia o tempo de carregamento do recurso para o Google Analytics.

Voltar ao início

Como trabalhar com várias velocidades do usuário

Digamos que você queira carregar vários recursos JavaScript usando o código acima. Como a variável startTime é global, sempre que você rastreia o início de um período, a variável startTime é substituída, gerando o tempo incorreto gasto.

Portanto, como prática recomendada, você precisa manter uma instância exclusiva do horário de início e término para cada recurso que quer rastrear.

Observe também que os parâmetros de categoria e variável de _trackTiming estão codificados. Portanto, se você usar loadJs para carregar vários recursos, não será possível distinguir cada recurso nos relatórios do Google Analytics.

Ambos os problemas podem ser resolvidos armazenando os parâmetros de tempo e _trackTiming em um objeto JavaScript.

Criar um objeto JavaScript para armazenar a velocidade do usuário.

Veja um objeto JavaScript simples que pode ser usado para armazenar os dados de velocidade do usuário para cada recurso que está sendo acompanhado:

function TrackTiming(category, variable, opt_label) {
  this.category = category;
  this.variable = variable;
  this.label = opt_label ? opt_label : undefined;
  this.startTime;
  this.endTime;
  return this;
}

TrackTiming.prototype.startTime = function() {
  this.startTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.endTime = function() {
  this.endTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}

Agora, podemos usar esse objeto para fazer com que loadJs funcione para várias solicitações.

Enviar velocidades armazenadas do usuário

Agora que temos uma maneira de armazenar dados de tempo para cada recurso que queremos rastrear, veja como atualizar loadJs para usá-lo:

var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN');

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt);

function loadJs(url, callback, tt) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  js.onload = callback;
  var s = document.getElementsByTagName('script')[0];

  tt.startTime();
  js.tt = tt;

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  target.tt.endTime().send();

  // Library has loaded. Now you can use it.
}

O código acima começa criando um novo objeto TrackTiming em que a categoria, a variável e o rótulo opcional são transmitidos para o construtor. O objeto TrackTiming é transmitido como um parâmetro para a função loadJs.

Dentro de loadJs, o método startTime é chamado para receber e armazenar o carimbo de data/hora de início.

No exemplo anterior, a função de callback poderia acessar facilmente a variável startTime porque ela era global. Agora que startTime faz parte do objeto TrackTiming, precisamos de uma maneira de transmitir esse objeto da função loadJs para a função de callback.

Para resolver esse problema, uma estratégia é adicionar o objeto TrackTiming como uma propriedade ao elemento de script. Como a função de callback é executada usando o método onload do script, o callback recebe um objeto de evento como parâmetro. Esse objeto de evento pode ser usado para recuperar o objeto de script original que acionou o evento, e esse objeto de script, por sua vez, pode ser usado para acessar nosso objeto TrackTiming.

Assim que conseguimos acessar nosso objeto TrackTiming original, o script pode encerrar o horário e enviar os dados.

Veja uma demonstração ao vivo deste exemplo no nosso site de amostras.

Esse padrão de adicionar o objeto TrackTiming como uma propriedade do objeto que está sendo acompanhado tende a funcionar bem para acompanhar outros mecanismos de carregamento assíncrono, como o uso do objeto XMLHttpRequest.

Voltar ao início

Acompanhamento de XMLHttpRequests

Outra maneira comum de carregar recursos da página da Web de forma assíncrona é usar o objeto XMLHttpRequest. O tempo necessário para carregar esses recursos também pode ser rastreado usando o método _trackTiming e o objeto TimeTracker.

Veja um exemplo que carrega o arquivo de citações do servidor.

var url = ‘//myhost.com/quotes.txt’;
var tt = new TrackTime('xhr demo', 'load quotes');

makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    var xhr = new window.XMLHttpRequest;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = callback;

    tt.startTime();
    xhr.tt = tt;

    xhr.send();
  }
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  if (target.readyState == 4) {
    if (target.status == 200) {

      target.tt.endTime().send();

      // Do something with the resource.
    }
  }
}

Este exemplo é muito semelhante ao exemplo loadJs. Veja a demonstração ao vivo aqui.

Voltar ao início

Evitar o envio de dados inválidos

Nos exemplos acima, para conseguir o tempo gasto, o código subtrai o horário de término do horário de início. Isso geralmente funciona bem, desde que o horário de início seja menor que o de término. No entanto, isso pode se tornar um problema se o horário no navegador mudar. Se o usuário alterar o horário da máquina após a definição do horário de início, os dados inválidos poderão ser enviados para o Google Analytics. Um grande problema em enviar um grande valor inválido é que isso distorce as métricas médias e totais.

Portanto, em geral, é uma prática recomendada garantir que o tempo gasto seja maior do que 0 e menor do que um determinado período antes de enviar os dados para o Google Analytics. Podemos modificar o método de envio TimeTracker acima para realizar essa verificação:

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;

  var hourInMillis = 1000 * 60 * 60;

  if (0 < timeSpent && timeSpent < hourInMillis) {
    window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  }

   return this;
}

Substituição da taxa de amostragem e da depuração

O método _trackTiming envia dados ao Google Analytics apenas com a mesma taxa para todas as métricas de velocidade do site coletadas pelo Analytics. Por padrão, isso é definido como 1% de todos os visitantes.

Para sites com uma grande quantidade de tráfego, o padrão deve ser adequado. No entanto, para sites com menos tráfego, você pode aumentar a taxa de amostragem definindo o parâmetro opcional de taxa de amostragem. Por exemplo: 

_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);

Coletará dados _trackTiming de 50% dos visitantes.

Se preferir, defina o método _setSiteSpeedSampleRate para definir a taxa de amostragem de todos os tempos de velocidade do site, incluindo o método _trackTiming. Por exemplo:

_gaq.push([‘_setSiteSpeedSampleRate’, 50]);

Também vamos coletar dados do _trackTiming de 50% dos visitantes.

Normalmente, ao testar e verificar uma implementação do Google Analytics, você tem muito pouco tráfego no site que está testando. Por isso, normalmente é útil aumentar a taxa de amostragem para 100% durante o teste.

Voltar ao início

Rastrear eventos de outros horários

Todos os exemplos acima se concentram no uso do método _trackTiming para rastrear o tempo necessário para carregar recursos, mas esse método também pode ser usado para rastrear durações gerais de tempo. Por exemplo, você pode acompanhar:

  • O tempo que um visitante assiste a um vídeo.
  • O tempo que leva para concluir um nível em um jogo.
  • O tempo que um visitante passa lendo uma seção de um site.

Em cada um desses casos, você pode reutilizar o mesmo objeto JavaScript TimeTracker apresentado acima para simplificar a coleta e o envio dos dados de tempo gasto ao Google Analytics.