Configuração de Anúncios Nativos
Criando uma Anúncio nativo zona é simples e, ainda assim, poderosamente personalizável. Você pode usar processos ligeiramente diferentes para configurar uma zona de anúncio nativo, dependendo das suas necessidades:
Cenário A: Você simplesmente quer configurar uma zona de anúncio, escolher a proporção das imagens da zona de anúncio nativo e depois definir o tamanho da zona de anúncio no seu site para corresponder.
Cenário B: Você quer configurar a zona de anúncio para corresponder a um tamanho ou proporção de imagem personalizado, para que a zona de anúncio tenha a mesma aparência do seu site e se encaixe perfeitamente.
Cenário C: Você tem uma zona no seu site de um tamanho específico e quer criar uma zona de anúncio que se encaixe nela e fique boa.
Seja qual for o cenário que você escolher, a primeira coisa que precisa fazer é criar uma zona de Anúncio Nativo.
Criando uma Zona de Anúncio Nativo
Quando estiver autenticado como Publisher, clique em Sites e Zonas, Nova zona, e expanda a Nativo secção, selecione o formato de Anúncio Nativo Widget de Recomendação e clique em Seguinte.
Preencha os detalhes da zona e clique em Seguinte.
Neste cenário, você define a proporção das imagens no Painel de Administração, e não há necessidade de definir o tamanho total da zona de anúncios. Ao usar o Layout Rápido, a zona de anúncio que você criar se ajustará automaticamente ao tamanho do contentor em que a colocar.
Passo 3
Depois de escolher a proporção, use a caixa de seleção para escolher se pretende mostrar texto ou não e, em seguida, decida onde ele será exibido.
Este texto consiste num Título e uma Descrição. Pode ativá-los e desativá-los individualmente nas Título e Descrição secções, se quiser.
Verifique a pré-visualização à direita para ver como a sua zona de anúncio fica e ajuste as definições novamente, se necessário.
Passo 5
Verifique a pré-visualização para ambos Desktop e Mobile no lado direito do ecrã. Pode definir onde ocorre o ponto de quebra entre a vista de desktop e mobile no menu suspenso de Ponto de quebra para mobile de Opções avançadas.
O ponto de quebra pode ser definido para 800px para iPad, 450px para mobile e Não responsivo. Quando alteramos o ponto de quebra, isso muda se as nossas definições na secção Layout para Desktop afetam o desktop e o iPad, ou apenas o próprio desktop.
Quando estiver satisfeito com o aspeto da pré-visualização, clique em Criar.
Neste cenário, pretende poder alterar o tamanho da imagem e o espaçamento do anúncio para corresponder ao seu site. Faria isto se realmente quiser que os anúncios nativos pareçam fazer parte do conteúdo editorial do seu site.
Passo 2
No Definições da Imagem menu suspenso, selecione Tamanho Personalizado e defina a largura e a altura das imagens para corresponder ao seu site. Se o site contiver uma meta tag e for responsivo, quando o site for visualizado, as imagens também responderão à medida que o tamanho do ecrã diminui. Informações sobre o Tamanho do Widget e o Tamanho da Imagem serão exibidas no canto superior direito acima da pré-visualização.
Passo 6
Verifique a pré-visualização para ambos Desktop e Mobile no lado direito do ecrã. Pode definir onde ocorre o ponto de quebra entre a vista de desktop e mobile no menu suspenso de Ponto de quebra para mobile de Opções avançadas.
O ponto de quebra pode ser definido para 800px para iPad, 450px para mobile e Não responsivo. Quando alteramos o ponto de quebra, isso muda se as nossas definições na secção Layout para Desktop afetam o desktop e o iPad, ou apenas o próprio desktop.
Quando estiver satisfeito com o aspeto da pré-visualização, clique em Criar.
Neste cenário, pretende poder definir o tamanho da zona de anúncio para corresponder ao que o seu site precisa e ajustar as definições para garantir que os anúncios são exibidos corretamente.
Passo 5
Verifique a pré-visualização para ambos Desktop e Mobile no lado direito do ecrã. Pode definir onde ocorre o ponto de quebra entre a vista de desktop e mobile no menu suspenso de Ponto de quebra para mobile de Opções avançadas.
O ponto de quebra pode ser definido para 800px para iPad, 450px para mobile e Não responsivo. Quando alteramos o ponto de quebra, isso muda se as nossas definições na secção Layout para Desktop afetam o desktop e o iPad, ou apenas o próprio desktop.
Quando estiver satisfeito com o aspeto da pré-visualização, clique em Criar.
Selecionar Não responsivo no Ponto de quebra para mobile
Quando o Ponto de quebra para mobile está definido como Não responsivo em Opções avançadas, a modal abaixo aparecerá no ecrã.
Ao clicar em CONTINUAR na modal, será apresentado o layout para desktop dos anúncios em todos os dispositivos, incluindo mobile e tablet.
O layout para mobile deixará de ser editável pelo utilizador quando Não responsivo for selecionado.
As definições de imagem são atualizadas para o tamanho personalizado predefinido (Largura - 200px e altura - 200px) se não tiverem sido guardadas anteriormente.
Usar CSS Personalizado com Anúncios Nativos
No CSS Personalizado secção, pode adicionar CSS personalizado para garantir que a zona de anúncio é exibida corretamente no seu site. As classes CSS mais importantes são fornecidas como ponto de partida. Saiba mais sobre CSS aqui.
Classes CSS para anúncios nativos
Há cinco classes CSS fornecidas na caixa para começar, e pode colar formatação adicional conforme entender. Estas cinco classes CSS estilizam os elementos mais importantes do anúncio nativo da seguinte forma:
.exo-native-widget-outer-container
Estiliza todo o contentor do widget.
.exo-native-widget-item
Estiliza os contentores dos itens individuais.
.exo-native-widget-item-image
Estiliza a imagem.
.exo-native-widget-item-title
Estiliza o texto do título.
.exo-native-widget-item-text
Estiliza o texto da descrição
Classes CSS adicionais
Também pode estilizar o anúncio nativo usando estas classes CSS adicionais:
.exo-native-widget
Envolve o widget inteiro.
.exo-native-widget-header
Envolve os elementos do cabeçalho.
.exo-native-widget-outer-container
Envolve todos os anúncios.
.exo-native-widget-item-container
Envolve a caixa de anúncio.
.exo-native-widget-item-image-wrapper
Envolve a imagem na caixa de anúncio.
.exo-native-widget-item-image-ratio
Define a proporção da imagem do anúncio.
.exo-native-widget-item-content
Envolve todo o texto da caixa de anúncio.
.exo-native-widget-item-content-box
Isto envolve o título, a descrição e a marca do contentor do anúncio.
.exo-native-widget-item-brand
Estiliza a marca do anúncio.
Exemplos
Os exemplos seguintes mostram como os Publishers podem adaptar os estilos CSS na configuração da Zona de Anúncio Nativo de acordo com as suas necessidades.
Última atualização
Isto foi útil?