> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/publishers/pt/sites-e-zonas/configuracao-de-anuncios-nativos.md). # Configuração de anúncios nativos Criando uma [Anúncio nativo](/publishers/pt/sites-e-zonas/create-zone.md#recommendation-widget) é 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úncios, escolher a proporção das imagens da zona de anúncio nativo e depois definir o tamanho da zona de anúncios no seu site para corresponder. * **Cenário B**: Você quer configurar a zona de anúncios para corresponder a um tamanho ou proporção de imagem personalizados, para que a zona de anúncios 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úncios que se encaixe nela e fique boa. Seja qual for o cenário que escolher, a primeira coisa que precisa fazer é criar uma zona de anúncio nativo. ## Criando uma Zona de Anúncio Nativo Quando estiver logado como Publicador, 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**. ![Criar Zona Nativa](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/1lsZ4Ki3CIL173vBDbzo/assets/hires/create-zone-native.png) Preencha os detalhes da zona e clique em **Seguinte**. {% tabs %} {% tab title="Cenário A: Layout rápido: Definir a proporção" %} Neste cenário, 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úncios que criar adaptará automaticamente ao tamanho do contêiner em que a colocar. {% stepper %} {% step %} ### Passo 1 ![Passo Nativo 1](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/i4nnDybTXZj0jYx8l8ie/assets/hires/native/sca-step1.png) Selecione o **Layout rápido** separador. Na **Layout do Desktop** secção, defina o número de colunas e linhas de anúncios que quer no desktop. {% endstep %} {% step %} ### Passo 2 ![Passo Nativo 2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/XcQLr7Fi2GR8u2O7oLcD/assets/hires/native/sca-step2.png) Depois, escolha a proporção das suas imagens no **Definições de Imagem** menu suspenso. Pode escolher entre **1:1**, **4:3** ou **16:9**, para corresponder às miniaturas no seu site. {% endstep %} {% step %} ### Passo 3 ![Passo Nativo 3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/5LzyX7rTkfZEucmCbY04/assets/hires/native/sca-step3.png) * Depois de escolher a proporção, use a caixa de seleção para escolher se quer mostrar texto ou não e depois decida onde ele será mostrado. * 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 desejar. * Verifique a pré-visualização à direita para ver como a sua zona de anúncios fica e ajuste as definições novamente, se necessário. {% endstep %} {% step %} ### Passo 4 ![Passo Nativo 4](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/pXcT9dbHa7ocZdeuSgGC/assets/hires/native/sca-step4.png) * Repita os passos 1-3 acima na **Layout Mobile** secção para configurar a sua zona de anúncios para dispositivos móveis. {% endstep %} {% step %} ### Passo 5 ![Passo Nativo 5](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png) * 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 visualização desktop e mobile no **Ponto de quebra móvel** menu suspenso de **Opções avançadas**. * O ponto de quebra pode ser definido para **800px** para iPad, **450px** para mobile e **Sem responsividade**. Quando alteramos o ponto de quebra, isso altera se as nossas definições na secção Layout do Desktop afetam o desktop e o iPad, ou apenas o desktop. * Quando estiver satisfeito com o aspeto da pré-visualização, clique em **Criar**. {% endstep %} {% step %} ### Passo 6 ![Passo Nativo 6](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png) * Copie o **Tag HTML da Zona** e adicione-o ao seu site. * A zona de anúncios ajustará automaticamente para 100% do contêiner onde colocar a tag. Ou seja, quanto maior o contêiner, maior serão tanto a zona como os anúncios. {% endstep %} {% endstepper %} {% endtab %} {% tab title="Cenário B: Layout rápido: Definir um tamanho de imagem personalizado" %} Neste cenário, quer poder alterar o tamanho da imagem e o espaçamento do anúncio para corresponder ao seu site. Faria isto se quisesse mesmo que os anúncios nativos parecessem fazer parte do conteúdo editorial do seu site. {% stepper %} {% step %} ### Passo 1 ![Passo Nativo 7](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/esjgXHOuLYDy2kSfiWXV/assets/hires/native/scb-step1.png) * Selecione o **Layout rápido** separador. Na **Layout do Desktop** secção, defina o número de colunas e linhas de anúncios que quer no desktop. {% endstep %} {% step %} ### Passo 2 ![Passo Nativo 8](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/9knI85T5uv4S2k0ennMD/assets/hires/native/scb-step2.png) * No **Definições de 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ção sobre o **Tamanho do widget** e o **Tamanho da imagem** será exibida no canto superior direito, acima da pré-visualização. {% endstep %} {% step %} ### Passo 3 ![Passo Nativo 9](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/YWchSf0txs1p9pbnCBXb/assets/hires/native/scb-step3.png) * Depois de definir o tamanho da imagem, escolha se quer mostrar texto ou não, usando a **Texto** caixa de seleção e escolha onde ele será mostrado. * Verifique a pré-visualização à direita para ver como a sua zona de anúncios fica e ajuste as definições novamente, se necessário. {% endstep %} {% step %} ### Passo 4 ![Passo Nativo 10](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/A8dhcTNINaI7ni1fz9Ho/assets/hires/native/scb-step4.png) * Repita os passos 1-3 na **Layout Mobile** secção para configurar a sua zona de anúncios para dispositivos móveis. {% endstep %} {% step %} ### Passo 5 ![Passo Nativo 11](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4EatUeZ6VmU4VsaUQpfE/assets/hires/native/scb_advance1.png) * No **Opções avançadas** secção, pode definir quantos píxeis de **Espaçamento vertical** e **Espaçamento horizontal** quer em torno de cada anúncio. {% hint style="info" %} **Nota**: Alterar estas definições irá alterar o tamanho total da zona de anúncios. {% endhint %} {% endstep %} {% step %} ### Passo 6 ![Passo Nativo 12](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png) * 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 visualização desktop e mobile no **Ponto de quebra móvel** menu suspenso de **Opções avançadas**. * O ponto de quebra pode ser definido para **800px** para iPad, **450px** para mobile e **Sem responsividade**. Quando alteramos o ponto de quebra, isso altera se as nossas definições na secção Layout do Desktop afetam o desktop e o iPad, ou apenas o desktop. * Quando estiver satisfeito com o aspeto da pré-visualização, clique em **Criar**. {% endstep %} {% step %} ### Passo 7 ![Passo Nativo 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png) * Copie o **Tag HTML da Zona** e adicione-o ao seu site. * Certifique-se de que o tamanho da zona de anúncios no seu site corresponde ao tamanho da zona que acabou de criar. {% endstep %} {% endstepper %} {% endtab %} {% tab title="Cenário C: Layout personalizado: Definir um tamanho fixo da zona" %} Neste cenário, quer poder definir o tamanho da zona de anúncios para corresponder ao que o seu site precisa e ajustar as definições para garantir que os anúncios sejam exibidos corretamente. {% stepper %} {% step %} ### Passo 1 ![Passo Nativo 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/JEhQvAhXNjExOj7GXOyw/assets/hires/native/scc-step1.png) Selecione o **Layout personalizado** separador. Na **Layout do Desktop** secção, defina a **Largura** e o **Altura** da Zona de Anúncio total que deseja criar. {% endstep %} {% step %} ### Passo 2 ![Passo Nativo 14](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/WVwRdNmMUtNGQnymV67U/assets/hires/native/scc-step2.png) Depois, escolha quantas **Colunas** e **Linhas** de anúncios deseja exibir na zona de anúncios. Verifique a pré-visualização à direita para ver quais definições funcionam para o tamanho que escolheu. {% endstep %} {% step %} ### Passo 3 ![Passo Nativo 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/oObBcmxtsFqPjD2pa1fl/assets/hires/native/scc-step3.png) Depois de escolher quantas colunas e linhas quer, escolha se quer mostrar texto ou não, usando a **Texto** caixa de seleção e escolha onde ele é mostrado usando a **Posição do texto** menu suspenso. {% endstep %} {% step %} ### Passo 4 ![Passo Nativo 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/wdY8i3TWgXoyIWW3SYrW/assets/hires/native/scc-step4.png) Repita os passos 1-3 na **Layout Mobile** secção para configurar a sua zona de anúncios para dispositivos móveis. {% endstep %} {% step %} ### Passo 5 ![Passo Nativo 16](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png) * 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 visualização desktop e mobile no **Ponto de quebra móvel** menu suspenso de **Opções avançadas**. * O ponto de quebra pode ser definido para **800px** para iPad, **450px** para mobile e **Sem responsividade**. Quando alteramos o ponto de quebra, isso altera se as nossas definições na secção Layout do Desktop afetam o desktop e o iPad, ou apenas o desktop. * Quando estiver satisfeito com o aspeto da pré-visualização, clique em **Criar**. {% endstep %} {% step %} ### Passo 6 ![Passo Nativo 17](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png) Copie o **Tag HTML da Zona** e adicione-o ao seu site. {% endstep %} {% endstepper %} {% endtab %} {% endtabs %} ## Selecionar Sem responsividade no Ponto de quebra móvel * Quando o Ponto de quebra móvel é definido como Sem responsividade nas Opções avançadas, o modal abaixo aparecerá no ecrã. ![Sem responsividade2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/AHKGWus2UFehm3E9QMTe/assets/hires/unresponsive2.png) ![Sem responsividade3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/MbemiUHb7Szd9C1r4JWZ/assets/hires/unresponsive3.png) * Clicar em **CONTINUAR** no modal servirá o layout de desktop para anúncios em todos os dispositivos, incluindo telemóvel e tablet. * O layout Mobile deixará de ser editável pelo utilizador quando Sem responsividade for selecionado. * As definições da imagem são atualizadas para o tamanho personalizado predefinido (Largura - 200px e altura - 200px) se não tiverem sido guardadas anteriormente. ## Utilizar CSS personalizado com Anúncios Nativos ![banner](https://4037347725-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGoSwRYjxsR1XS6va6yLj%2Fuploads%2FbUrcdZCax7qachURBVTS%2Fimage.png?alt=media\&token=75616bc9-e5e7-42a2-8c9b-34707a1e0bc2) No **CSS personalizado** secção, pode adicionar CSS personalizado para garantir que a zona de anúncios é exibida corretamente no seu site. As classes CSS mais importantes são fornecidas como ponto de partida. Saiba mais sobre CSS [aqui](https://www.w3schools.com/css/default.asp). {% hint style="info" %} **Nota**: Esteja ciente de que as alterações no CSS personalizado não aparecerão na pré-visualização: só aparecerão no seu site. {% endhint %} ### Classes CSS para anúncios nativos Há cinco classes CSS fornecidas na caixa para começar, e pode colar estilos adicionais como achar necessário. Estas cinco classes CSS estilizam os elementos mais importantes do anúncio nativo da seguinte forma: ![CSS do anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ThwwsRHFlTOSbIoMqI1E/assets/hires/native-ad-css-class.png) | Classe | Ação | | ---------------------------------- | ---------------------------------------------- | | .msg-native-widget-outer-container | Estiliza todo o contêiner do widget. | | .msg-native-widget-item | Estiliza os contêineres dos itens individuais. | | .msg-native-widget-item-image | Estiliza a imagem. | | .msg-native-widget-item-title | Estiliza o texto do título. | | .msg-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: | Classe | Ação | | ------------------------------------- | ----------------------------------------------------------------- | | .msg-native-widget | Envolve todo o widget. | | .msg-native-widget-header | Envolve os elementos do cabeçalho. | | .msg-native-widget-outer-container | Envolve todos os anúncios. | | .msg-native-widget-item-container | Envolve a caixa do anúncio. | | .msg-native-widget-item-image-wrapper | Envolve a imagem na caixa do anúncio. | | .msg-native-widget-item-image-ratio | Define a proporção da imagem do anúncio. | | .msg-native-widget-item-content | Envolve todo o texto da caixa do anúncio. | | .msg-native-widget-item-content-box | Isto envolve o título, a descrição e a marca do bloco do anúncio. | | .msg-native-widget-item-brand | Estiliza a marca do anúncio. | **Exemplos** * Os exemplos seguintes mostram como os Publishers podem adaptar estilos CSS na configuração da Zona de Anúncio Nativo consoante as suas necessidades. {% stepper %} {% step %} #### 1. Para colocar a caixa de texto sobre a imagem. ![exemplo de CSS de anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/QFAzxUnKNOild5gSn0VS/assets/hires/native-ad-css-text-on-image.png) ```css .msg-native-widget-item-content { position: absolute !important; bottom: 0px !important; z-index: 3 !important; top: unset !important; height: 50px !important; left: 15px; } ``` {% endstep %} {% step %} #### 2. Para modificar o tamanho da caixa de texto. ![exemplo de CSS de anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/qx3YHuopQjx13mXCcF6v/assets/hires/native-ad-css-size-of-text-box.png) ```css .msg-native-widget-item-content { height: 50px !important; } ``` {% endstep %} {% step %} #### 3. Para colocar a caixa de texto sobre a imagem e adicionar um fundo à caixa de texto com opacidade. ![exemplo de CSS de anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rrwKCULO65AOG3mF2Y5z/assets/hires/native-ad-css-text-on-image-with-background.png) ```css .msg-native-widget-item-content { position: absolute !important; bottom: 0px !important; z-index: 3 !important; top: unset !important; height: 50px !important; background-color: black !important; opacity: 0.7 !important; } .msg-native-widget-item-title { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .msg-native-widget-item-text { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .msg-native-widget-item-brand { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } ``` {% endstep %} {% step %} #### 4. Para arredondar as bordas da imagem. ![exemplo de CSS de anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/FwVaN0LAs4cUEaw1RaTy/assets/hires/native-ad-css-round-the-corners.png) ```css .msg-native-widget-item-image { border-radius: 5% !important; } ``` {% endstep %} {% step %} #### 5. Para definir um estilo para a fonte. Desta forma, o Publisher pode usar fontes disponíveis no seu site e outras além das disponíveis na configuração da Zona. ![exemplo de CSS de anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4VgfwQ8IQHImagcqHtFr/assets/hires/native-ad-css-other-options.png) ```css .msg-native-widget-item-title, .msg-native-widget-item-text, .msg-native-widget-item-brand { font-family: fantasy !important; } ``` {% endstep %} {% step %} #### 6. Para adicionar espaçamento entre a imagem e o texto, para que o texto possa ficar mais próximo ou mais afastado da imagem. Também pode usar padding-bottom para adicionar espaçamento abaixo do texto. ![exemplo de CSS de anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/zusqVYVxOAml6RhFfaHw/assets/hires/native-ad-css-change-padding.png) ```css .msg-native-widget-item-content { padding: 30px !important; } ``` {% endstep %} {% step %} #### 7. Para personalizar a cor de fundo da caixa de texto, de modo que afete apenas a caixa de texto que fica abaixo de cada imagem, deixando o espaço entre as imagens e as caixas transparente ou com uma cor de fundo diferente. ![exemplo de CSS de anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/H08catOYIpWoAcmXJHoh/assets/hires/native-ad-css-customise-background-color.png) ```css .msg-native-widget-item-content { background-color: #ABE1FA !important; padding: 10px !important; } .msg-native-widget-outer-container { background-color: white !important; padding: 10px !important; } .msg-native-widget-item-title { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .msg-native-widget-item-text { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .msg-native-widget-item-brand { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } ``` {% endstep %} {% step %} #### 8. Para adicionar uma borda que cubra uma imagem e a sua caixa de texto. Isto ajudará a separar cada imagem dentro desse Widget Nativo. ![exemplo de CSS de anúncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ZPr4F1I8Cbu9MhAnXpGy/assets/hires/native-ad-css-set-border.png) ```css .msg-native-widget-item-container { border: 10px #0073B7 solid !important; padding: 10px !important; } .msg-native-widget-outer-container { margin: 10px !important; } ``` {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.exoclick.com/publishers/pt/sites-e-zonas/configuracao-de-anuncios-nativos.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.