COMO

HowTo Home

Menus

Barra de ícones Ícone do menu Acordeão Abas Abas Verticais Cabeçalhos da guia Guias de página inteira Guias ao passar o mouse Navegação superior Topnav responsivo Barra de navegação com ícones Menu de pesquisa Barra de pesquisa Barra Lateral Fixa Navegação da página Barra lateral responsiva Navegação em tela cheia Menu fora da tela Botões de navegação lateral Barra lateral com ícones Menu de rolagem horizontal Menu Vertical Navegação inferior Navegação inferior responsiva Links de navegação da borda inferior Links de menu alinhados à direita Link do menu centralizado Links do menu de largura igual Menu Fixo Barra deslizante na rolagem Ocultar a barra de navegação na rolagem Reduzir a barra de navegação ao rolar Barra de navegação fixa Barra de navegação na imagem Suspensões suspensas Clique em listas suspensas Lista suspensa em cascata Suspensão no Topnav Suspensão no Sidenav Lista suspensa da barra de navegação de resp. Menu de subnavegação Soltar-se Megamenu Menu Móvel Menu cortina Barra lateral recolhida Painel lateral recolhido Paginação Migalhas de pão Grupo de botões Grupo de botões verticais Barra Social Fixa Navegação de pílulas Cabeçalho responsivo

Imagens

Apresentação de slides Galeria de apresentação de slides Imagens modais Caixa de luz Grade de imagem responsiva Grade de imagens Galeria de guias Desvanecimento da sobreposição de imagem Slide de sobreposição de imagem Zoom de sobreposição de imagem Título da sobreposição de imagem Ícone de sobreposição de imagem Efeitos de imagem Imagem em preto e branco Texto da imagem Blocos de texto de imagem Texto de imagem transparente Imagem de página inteira Formulário na imagem Imagem do herói Desfocar imagem de fundo Alterar Bg na rolagem Imagens lado a lado Imagens arredondadas Imagens de avatar Imagens responsivas Centro de imagens Miniaturas Borda ao redor da imagem Conheça o time Imagem Fixa Virar uma imagem Agite uma imagem Galeria de portfólio Portfólio com Filtragem Zoom de imagem Lupa de Imagem Controle deslizante de comparação de imagens Favicon

Botões

Botões de alerta Botões de contorno Botões divididos Botões animados Botões de desvanecimento Botão na imagem Botões de mídia social Leia mais Leia menos Botões de carregamento Botões de download Botões de pílula Botão de notificação Botões de ícone Botões Próximo/Anterior Mais botão na navegação Botões de bloqueio Botões de texto Botões redondos Botão de rolagem para o topo

Formulários

forma de login Formulário de inscrição Formulário de pagamento Formulário de Contato Formulário de login social Formulário de registro Formulário com ícones Boletim de Notícias Formulário empilhado Formulário responsivo Formulário pop-up Formulário embutido Limpar campo de entrada Ocultar setas numéricas Copiar texto para a área de transferência Pesquisa animada Botão Pesquisar Pesquisa em tela cheia Campo de entrada na barra de navegação Formulário de login na barra de navegação Caixa de seleção/rádio personalizado Seleção personalizada Interruptor Marque a caixa de seleção Detectar Caps Lock Botão de gatilho ao entrar Validação de senha Alternar visibilidade da senha Formulário de várias etapas autocompletar Desativar preenchimento automático Desativar a verificação ortográfica Botão de upload de arquivo Validação de entrada vazia

Filtros

Lista de filtros Filtrar Tabela Elementos de filtro Filtro suspenso Lista de classificação Tabela de feitiços

Tabelas

Mesa listrada de zebra Mesas de centro Tabela de largura total Tabelas lado a lado Tabelas responsivas Tabela de comparação

Mais

Vídeo em tela cheia Caixas modais Excluir modal Linha do tempo Indicador de rolagem Barras de progresso Barra de Habilidade Controles deslizantes de intervalo Dicas de ferramentas Exibir elemento flutuante Pop-ups Dobrável Calendário HTML inclui Lista de afazeres Carregadores Classificação por estrelas Avaliação do utilizador Efeito de sobreposição Fichas de contato Cartões Virar cartão Cartão de perfil Cartão do produto Alertas Chamar Notas Rótulos Círculos Estilo RH Cupom Listar Grupo Lista sem marcadores Texto responsivo Texto recortado Texto brilhante Rodapé Fixo Elemento pegajoso Altura igual Clearfix Flutuadores responsivos Lanchonete Janela de tela cheia Desenho de rolagem Rolagem suave Rolagem Gradiente BG Cabeçalho Fixo Encolher cabeçalho na rolagem Tabela de preços Paralaxe Proporção da tela Iframes responsivos Alternar gostar/não gostar Alternar ocultar/mostrar Alternar modo escuro Alternar texto Alternar classe Adicionar turma Remover classe Classe ativa Vista em Árvore Remover propriedade Detecção off-line Encontrar Elemento Oculto Redirecionar página da Web Zoom ao passar o mouse Flip Box Centralizar verticalmente Botão central em DIV Transição ao passar o mouse Setas; flechas Formas Link para Download Elemento de altura total Janela do navegador Barra de rolagem personalizada Ocultar barra de rolagem Mostrar/Forçar a barra de rolagem Aparência do dispositivo Borda editável de conteúdo Cor do espaço reservado Cor de seleção de texto Cor do marcador Linha vertical Divisores Animar ícones Temporizador de contagem regressiva Máquina de escrever Em breve página Mensagens de bate-papo Janela de bate-papo pop-up Tela dividida Depoimentos Contador de Seções Apresentação de slides de cotações Itens de lista que podem ser fechados Pontos de interrupção típicos do dispositivo Elemento HTML arrastável Consultas de mídia JS Marcador de sintaxe Animações JS Comprimento da String JS Exponenciação JS Parâmetros padrão JS Obter URL atual Obter tamanho atual da tela Obter elementos Iframe

Local na rede Internet

Crie um Site Gratuito Faça um site Faça um site estático Faça um site (W3.CSS) Faça um site (BS3) Faça um site (BS4) Faça um site (BS5) Criar e visualizar um site Crie um site de árvore de links Criar um portfólio Crie um currículo Faça um site de restaurante Faça um site de negócios Faça um Webbook Site central Seção de contato Sobre a página Cabeçalho grande Exemplo de site

Rede

Layout de 2 colunas Layout de 3 colunas Layout de 4 colunas Grade de Expansão Exibição de grade de lista Layout de Coluna Mista Cartões de coluna Esquema Zig Zag Esquema do blogue

o Google

Gráficos do Google Fontes do Google Pareamentos de fontes do Google Configuração do Google Analytics

Conversores

Converter peso Converter temperatura Converter comprimento Velocidade de conversão

Blogue

Obter um trabalho de desenvolvedor Torne-se um desenvolvedor front-end.

Como configurar o Google Analytics

O Google Analytics é usado para visualizar e entender o tráfego da web.

É grátis e fácil de usar.

Você pode personalizá-lo para muitos casos de uso.

Funciona fora da caixa.

É rápido de configurar. Obtenha seus insights hoje!

Criar meu site gratuito ❯

Pule a leitura sobre o Google Analytics. Leve-me diretamente para o primeiro passo. Vá para o primeiro passo

O que é o Google Analytics

O Google Analytics é uma solução de análise da web.

É desenvolvido e suportado pelo Google.

A versão mais recente chama-se Google Analytics 4.

Ele pode ser usado para visualizar dados como público, visualizações de página, sessões e dados demográficos e eventos.

Por que ativar o Google Analytics

Entenda seu tráfego na web para tomar melhores decisões.

Entenda e melhore o funil de vendas.

Aprenda experimentando (por exemplo, testes a/b).

O Google tem outra solução chamada Google Optimize. Esta solução é feita para testes.


Para quem é o Google Analytics

O Google Analytics é útil para quem tem um site.

Ele fornece informações sobre quem usa seu site e como eles interagem com ele.

Além disso, a interface é fácil de entender.

Você não precisa de um histórico de análise para usar e navegar no serviço.


Como configurar o Google Analytics passo a passo

O Google Analytics pode ser configurado de duas maneiras : A Global Website Tag (gtag.js) ou o Google Tag Manager .

A maneira mais fácil é usar a Tag Global do Site.

Este tutorial usará a abordagem The Global Website Tag.


Preparações

Decida qual editor de código usar e configure seu ambiente.

O W3Schools criou um editor de código fácil de usar chamado W3Schools Spaces . Cadastre-se e comece em poucos cliques.

Comece de graça ❯

Crie seu arquivo index.html para estar pronto para inserir o código.

Toda configuração. Vamos lá!


Configurar o Google Analytics: a tag global do site


Etapa 1: criar uma conta do Google Analytics

Vá para o Analytics: crie uma conta ou faça login no Analytics

O link no parágrafo acima leva você à página de destino do Google Analytics.

Clique no botão "Iniciar gratuitamente".

página de destino

Passo 2: Entre na página de boas-vindas

Depois de criar uma conta ou entrar, você é bem-vindo à solução.

Pressione o botão "Iniciar medição" para prosseguir.

Página de boas-vindas

Etapa 3: configuração da conta

Você tem duas decisões a tomar aqui.

  1. Digite o nome da sua conta.
  2. Decida quais dados você deseja compartilhar.
  3. Clique no botão "Avançar".

Uma conta pode ter mais de um ID de rastreamento. Você pode acompanhar mais de um site com uma conta.

Visão geral da configuração da conta

Etapa 4: configuração da propriedade

Propriedade é o serviço que você mede, como um site, aplicativo, árvore de links etc.

  1. Insira um nome de propriedade.
  2. Digite seu fuso horário.
  3. Insira a moeda que você usa.
  4. Clique no botão "Avançar".
Visão geral da configuração da propriedade

Etapa 5: adicionar informações comerciais

O Analytics usa as informações para personalizar sua experiência.

  1. Selecione a categoria do seu setor.
  2. Selecione o tamanho do negócio.
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
Detalhes das informações comerciais

Step 6: Terms of Service Agreement

Read and understand the terms of service.

Tick the GDPR box and click the "I accept" button if you agree.

Visão geral dos termos e condições

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
Visão geral da comunicação por e-mail

Step 8: Select platform

Chose the platform where you are collecting data.

Then, click the relevant platform to continue.

We are continuing with "Web" as the example in this tutorial.

Selecione a visão geral da plataforma

Step 9: Data stream setup

Enter data stream details.

  1. The URL to your site.
  2. The name that you want to give the stream.
  3. Decide if you are to enable enhanced measurement or not.
  4. Click on the "Create stream" button to continue.
  5. The enhanced measurement can give the data more context. Improving your understanding of the traffic.

    Visão geral da configuração do fluxo de dados

    Step 10: Web stream overview

    Here you can see a detailed overview of the web stream.

    Visão geral dos detalhes do stream da Web

    Here are the key takeaways from the overview.

    1. Stream URL.

    The Stream URL is the link to the connected site.

    URL de transmissão

    2. Measurement ID

    The Measurement ID is the identifier for your data stream.

    It has a format of G-XXXXXXX.

    ID de medição

    Google Analytics 4 uses Measurement ID. Older versions use Tracking ID. You can not have both.

    3. Tagging instructions

    Decide to use Global site tag (gtag.js) or Tag manager.

    This tutorial will use the Global site tag.

    Installing the Global site tag is the easiest and quickest way of getting it up and running.

    instruções de marcação

    Step 11: Global site tag (gtag.js)

    Click the "Global site tag (gtag.js)" row.

    Tag global do site

    Here you can see a code snippet.

    The code snippet is a script to allow Google to measure data on your site.

    You can see the Measurement ID in the second last line in the code snippet.

    The code snippet

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

    gtag('config', 'G-XXXXXXX');
    </script>

    Step 12: Enter the code snippet

    Copy the code snippet.

    Make sure to include your Measurement ID.

    Locate the <head> tag in your HTML.

    Paste the code snippet just below the <head> tag.

    Save and publish the code.

    Adicionar trecho de código

    We used W3Schools Spaces in this example.


    Step 13: Test that it works

    Ensure that you have successfully saved and published the code snippet with the correct Measurement ID.

    Open the URL for the site you have connected to the data stream.

    Click on "Real time" on the menu to the left.

    Confirm that you see yourself as an active user.

    Congrats. You have successfully enabled Google Analytics for your site!

    Analytics dashboard

    Explore Google Analytics

    Recommended related topics are Tag manager and Events

    Spend time in the service to learn about your user activity, commerce, demographics, device, and referrals.


    Tip: Ever heard of W3Schools Spaces? It is a personal space where you can make a website from scratch or use a template and host it for free.

    It has everything you need in the browser.

    Get started in a few clicks.

    Start now for free ❯

    * no credit card required