Como criar um painel CrUX no Looker Studio

O Looker Studio (antigo Data Studio) é uma ferramenta de visualização de dados eficiente que permite criar painéis com base em fontes de Big Data, como o Chrome UX Report (CrUX). Neste guia, você vai aprender a criar seu próprio dashboard personalizado do CrUX para monitorar as tendências de experiência do usuário de uma origem.

Captura de tela do painel do CrUX mostrando vários gráficos de barras de pilhas mudando ao longo de vários meses.
Painel do CrUX

O painel CrUX é criado com um recurso do Looker Studio chamado Conectores da comunidade. Esse conector é um vínculo preestabelecido entre os dados brutos do CrUX do BigQuery e as visualizações do Looker Studio. Isso elimina a necessidade dos usuários do painel escreverem consultas ou gerarem gráficos. Tudo é criado para você. Tudo o que você precisa é fornecer uma origem, e um painel personalizado será gerado.

O painel padrão do CrUX

O CrUX tem um painel padrão, que é mantido pela equipe dele. Novas métricas (por exemplo, INP) são adicionadas pela equipe e ficam disponíveis na próxima vez que o painel é carregado.

Criar um painel personalizado

Alguns usuários podem personalizar o painel. Nesse caso, você pode criar sua própria cópia do painel padrão e alterá-la conforme achar adequado.

Para criar um painel personalizado, acesse g.co/chromeuxdash. Você será direcionado à página do conector da comunidade do CrUX, onde poderá informar a origem do painel. Os novos usuários talvez precisem preencher as solicitações de permissão ou preferências de marketing.

Captura da tela de configuração do conector do painel CrUX com um campo para inserir o URL de origem e uma caixa de seleção para permitir que esse campo seja modificado nos relatórios.
O conector do painel CrUX

O campo de entrada de texto só aceita origens, não URLs completos. Por exemplo:

Origem (compatível)
https://developer.chrome.com
URL (incompatível)
https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

Se você omitir o protocolo, HTTPS será usado. Os subdomínios são importantes. Por exemplo, https://developers.google.com e https://www.google.com são considerados origens diferentes.

Alguns problemas comuns com origens são fornecer o protocolo errado, por exemplo, http:// em vez de https://, e omitir o subdomínio quando necessário. Alguns sites incluem redirecionamentos. Portanto, se http://example.com redirecionar para https://www.example.com, use o último, que é a versão canônica da origem. Como regra geral, use a origem que aparece para os usuários na barra de endereço.

Quando você marca a caixa de seleção, a origem é incluída no URL do dashboard. Assim, é recomendável marcar o parâmetro de URL para permitir que o mesmo painel seja usado para origens diferentes.

Clique no botão Conectar. Se você tiver marcado a caixa de seleção, precisará confirmar essa opção.

Se sua origem não estiver incluída no conjunto de dados do CrUX, você poderá receber uma mensagem de erro como a mostrada no diagrama a seguir. Há mais de 15 milhões de origens no conjunto de dados, mas aquela que você quer pode não ter dados suficientes para ser incluído.

Captura de tela de uma mensagem de erro pop-up que diz, entre outras mensagens de erro, 'Há mais de 15 milhões de origens neste conjunto de dados, mas https://doesnotexist.origin não é um deles'
Mensagem de erro do conector da comunidade do CrUX quando uma origem não existe

Se a origem existir, a página do esquema do painel será aberta. Isso mostra todos os campos incluídos: cada tipo de conexão efetiva, cada formato, o mês de lançamento do conjunto de dados, a distribuição de desempenho de cada métrica e, claro, o nome da origem. Você não precisa fazer nem alterar nada nesta página. Basta clicar em Criar relatório para continuar.

Captura de tela do editor de esquema do dashboard do CrUX com vários campos, tipos, agregação e descrições que permitem mudá-los ou adicionar novos campos.
Esquema do painel CrUX

Usar o painel

Cada painel tem três tipos de página:

  1. Visão geral das Core Web Vitals
  2. Desempenho da métrica
  3. Informações demográficas do usuário

Cada página inclui um gráfico que mostra as distribuições ao longo do tempo para cada versão mensal disponível. À medida que novos conjuntos de dados são lançados, é possível atualizar o painel para ver as informações mais recentes.

Os conjuntos de dados mensais são lançados na segunda terça-feira de cada mês. Por exemplo, o conjunto de dados que consiste em dados de experiência do usuário do mês de maio é lançado na segunda terça-feira de junho.

Visão geral das Core Web Vitals

A primeira página apresenta uma visão geral do desempenho mensal das Core Web Vitals. Essas são as métricas de UX mais importantes em que o Google recomenda que você se concentre.

Captura de tela da visão geral das Core Web Vitals do Painel CrUX mostrando informações de métricas de LCP, INP e CLS.
Visão geral das Core Web Vitals do Painel CrUX

Use a página das Core Web Vitals para entender como a origem aparece para usuários de computadores e smartphones. Por padrão, o mês mais recente no momento em que você criou o painel está selecionado. Para alternar entre as versões mensais mais antigas ou mais recentes, use o filtro Mês na parte superior da página.

O tablet é omitido desses gráficos por padrão, mas, se necessário, é possível remover o filtro Sem tablet na configuração do gráfico de barras:

Captura de tela mostrando a edição da opção "Filtro" no Looker Studio.
Como editar o painel do CrUX para mostrar tablets na página das Core Web Vitals

Desempenho da métrica

Depois da página das Core Web Vitals, você encontra páginas independentes para todas as metrics no conjunto de dados do CrUX.

Captura de tela da página de LCP do painel do CrUX mostrando vários gráficos de barras de pilhas mudando ao longo de vários meses.
Página de LCP do painel do CrUX

Acima de cada página está o filtro Dispositivo, que pode ser usado para restringir os formatos incluídos nos dados da experiência. Por exemplo, é possível detalhar especificamente experiências de smartphone. Essa configuração é mantida em todas as páginas.

As principais visualizações nessas páginas são as distribuições mensais de experiências categorizadas como "Boa", "Precisa melhorar" e "Ruim". A legenda codificada por cores abaixo do gráfico indica a gama de experiências incluídas na categoria. Por exemplo, na captura de tela anterior, você pode ver a porcentagem de experiências "boas" de Maior exibição de conteúdo (LCP, na sigla em inglês) oscilando e piorando um pouco nos últimos meses.

As porcentagens de experiências "boas" e "ruins" no mês mais recente aparecem acima do gráfico com um indicador de diferença percentual em relação ao mês anterior. Para esta origem, experiências "boas" de LCP caíram de 3,2% para 56,04% em relação ao mês anterior.

Além disso, para métricas como LCP e outras Core Web Vitals que oferecem recomendações explícitas de percentil, você vai encontrar a métrica "P75" entre as porcentagens "boa" e "ruim". Esse valor corresponde ao 75o percentil da origem de experiências do usuário. Em outras palavras, 75% das experiências são melhores do que esse valor. É importante observar que isso se aplica à distribuição geral em todos os dispositivos na origem. Alternar dispositivos específicos com o filtro Dispositivo não recalcula o percentil.

Advertências técnicas sobre percentis

As métricas de percentil são baseadas nos dados de histograma do BigQuery.Portanto, a granularidade será aproximada: 100 ms para LCP, 25 ms para INP e 0, 05 para CLS. Em outras palavras, uma LCP P75 de 3.800 ms indica que o verdadeiro 75o percentil está em algum lugar entre 3.800 ms e 3.900 ms.

Além disso, o conjunto de dados do BigQuery usa uma técnica chamada "distribuição de agrupamentos" em que as densidades de experiências do usuário são intrinsecamente agrupadas em agrupamentos muito grosseiros de granularidade decrescente. Isso nos permite incluir densidades de minutos na cauda da distribuição sem ter que exceder quatro dígitos de precisão. Por exemplo, valores de LCP com menos de 3 segundos são agrupados em agrupamentos de largura de 200 ms. Entre 3 e 10 segundos, os agrupamentos têm 500 ms de largura. Além de 10 segundos, os agrupamentos têm 5.000 ms de largura... Em vez de ter agrupamentos de larguras variadas, a distribuição de agrupamentos garante que todos os agrupamentos tenham uma largura constante de 100 ms (o maior divisor comum) e que a distribuição seja interpolada linearmente em cada agrupamento.

Valores P75 correspondentes em ferramentas como o PageSpeed Insights não se baseiam no conjunto de dados público do BigQuery e podem fornecer valores de precisão de milissegundos.

Informações demográficas do usuário

Há duas dimensões incluídas nas páginas demográficas do usuário: dispositivos e tipos de conexão efetiva (ECTs, na sigla em inglês). Essas páginas ilustram a distribuição de visualizações de página em toda a origem para usuários de cada grupo demográfico.

A página de distribuição de dispositivos mostra o detalhamento dos usuários de smartphones, computadores e tablets ao longo do tempo. Muitas origens tendem a ter poucos ou nenhum dado de tablet, de modo que muitas vezes o valor "0%" estará suspenso na borda do gráfico.

Captura de tela da página de dispositivos do Painel CrUX mostrando como o detalhamento do dispositivo muda a cada mês.
Página de dispositivos do Painel CrUX

Da mesma forma, a página de distribuição de ECT mostra o detalhamento de experiências 4G, 3G, 2G, 2G lento e off-line.

As distribuições dessas dimensões são calculadas com o uso de segmentos dos dados do histograma da Primeira exibição de conteúdo (FCP, na sigla em inglês).

Perguntas frequentes

Estas são algumas das perguntas frequentes sobre a criação de painéis do CrUX no Looker Studio:

Quando devo usar o Painel CrUX em vez de outras ferramentas?

O painel CrUX é baseado nos mesmos dados disponíveis no BigQuery, mas você não precisa escrever nenhuma linha de SQL para extrair os dados nem se preocupar em exceder cotas sem custo financeiro. Configurar um painel é mais rápido e fácil do que exibir a consulta dos dados subjacentes. Todas as visualizações são geradas para você e você tem o controle de compartilhá-las com quem quiser.

Há alguma limitação no uso do painel CrUX?

Ser baseado no BigQuery significa que o painel CrUX também herda todas as limitações dele. Ela é restrita a dados no nível da origem na granularidade mensal.

O painel CrUX também abre mão da versatilidade dos dados brutos no BigQuery para simplificar e facilitar. Por exemplo, as distribuições de métricas são dadas apenas como "bom", "precisa de melhorias" e "ruim", ao contrário dos histogramas completos. O painel CrUX também fornece dados em nível global, e o conjunto de dados do BigQuery permite analisar países específicos.

Onde encontro mais informações sobre o Looker Studio?

Confira a página de recursos do Looker Studio para mais informações.