Fazer um criativo expansível com o Google Web Designer

Os anúncios de expansão começam do mesmo tamanho do local em que são veiculados. Quando o usuário interage com eles, por exemplo, ao clicar em um botão, o anúncio aumenta e mostra mais conteúdo. Para criar um anúncio de expansão no Google Web Designer, comece em um arquivo em branco ou abra um modelo de expansão predefinido e adicione seu próprio texto, imagens e muito mais.

Começar do zero

Etapa 1: criar um novo arquivo

Para criar um novo criativo expansível com vídeo no Google Web Designer:

1. Abra o Google Web Designer e clique em Arquivo > Novo arquivo. A janela "Criar um novo arquivo em branco" será exibida.
2. Na lista "Anúncios", selecione Expansível.
3. Escolha Display & Video 360 como o ambiente.
4. Defina as dimensões para os tamanhos recolhido e expandido do anúncio.
5. Dê um nome ao criativo. Esse será o nome do arquivo HTML.
6. Escolha o Local no seu computador para salvar os arquivos do Google Web Designer. Insira o caminho do local ou clique no ícone de pesquisa para acessar o local desejado.
7. Defina o Modo de animação:
   1. Rápido: faz a animação do seu anúncio cena por cena. Acesse Criar animações no modo rápido na Central de Ajuda do Google Web Designer para saber mais.
   2. Avançado: faz a animação de elementos individuais em suas próprias linhas do tempo. Acesse Criar animações no modo avançado na Central de Ajuda do Google Web Designer para saber mais.
8. Clique em OK.

O Google Web Designer cria as páginas recolhida e expandida iniciais, chamadas página de banner e página expandida. Ele adiciona automaticamente um evento de área de toque à página recolhida, que expandirá o anúncio, e um evento de área de toque de fechamento à página expandida para recolher novamente o anúncio. O código inicial necessário para que o anúncio se comunique com o servidor de anúncios e colete as métricas de rastreamento também é adicionado automaticamente.

Etapa 2: configurar a Página de banner

Para configurar o anúncio recolhido na página de banner:

1. Importe as imagens arrastando-as ao cenário ou a partir do painel Biblioteca de materiais.
2. (Opcional) Crie animações ou adicione componentes integrados ou personalizados à página.
3. Quando seu banner estiver completo, selecione o componente "Área de toque" e clique no botão "Mover para cima".
4. Salve.

Para fazer com que o criativo se expanda no rollover do mouse:

1. Abra o painel "Eventos", clique no botão + e adicione um evento mouseover.
2. Selecione expand-button como o destino.
3. Selecione Mouse > mouseover como o evento.
4. Selecione Anúncio do Google > Ir para a página como a ação.
5. Selecione gwd-ad como o receptor.

Saiba mais sobre o uso de eventos no Google Web Designer

Etapa 3: configurar a Página expandida

1. Mude para a Página expandida usando o indicador de página na parte inferior do cenário .
2. Importe as imagens arrastando-as ao cenário ou a partir do painel Biblioteca de materiais.
3. (Opcional) Crie animações ou adicione componentes integrados ou personalizados à página.
4. Salve.

Adicionar uma call-to-action

1. Verifique se o anúncio tem um botão ou outro elemento de call-to-action claramente visível para o usuário clicar ou tocar.
2. Arraste o componente Área de toque da pasta "Interação" do painel "Componentes" para o cenário e posicione-o sobre a call-to-action.
3. Clique no botão de novo evento no painel "Eventos".
4. Na caixa de diálogo do evento, selecione as seguintes opções:

   Destino	O componente Área de toque (gwd-taparea_1)
   Evento	Área de toque > Toque/clique
   Ação	Anúncio do Google > Anúncio de saída Observação: uma ação semelhante, Anúncio de saída (substitui o URL), não permite que você modifique o URL fora do criativo, como no Studio ou no Campaign Manager 360, e só deve ser usada para anúncios dinâmicos.
   Receptor	gwd-ad
   Configuração	Código de métricas: é um rótulo (por exemplo, "CTA") que facilita a compreensão dos relatórios. URL: é o URL de saída. Recolher na saída: marque essa opção para recolher os anúncios expansíveis fechados pelo usuário. Pausar mídia na saída: marque essa opção para que a reprodução de áudio e vídeo seja interrompida quando o usuário fechar o anúncio. Página recolhida ao sair: é a página exibida quando o usuário fecha anúncios expansíveis.

   

Opcional: adicionar um vídeo

Se você quiser adicionar um vídeo ao seu criativo, use o componente Vídeo ou o componente YouTube. Se o vídeo for hospedado no YouTube, use o componente YouTube. Se não for, use o componente Vídeo para estes formatos HTML5 compatíveis: 

• .MP4
• .OGG/.OGV
• .WEBM

Começar por um modelo

Os modelos são anúncios pré-prontos em tamanhos muito usados, que geralmente usam estilos e recursos comuns. Ao substituir as imagens e outros recursos, é possível criar rapidamente um anúncio útil e funcional.

Etapa 1: criar um novo arquivo com base em um modelo

1. Selecione Novo a partir do modelo... no menu "Arquivo". Isso abre a Galeria de modelos.
2. Para encontrar modelos de banner da Google Marketing Platform:
   1. Clique em Pesquisar .
   2. Expanda a seção "Tipos de anúncio" e selecione Expansível. 
   3. Expanda a seção "Plataformas" e selecione Display & Video 360.
   4. Feche o painel de filtros. Uma lista de layouts compatíveis será exibida.
3. Clique em Usar layout para o layout desejado.
4. Se houver várias opções de tamanho, selecione o tamanho desejado.
5. Dê um nome ao novo arquivo (obrigatório).
6. É possível alterar o local em que o arquivo será salvo. Você pode inserir o caminho do local ou clicar no ícone de pasta para acessar o local desejado.
7. Clique em Criar.

Etapa 2: adicionar ou substituir imagens no modelo

Os modelos de anúncio de expansão do Google Web Designer incluem uma Página de banner, que é o anúncio recolhido, e uma Página expandida, que é o anúncio expandido. Por padrão, você verá a Página de banner quando criar o novo arquivo. Mude para a Página expandida usando o indicador de página na parte inferior do cenário .

Cada página tem recursos de marcação e códigos de descrição para cada elemento. Comece substituindo cada recurso de marcação genérico por um apropriado para o anúncio. Os anúncios criados a partir de modelos podem ser completamente modificados. É possível adicionar ou excluir recursos, componentes e eventos conforme você quiser para criar um anúncio mais personalizado.

A função "Trocar imagem" permite substituir uma imagem por uma da Biblioteca ou uma da qual você faça upload. Isso será muito útil ao substituir imagens de estoque a partir de um modelo.

Substituir uma imagem em um anúncio criado a partir de um modelo:

1. Clique com o botão direito do mouse na imagem que você quer substituir.
2. Selecione Trocar imagem… no menu pop-up.
3. Na caixa de diálogo, selecione uma imagem da Biblioteca ou clique no botão de adição  para selecionar uma imagem no computador.
4. Clique em OK.

Visualizar o criativo pronto

Para visualizar seu anúncio no Google Web Designer:

1. Clique no botão de visualização na parte inferior da tela . O Google Web Designer reconhece os navegadores compatíveis com seu sistema e permite que você escolha qual deles usar.
2. Para selecionar o navegador no qual quer visualizar seu trabalho, clique na seta de seleção à direita do botão de visualização e selecione o navegador na lista.
3. No carregamento da página, revise o anúncio recolhido.
4. Clique na call-to-action para ver o anúncio se expandir.

Opcional: configurar um criativo expansível multidirecional

Os criativos expansíveis multidirecionais podem se expandir na direção adequada com base no posicionamento deles em um site. Siga as etapas abaixo para elaborar um criativo expansível multidirecional.

Economize tempo começando a partir do modelo de expansão multidirecional no Google Web Designer. O modelo inclui a maior parte do código e da configuração das etapas abaixo.

Configuração multidirecional

Etapa 1: aumentar o tamanho do cenário

1. Aumente o tamanho da página expandida a fim de permitir espaço suficiente para a área expandida necessária para cada direção.

   Por exemplo, se o tamanho do criativo recolhido for 300 x 250, o do criativo expandido for 600 x 250, e ele puder se expandir para a direita ou esquerda, defina o tamanho da página expandida para 900 x 250.
   
   

2. Use o indicador de página para voltar à Página de banner .
3. Clique no botão de visualização da expansão do anúncio . 
4. Reposicione a área visível de expansão para que o criativo recolhido fique no centro. Saiba mais sobre o uso do botão de visualização da expansão do anúncio na Central de Ajuda do Google Web Designer.
5. Mude para a Página expandida usando o indicador de página na parte inferior do cenário .
6. Ajuste a posição dos elementos do seu criativo para que correspondam ao novo tamanho do cenário.

Etapa 2: adicionar código de posicionamento

1. Clique na Visualização do código.
2. Role a página para baixo até a tag de script com o código gwd-init-code: 
   <script type="text/javascript" id="gwd-init-code">
3. Adicione o código para permitir a expansão multidirecional e adicione manipulação de eventos. Acesse a página do SDK de HTML5 do Studio para ver métodos e exemplos de API.

   Código de exemplo 

   Este exemplo se expande somente para a direita e esquerda. Consulte a página do SDK de HTML5 do Studio para saber mais detalhes.

   Enabler.setIsMultiDirectional(true);
   
   // Edite a posição dos elementos com base na direção da expansão.
   function expandStartHandler() {
     var direction = Enabler.getExpandDirection().toString();
     if (direction == 'tr' || direction == 'br') {
       // Adicione aqui o código para posicionar os elementos quando se expandirem para a direita.
       // Altere o btnClose para que corresponda ao código do seu botão "Fechar" e modifique a posição.
       btnClose.style.left = '875px';
     } else {
       // Adicione aqui o código para posicionar os elementos quando se expandirem para a esquerda.
       // Altere o btnClose para que corresponda ao código do seu botão "Fechar" e modifique a posição.
       btnClose.style.left = '10px';
     }
   }
   
   Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);

4. Adicione o código para posicionar cada elemento do criativo em cada direção de expansão que será compatível.

Quando seu criativo estiver concluído, publique-o no Studio.