Criar anúncios do Gmail com HTML personalizado

Ideal para anunciantes avançados, o HTML personalizado permite criar anúncios diferentes dos modelos de anúncios do Gmail. Eles podem incluir vídeos e várias calls-to-action. Para criar anúncios do Gmail com layout personalizado, faça o upload dos seus próprios arquivos HTML personalizados no Google AdWords. 

Este artigo explica como configurar e fazer o upload dos seus anúncios personalizados do Gmail.

Antes de começar

Importante: lembre-se de que os anúncios personalizados HTML do Gmail mantêm a formatação do URL de destino e não são compatíveis com URLs finais e modelos de acompanhamento. Saiba mais sobre URLs atualizados.

 

Para a maioria dos usuários, agora o gerenciamento de contas só pode ser feito na nova experiência do Google Ads. Se você ainda estiver utilizando a experiência anterior do Google AdWords, selecione a opção Anterior abaixo. Saiba mais

Instruções

Um anúncio do Gmail com HTML personalizado é uma pasta ZIP que contém todos os arquivos do seu anúncio recolhido e expandido. Para evitar problemas, preste atenção nas rigorosas especificações de formatação detalhadas abaixo.

Os limites de tamanho gerais do seu anúncio são:

  • Toda a pasta ZIP: <1,25 MB
  • Número de arquivos: <100 arquivos
  • Tamanho do arquivo: <500 KB

Como criar seu anúncio recolhido

Para o anúncio recolhido, você precisa incluir dois arquivos na pasta ZIP:

  • A imagem do logotipo (chamada "logo.png", "logo.jpg" ou "logo.gif")
  • O arquivo de texto (chamado "teaser.txt")

Especificações da imagem do logotipo

O arquivo precisa ter o nome exato "logo.png", "logo.jpg" ou "logo.gif" e o formato do arquivo precisa ser PNG, JPG ou GIF.

  • Tamanho da imagem do logotipo: < 144 x 144
  • Tamanho do arquivo: < 500 KB
  • Formatos do arquivo: PNG, JPG ou GIF (não animado)

A imagem do logotipo é um pequeno ícone, um gráfico ou o logotipo da marca.

A imagem será exibida como um quadrado de 50 x 50 em dispositivos de resolução normal, mas aceitamos até 144 x 144 para uma visualização mais clara em algumas telas. 

Especificações do arquivo de texto

O arquivo precisa ter o nome exato "teaser.txt", e o formato do arquivo precisa ser TXT. Veja um exemplo de um arquivo de texto formatado adequadamente.

Anunciante: nome da empresa
Assunto: 20% de desconto na "nome da empresa"
Descrição: Compre produtos novos a preços reduzidos!
URL de visualização: www.example.com
Página de destino: https://www.example.com/sale 

Observação: Siga exatamente o exemplo. Lembre-se de incluir a categoria (como "Anunciante") e suas informações específicas. A tabela abaixo indica os limites de caracteres e mais orientações sobre o que incluir.

  Limites de caracteres O que incluir
Anunciante 20 O nome ou domínio da sua empresa.
Assunto 25 Seu título pode incluir uma oferta, o percentual de desconto ou um anúncio atraente.
Descrição 100 Sua descrição pode ser um breve resumo ou uma call-to-action.
URL de visualização 32 Seu URL no formato para exibição no anúncio
Página de destino sem limite URL de redirecionamento do teaser, usado como o URL de destino para cliques no "URL curto exibido pelo remetente" quando o anúncio expandido é aberto. Você pode adicionar um URL de monitoramento estático de cliques nesse campo. Essa é a página que as pessoas acessarão depois de clicar no URL de visualização.

 

Como criar seu anúncio expandido

Para o anúncio expandido, você precisa adicionar um arquivo HTML e uma pasta de imagens à pasta ZIP:

  • Pasta de imagens (chamada "Imagens") com arquivos de imagem para o anúncio expandido
  • Arquivo HTML chamado exatamente "index.html"

Especificações da pasta de imagens

  • Seu anúncio precisa ter pelo menos uma imagem e pode ter até 100 imagens. Para incorporar vídeos no seu anúncio expandido, pule para a seção de vídeo abaixo.
  • Largura máxima por imagem: 650 p
  • Altura máxima por imagem: 1.000 p. Observação: Para anúncios mais eficientes, recomendamos definir uma altura de no máximo 650 p para toda a área do anúncio, incluindo o texto e as imagens.

Especificações do arquivo HTML

Detalhes técnicos

  • URLs: o arquivo precisa conter pelo menos um URL absoluto (pode conter até 15) e todos os caracteres especiais precisam ser codificados (por exemplo, espaços, #).
  • Formatação: controle o layout com tabelas HTML padrão para garantir apresentação consistente em vários dispositivos.
  • Acompanhamento: URLs de monitoramento estáticos podem ser usados para acompanhar cliques externos. Não são permitidos pixels de rastreamento de impressões e URLs de monitoramento dinâmicos. Se você estiver usando o modelo de "anúncio HTML personalizado do Gmail", adicione os URLs de rastreamento que deseja usar no arquivo index.html e no arquivo teaser.txt.
  • Marcação: HTML (use a codificação UTF8), algumas tags HTML5 ("ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR") e alguns CSS (somente o atributo de estilo das tags, por exemplo <div style="color: black" >) são suportados.

Marcação não permitida

  • Javascript: as tags <script> serão removidas automaticamente do anúncio
  • Folhas de estilo: as tags <link> serão removidas automaticamente do anúncio
  • Flash
  • HTML5: as únicas tags suportadas são "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR"
  • Áudio
  • iFrames
  • Imagens animadas: GIFs

CSS suportado

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

Adicionar um vídeo ao arquivo HTML do anúncio expandido

  1. Como adicionar um vídeo

    Um vídeo do YouTube pode ser incorporado a um anúncio com uma janela de visualização. Quando um usuário em um computador clica na imagem de vídeo, o vídeo é reproduzido em um lightbox no Gmail. Depois que o usuário termina de assistir ao vídeo, ele volta para o anúncio expandido do Gmail. Em dispositivos móveis, o vídeo é reproduzido no player de vídeo designado pelo usuário (como no aplicativo do YouTube ou em um navegador). 

    Instruções: Para adicionar um vídeo do YouTube, codifique o link do YouTube, a fonte da imagem e o texto de visualização para adequação ao seu anúncio. Por exemplo:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Vídeo do Gmail"></a>

    Observação: Quando você visualiza o anúncio no Google AdWords, o vídeo do YouTube não aparece e não é reproduzido no lightbox.

  2. Como adicionar um vídeo em uma nova guia

    Se você deseja que o vídeo seja reproduzido no YouTube em uma nova guia, e não em um lightbox, defina a classe como "nonplayable".

    Por exemplo:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Vídeo do Gmail"></a>

  3. Importante: Inclua um botão "Reproduzir" na imagem de visualização.

    Para que as pessoas saibam que o clique na imagem reproduz um vídeo, sua imagem de visualização deve incluir algum tipo de botão de reprodução. O Google AdWords não adiciona nada a imagens de visualização para indicar que elas são vídeos.

  4. Como remover sobreposições de anúncios dos seus vídeos incorporados

    Na conta host do YouTube, você pode desativar anúncios nos seus vídeos. Saiba mais

Adicionar um formulário incorporado ao arquivo HTML do anúncio expandido

Observação: essa funcionalidade está disponível apenas para clientes da lista de permissões. 

Formulários HTML em anúncios do Gmail reduzem as etapas até a conversão. Crie o formulário utilizando HTML e o CSS suportado, e não se esqueça de usar apenas os campos da lista de campos de formulário permitidos abaixo.

Preocupações com privacidade

Se um formulário for incorporado ao anúncio, você precisará incluir um link para sua política de privacidade e estar em conformidade com a política de coleta e uso irresponsável de dados do Google AdWords.

Todas as informações inseridas nos formulários serão enviadas diretamente a você pelo método GET ou POST. Nada é enviado ou salvo nos servidores do Google. Você é responsável por processar os dados.

Ao criar formulários nos seus anúncios HTML personalizados, lembre-se de que os usuários podem hesitar ou não desejar compartilhar certas informações, especialmente ao enviar informações fora do seu website.

Considere as seguintes perguntas antes de criar um formulário HTML:

  • As informações solicitadas são desnecessárias para fornecer uma oferta relevante para o usuário?
  • Se caíssem nas mãos erradas, as informações poderiam ser usadas para prejudicar o usuário?

Se você respondeu "sim" a alguma dessas perguntas, não convém incluir formulários HTML na sua promoção.

Etapa 1. Criar seu formulário

Veja a seguir os campos permitidos em formulários HTML para anúncios no Gmail.

Informações básicas Campos de formulário permitidos
Categoria Nome (nome, sobrenome)
Endereço
Cidade
Estado
CEP
País
Endereço de e-mail
Número de telefone
Faixa etária
13 a 18
18 a 24
25 a 34
35 a 44
45 a 54
55 a 64
65 ou mais
Sexo
Melhor horário para ligar
Programa ou produto de interesse
Educação Ano de graduação
Nível de escolaridade mais alto
Local e classificados Local do serviço desejado
Tipo de serviço
Finanças/seguros
faixas para campos de valor monetário:
0 a 14.999
15.000 a 24.999
25.000 a 39.999
40.000 a 59.999
60.000 a 74.999
75.000 a 99.999
Mais de 300.000
Valor do empréstimo (faixa)
Moeda
Tipo de finanças (empréstimo, hipoteca, cartão de crédito)
Renda familiar (faixa)
Ativos para investimento (faixa)
Valor de cobertura do seguro de vida (faixa)
Membro militar
Próprio ou aluguel (carro, casa, etc.)
Avalie seu crédito
muito insatisfatório
insatisfatório
razoável
bom
excelente
Quanto vale sua casa? (faixa)
Automóveis Marca/modelo do carro
Viagens Origem ou destino
Data de partida/regresso
B2B Empresa
Função
Cargo
Número de funcionários
1 a 10
10 a 50
50 a 100
100 a 500
mais de 500

Etapa 2. Adicionar validações de formulários

Para garantir que as pessoas insiram informações válidas, você pode adicionar as validações de formulários abaixo.

Entrada não vazia: Para garantir que um campo não fique vazio, adicione "required" à entrada <input required type="text" size="25">
Entrada border-Telephone*: Para garantir um formato de número de telefone válido, adicione "x-autocompletetype="phone-full". O formato aceito será qualquer formato que tenha 10 dígitos <input type="text" x-autocompletetype="phone-full" size="25">
Entrada de e-mail*: Para garantir um formato de e-mail válido, adicione o atributo "x-autocompletetype="email". O formato aceito será uma string de texto no formato xxx@xxx.xxx. <input type="text" x-autocompletetype="email" size="25">
Entrada de código postal*: Para garantir um formato de código postal válido, adicione o atributo "x-autocompletetype="postal-code". O formato aceito será uma string que começa com cinco dígitos. <input type="text" x-autocompletetype="postal-code" size="25">

*Se o campo não for marcado como "required", ele só será validado se tiver um valor.

Links relacionados

Este artigo foi útil para você?
Como podemos melhorá-lo?
Anterior Nova