Google Ads, Adsense, Analytics, Search Console, SEO...

01. Conhecendo as principais ferramentas

📌 Definição

O Google possui diversas ferramentas que podem ser utilizadas em diferentes etapas de um projeto web.

Ferramenta	Principal finalidade
Google Ads	Criar campanhas de publicidade.
Google AdSense	Monetizar conteúdo através de publicidade.
Google Analytics	Analisar o comportamento dos usuários no site.
Google Search Console	Acompanhar presença e indexação na Pesquisa Google.
Perfil da Empresa no Google	Gerenciar a presença de uma empresa na Pesquisa e no Google Maps.

⚠️ Atenção

Google Ads e Google AdSense possuem nomes parecidos, mas são ferramentas com objetivos diferentes.

02. Google Ads

📌 O que é?

O Google Ads é a plataforma de publicidade do Google. Ela permite criar campanhas para divulgar produtos, serviços, empresas, aplicativos e outros conteúdos.

🎯 Para que serve?

Divulgar uma empresa.
Promover produtos.
Divulgar serviços.
Atrair visitantes para um site.
Criar campanhas publicitárias.
Acompanhar resultados das campanhas.

🔎 Exemplo

Situação:

Uma empresa possui um site de criação de sites. Ela pode utilizar publicidade para divulgar seus serviços para pessoas que estejam pesquisando por determinados termos relacionados ao serviço.

💰 Conceitos importantes

Termo	Significado
Impressão	Quando um anúncio é exibido.
Clique	Quando uma pessoa interage com o anúncio.
CPC	Custo por clique.
Conversão	Uma ação considerada importante, como um cadastro ou contato.

💡 Para o desenvolvedor

O desenvolvedor normalmente não precisa ser especialista em campanhas para desenvolver o site. Porém, precisa saber preparar corretamente o site para receber códigos, páginas de destino, eventos de conversão e ferramentas de análise.

03. Google AdSense

📌 O que é?

O Google AdSense é uma plataforma que permite que proprietários de sites monetizem conteúdo através da exibição de anúncios.

🔄 Ads x AdSense

Google Ads	Google AdSense
Quem anuncia.	Quem disponibiliza espaço para anúncios.
Paga para divulgar.	Pode receber receita conforme as regras e resultados da plataforma.

🧩 Como funciona?

O proprietário possui um site.
Cria/configura sua conta no AdSense.
Adiciona o site ao AdSense.
O Google verifica o site conforme seus processos.
O desenvolvedor insere o código fornecido pelo AdSense.
Os anúncios podem ser exibidos de acordo com as configurações da conta e disponibilidade.

⚠️ Importante

Ter o código instalado não significa que qualquer site automaticamente começará a gerar receita. Existem requisitos, políticas e processos de aprovação e configuração.

04. Entendendo o código do Google AdSense

📌 O que é o script?

O script é um trecho de código fornecido pelo Google AdSense para integrar o site ao serviço de publicidade.

💻 Exemplo de código

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous">
</script>

📖 Entendendo o código

O atributo async permite que o carregamento do script seja realizado de forma assíncrona.

O endereço src aponta para o script utilizado pelo AdSense.

O trecho ca-pub-... representa o identificador do editor.

📍 Onde colocar?

O Google orienta colocar o código do AdSense entre as tags:

<head>

    CÓDIGO DO ADSENSE

</head>

⚠️ Nunca invente o seu ID

O ca-pub-XXXXXXXXXXXXXXXX utilizado no exemplo é fictício.

Em um projeto real, utilize o código fornecido pela sua própria conta do Google AdSense.

05. Criando um bloco de anúncio

📌 Definição

Um bloco de anúncio é uma área específica do site preparada para receber publicidade do AdSense.

💻 Exemplo

<ins
    class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890"
    data-ad-format="auto"
    data-full-width-responsive="true">
</ins>

<script>

    (adsbygoogle = window.adsbygoogle || []).push({});

</script>

🔍 Entendendo as partes

Código	Função
adsbygoogle	Classe utilizada pelo AdSense.
data-ad-client	Identificação da conta do editor.
data-ad-slot	Identificação do bloco de anúncio.
data-ad-format	Define informações relacionadas ao formato.
data-full-width-responsive	Permite utilizar comportamento responsivo conforme a configuração do anúncio.

💡 Regra importante

Não altere aleatoriamente os atributos fornecidos pelo AdSense. Quando criar um bloco, copie o código disponibilizado pela plataforma.

06. Anúncios automáticos do AdSense

📌 Definição

Os anúncios automáticos permitem que o AdSense analise a página e determine locais onde anúncios podem ser exibidos de acordo com as configurações realizadas na conta.

🧩 Funcionamento

O site é configurado no AdSense.
O código é obtido na conta.
O código é inserido nas páginas.
O Google processa as informações necessárias.
Os anúncios podem ser exibidos conforme configuração, disponibilidade e políticas.

⚠️ Não espere o anúncio imediatamente

A ausência imediata de anúncio não significa necessariamente que o código esteja errado. A própria documentação do Google informa que pode haver um período até que anúncios sejam exibidos.

07. Arquivo ads.txt

📌 O que é?

O arquivo ads.txt é utilizado para declarar quais vendedores de publicidade estão autorizados a vender inventário publicitário do site.

📁 Localização

meu-site/
│
├── index.html
├── style.css
├── script.js
│
└── ads.txt

📖 Importante

O conteúdo do ads.txt não deve ser inventado pelo aluno. O código deve ser obtido na plataforma correspondente.

08. Google Analytics

📌 O que é?

O Google Analytics é uma ferramenta de análise que permite compreender como os usuários interagem com um site ou aplicativo.

📊 O que podemos analisar?

Usuários.
Sessões.
Páginas visualizadas.
Eventos.
Origem dos visitantes.
Dispositivos utilizados.
Algumas informações geográficas agregadas.
Conversões configuradas.

💻 Exemplo

Imagine que um site recebeu muitos visitantes. O Analytics pode ajudar o responsável pelo projeto a descobrir quais páginas receberam mais interação e de onde os visitantes chegaram.

💡 Para o desenvolvedor

O Analytics é importante porque transforma comportamento em dados que podem ajudar na tomada de decisões sobre o site.

09. Instalando a Tag do Google

📌 O que é a Tag do Google?

A Tag do Google é utilizada para enviar informações para produtos Google configurados no site.

💻 Exemplo didático

<!-- Google tag -->

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

<script>

    window.dataLayer = window.dataLayer || [];

    function gtag(){
        dataLayer.push(arguments);
    }

    gtag('js', new Date());

    gtag(
        'config',
        'G-XXXXXXXXXX'
    );

</script>

📖 O que está acontecendo?

O primeiro script carrega a biblioteca da Tag do Google.

O dataLayer funciona como uma estrutura utilizada para organizar informações destinadas às ferramentas de medição.

A função gtag() é utilizada para enviar configurações e eventos.

O valor G-XXXXXXXXXX representa um ID fictício de medição.

⚠️ Não copie o ID do exemplo

O aluno deve utilizar o ID fornecido pela própria propriedade configurada no Google Analytics.

10. Eventos no Google Analytics

📌 O que é um evento?

Evento representa uma interação ou ocorrência que pode ser registrada para análise.

💻 Exemplo didático

<button onclick="registrarClique()">
    Conheça o projeto
</button>

<script>

function registrarClique(){

    gtag(
        'event',
        'clique_projeto',
        {
            'categoria': 'navegacao'
        }
    );

}

</script>

📖 Atenção

O exemplo acima é didático. Em um projeto real, os eventos devem ser planejados de acordo com os objetivos da aplicação e com a implementação atual da ferramenta.

11. Google Search Console

📌 O que é?

O Google Search Console é uma ferramenta que ajuda proprietários e desenvolvedores a acompanhar a presença do site na Pesquisa Google.

🔎 O que podemos acompanhar?

Indexação.
Problemas encontrados pelo Google.
Consultas de pesquisa.
Impressões.
Cliques.
CTR.
Posição média.
Inspeção de URLs.
Sitemaps.

📖 Importante

Estar cadastrado no Search Console não significa automaticamente que uma página aparecerá em primeiro lugar no Google.

A ferramenta ajuda a compreender a presença do site e problemas relacionados à pesquisa e indexação.

12. Indexação: o que significa?

📌 Definição

Indexação é o processo pelo qual mecanismos de pesquisa analisam e armazenam informações sobre páginas que poderão ser consideradas para exibição nos resultados.

🔄 Um modelo simplificado

Site
  ↓
Google encontra a URL
  ↓
Rastreamento
  ↓
Análise da página
  ↓
Indexação
  ↓
Página pode aparecer na Pesquisa

⚠️ Indexação não é ranking

Uma página estar indexada não significa que ela aparecerá na primeira posição dos resultados.

13. Sitemap.xml

📌 O que é?

Sitemap é um arquivo que apresenta URLs importantes de um site para ajudar mecanismos de pesquisa a descobrir e compreender a estrutura de URLs.

📁 Estrutura

meu-site/
│
├── index.html
├── sobre.html
├── contato.html
│
└── sitemap.xml

💻 Exemplo

<?xml version="1.0" encoding="UTF-8"?>

<urlset
    xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

    <url>

        <loc>
            https://www.exemplo.com.br/
        </loc>

    </url>

    <url>

        <loc>
            https://www.exemplo.com.br/sobre.html
        </loc>

    </url>

</urlset>

📖 Importante

O sitemap não é enviado como um arquivo diretamente para dentro do painel do Google como se fosse um upload comum. O arquivo precisa estar publicado no site.

Depois, sua URL pode ser informada no Search Console.

14. robots.txt

📌 O que é?

O arquivo robots.txt contém regras que orientam rastreadores sobre quais URLs ou diretórios podem ou não ser rastreados.

💻 Exemplo

User-agent: *

Allow: /

Sitemap: https://www.exemplo.com.br/sitemap.xml

🔍 Entendendo

User-agent: identifica o rastreador ao qual a regra se aplica.
Allow: permite o rastreamento do caminho indicado.
Sitemap: informa a localização do sitemap.

⚠️ Cuidado

robots.txt não deve ser tratado como mecanismo de segurança ou como forma de esconder informações confidenciais.

Para conteúdo que não deve ser público, é necessário utilizar mecanismos adequados de autenticação e autorização.

15. SEO básico no HTML

📌 O que é SEO?

SEO significa Search Engine Optimization, ou otimização para mecanismos de pesquisa.

É um conjunto de práticas utilizadas para tornar páginas mais compreensíveis e úteis para mecanismos de pesquisa e principalmente para as pessoas.

💻 Exemplo de estrutura

<head>

    <title> Desenvolvimento Web | OLECRAM TI </title>

    <meta name="description" content="Aprenda desenvolvimento web.">

    <meta name="robots" content="index, follow">

</head>

🧩 Elementos importantes

Elemento	Função
title	Define o título do documento.
description	Fornece uma descrição da página.
robots	Pode fornecer instruções relacionadas ao rastreamento/indexação.

💡 SEO não é apenas meta tag

Um bom trabalho de SEO envolve conteúdo útil, estrutura adequada, acessibilidade, desempenho, experiência do usuário, links, organização das páginas e diversos outros fatores.

16. URL canônica

📌 O que é?

A URL canônica ajuda a indicar qual URL representa a versão principal de uma página quando existem versões semelhantes ou duplicadas.

💻 Exemplo

<link rel="canonical" href="https://www.exemplo.com.br/pagina">

⚠️ Atenção

Não coloque uma URL canônica aleatória. Ela precisa representar corretamente a versão principal da página.

17. Open Graph

📌 O que é?

Open Graph é um conjunto de metadados utilizado para controlar informações utilizadas quando uma página é compartilhada em plataformas que suportam esse padrão.

💻 Exemplo

<meta property="og:title" content="Meu Site">

<meta property="og:description" content="Conheça nosso site.">

<meta property="og:image" content="https://www.exemplo.com.br/imagem.jpg">

<meta property="og:url" content="https://www.exemplo.com.br/">

📖 Por que isso é importante?

Quando alguém compartilha uma página, essas informações podem ajudar a definir título, descrição, imagem e URL apresentados pela plataforma.

18. Perfil da Empresa no Google

📌 Antigo Google Meu Negócio

O serviço conhecido anteriormente como Google Meu Negócio passou a ser chamado de Perfil da Empresa no Google (Google Business Profile).

📍 Para que serve?

Apresentar informações da empresa.
Exibir endereço quando aplicável.
Mostrar horário de funcionamento.
Informar telefone.
Apresentar o site.
Exibir avaliações.
Aparecer em recursos do Google, incluindo o Maps, conforme elegibilidade e configuração.

💻 Exemplo

Uma empresa que possui um site pode complementar sua presença digital criando e mantendo corretamente seu Perfil da Empresa.

💡 Para o desenvolvedor

O desenvolvedor pode ajudar o cliente a preparar o site, endereço, telefone, links e informações consistentes entre os canais digitais.

19. Estrutura profissional do projeto

📁 Uma estrutura organizada

Um projeto web pode conter diversos arquivos além do HTML, CSS e JavaScript.

meu-site/
│
├── index.html
├── sobre.html
├── contato.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
├── imagens/
│   ├── logo.png
│   └── capa.jpg
│
├── sitemap.xml
│
├── robots.txt
│
└── ads.txt

📖 O que cada parte representa?

HTML: estrutura das páginas.
CSS: aparência.
JavaScript: comportamento e interatividade.
imagens: arquivos gráficos.
sitemap.xml: mapa de URLs.
robots.txt: regras para rastreadores.
ads.txt: informações relacionadas à publicidade autorizada.

20. Onde colocar cada código?

📌 Uma das dúvidas mais comuns

Muitos alunos conseguem copiar um código, mas não sabem exatamente onde colocá-lo.

Por isso, é importante compreender a estrutura do documento HTML.

<!doctype html>

<html>

    <head>

        <!-- Metadados -->

        <!-- SEO -->

        <!-- Analytics / Tag do Google -->

        <!-- Código principal do AdSense -->

    </head>


    <body>

        <!-- Conteúdo do site -->

        <!-- Blocos de anúncios -->

        <!-- Conteúdo -->

    </body>

</html>

Recurso	Local comum
title	head
meta description	head
Google Analytics / Tag do Google	head
Código principal do AdSense	head
Bloco de anúncio	body
Sitemap	arquivo sitemap.xml
Robots	arquivo robots.txt
Ads.txt	arquivo ads.txt

21. O que é a tag <script>?

📌 Definição

A tag <script> é utilizada para inserir ou carregar código JavaScript em uma página HTML.

💻 JavaScript interno

<script>

    alert("Olá!");

</script>

💻 JavaScript externo

<script
    src="js/script.js">
</script>

📖 E o Google?

Ferramentas como Analytics e AdSense também utilizam scripts para integrar o site aos respectivos serviços.

💡 Não confunda

Um script externo não significa necessariamente que ele pertence ao seu projeto.

Quando você utiliza um script de uma plataforma, ele normalmente é carregado a partir de um servidor externo.

22. Como verificar os scripts pelo navegador

📌 DevTools

Os navegadores modernos possuem ferramentas de desenvolvimento que permitem analisar o HTML, CSS, JavaScript, rede e outros recursos da página.

⌨️ Atalho

F12

🔎 Console

O Console ajuda a identificar mensagens, avisos e erros JavaScript.

🌐 Network

A aba Network permite observar requisições feitas pelo navegador.

🧱 Elements

A aba Elements permite visualizar a estrutura HTML renderizada e os estilos aplicados.

💻 Exemplo de investigação

Abra o site.
Pressione F12.
Abra Console.
Verifique mensagens de erro.
Abra Network.
Atualize a página.
Observe as requisições.

23. Privacidade, Cookies e LGPD

📌 Por que isso aparece nesta aula?

Ferramentas de análise, publicidade e outros serviços podem envolver tratamento de informações sobre usuários.

Por isso, o desenvolvimento de um site precisa considerar privacidade, transparência e as regras aplicáveis.

📄 Documentos importantes

Política de Privacidade.
Política de Cookies, quando aplicável.
Avisos e mecanismos de consentimento quando necessários.
Informações claras sobre o tratamento de dados.

⚠️ O desenvolvedor não deve simplesmente copiar uma política

Documentos de privacidade devem corresponder ao funcionamento real do site e às práticas adotadas pelo responsável pelo tratamento.

💡 Relação com a aula anterior

Esta parte complementa diretamente o conteúdo de LGPD, Política de Privacidade e Política de Cookies estudado anteriormente.

24. Consentimento e gerenciamento de cookies

📌 O que é?

Dependendo da tecnologia utilizada, da finalidade, do contexto e da legislação aplicável, pode ser necessário informar o usuário e obter ou gerenciar consentimentos antes de determinadas tecnologias serem utilizadas.

🍪 Exemplo conceitual

Usuário acessa o site
        ↓
Site apresenta informações
        ↓
Usuário escolhe suas preferências
        ↓
Sistema registra a preferência
        ↓
Scripts são executados conforme a configuração permitida

⚠️ Não use este exemplo como sistema jurídico pronto

O funcionamento correto de um mecanismo de consentimento depende do projeto, das tecnologias utilizadas e das obrigações aplicáveis.

25. Erros comuns ao instalar ferramentas Google

❌ Copiar código incompleto

O aluno copia somente uma parte do código e esquece outras linhas necessárias.

❌ Alterar o ID

O ID de uma propriedade ou conta é substituído incorretamente.

❌ Colocar bloco de anúncio fora do body

O código de bloco de anúncio precisa estar em um local adequado dentro da estrutura HTML.

❌ Achar que o anúncio deve aparecer imediatamente

A exibição pode depender da configuração da conta, processamento e disponibilidade.

❌ Não testar o site

Depois de instalar qualquer código externo, o desenvolvedor deve verificar o funcionamento.

❌ Confundir Ads com AdSense

Ads está relacionado à publicidade de anunciantes. AdSense está relacionado à monetização de sites através de anúncios.

26. Cuidados com scripts externos

📌 Regra profissional

Todo script externo adicionado ao site deve ter uma finalidade conhecida e uma origem confiável.

✅ Antes de adicionar um script

Saiba de onde ele veio.
Saiba para que ele serve.
Leia a documentação oficial.
Evite copiar código desconhecido.
Teste o site depois da instalação.
Observe erros no Console.

💡 Regra de ouro

Não coloque no seu site um código que você não consegue explicar pelo menos de forma básica.

27. Checklist de um site preparado

📋 Checklist profissional

Utilize esta lista para revisar seu projeto.

28. Projeto Prático

🏆 Desafio

Agora você deverá preparar um site para publicação considerando os principais conceitos apresentados nesta aula.

📝 Etapa 1 — Preparar o site

Crie a estrutura HTML.
Configure o CSS.
Crie a versão responsiva.
Organize as imagens.
Revise os textos.

📝 Etapa 2 — SEO

Configure o title.
Configure a description.
Revise os headings.
Crie URLs organizadas.
Avalie a necessidade de canonical.

📝 Etapa 3 — Arquivos

Crie sitemap.xml.
Crie robots.txt.
Adicione ads.txt somente se a solução de publicidade utilizada fornecer esse arquivo/conteúdo.

📝 Etapa 4 — Google

Configure o Google Analytics.
Configure o Search Console.
Envie/declare o sitemap conforme o processo do Search Console.
Configure o Perfil da Empresa quando houver uma empresa elegível para esse recurso.
Configure o AdSense somente quando fizer sentido para o projeto e a conta estiver habilitada.

📝 Etapa 5 — Privacidade

Revise a Política de Privacidade.
Revise o uso de cookies.
Avalie o mecanismo de consentimento.
Verifique os scripts utilizados.

📝 Etapa 6 — Testes

Abra o site no navegador.
Pressione F12.
Verifique o Console.
Verifique Network.
Teste links.
Teste o site no celular.
Teste novamente depois de cada alteração.

🎯 Estrutura final esperada

meu-site/
│
├── index.html
│
├── sobre.html
│
├── contato.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
├── imagens/
│
├── sitemap.xml
│
├── robots.txt
│
└── ads.txt

🏆 29. Desafio Final

🚀 Missão do aluno

Escolha um projeto de site e prepare-o para funcionar como um projeto profissional.

O projeto deverá conter:

💡 Regra profissional

Um bom desenvolvedor não entrega apenas uma página que "funciona".

Ele pensa em estrutura, acessibilidade, desempenho, manutenção, segurança, privacidade, análise, publicação e experiência do usuário.

30. Resumo da Aula

Ferramenta	Pergunta que ela ajuda a responder
Google Ads	Como divulgar através de publicidade?
Google AdSense	Como monetizar conteúdo com publicidade?
Google Analytics	Como os visitantes estão interagindo com o site?
Search Console	Como o site está aparecendo e sendo acompanhado na Pesquisa Google?
Perfil da Empresa	Como apresentar uma empresa na Pesquisa e no Google Maps?
Sitemap	Quais URLs importantes existem no site?
robots.txt	Quais regras de rastreamento foram declaradas para os rastreadores?
SEO	Como tornar o site mais compreensível, útil e encontrável?

🎓 O que você aprendeu?

Você aprendeu que o desenvolvimento de um site envolve muito mais do que escrever HTML, CSS e JavaScript.

Um projeto profissional precisa considerar publicação, pesquisa, análise, divulgação, privacidade, manutenção e experiência do usuário.

📘 Aula Complementar

01. Conhecendo as principais ferramentas

02. Google Ads

🎯 Para que serve?

🔎 Exemplo

💰 Conceitos importantes

03. Google AdSense

🔄 Ads x AdSense

🧩 Como funciona?

04. Entendendo o código do Google AdSense

💻 Exemplo de código

📍 Onde colocar?

05. Criando um bloco de anúncio

💻 Exemplo

🔍 Entendendo as partes

06. Anúncios automáticos do AdSense

🧩 Funcionamento

07. Arquivo ads.txt

📁 Localização

08. Google Analytics

📊 O que podemos analisar?

09. Instalando a Tag do Google

💻 Exemplo didático

10. Eventos no Google Analytics

💻 Exemplo didático

11. Google Search Console

🔎 O que podemos acompanhar?

12. Indexação: o que significa?

🔄 Um modelo simplificado

13. Sitemap.xml

📁 Estrutura

💻 Exemplo

14. robots.txt

💻 Exemplo

🔍 Entendendo

15. SEO básico no HTML

💻 Exemplo de estrutura

🧩 Elementos importantes

16. URL canônica

💻 Exemplo

17. Open Graph

💻 Exemplo

18. Perfil da Empresa no Google

📍 Para que serve?

19. Estrutura profissional do projeto

20. Onde colocar cada código?

21. O que é a tag <script>?

💻 JavaScript interno

💻 JavaScript externo

22. Como verificar os scripts pelo navegador

⌨️ Atalho

🔎 Console

🌐 Network

🧱 Elements

23. Privacidade, Cookies e LGPD

📄 Documentos importantes

24. Consentimento e gerenciamento de cookies

🍪 Exemplo conceitual

25. Erros comuns ao instalar ferramentas Google

26. Cuidados com scripts externos

✅ Antes de adicionar um script

27. Checklist de um site preparado

28. Projeto Prático

📝 Etapa 1 — Preparar o site

📝 Etapa 2 — SEO

📝 Etapa 3 — Arquivos

📝 Etapa 4 — Google

📝 Etapa 5 — Privacidade

📝 Etapa 6 — Testes

🏆 29. Desafio Final

O projeto deverá conter:

30. Resumo da Aula