{"id":45075,"date":"2024-11-12T11:58:00","date_gmt":"2024-11-12T19:58:00","guid":{"rendered":"https:\/\/www.monetizemore.com\/?p=45075"},"modified":"2024-11-12T11:58:00","modified_gmt":"2024-11-12T19:58:00","slug":"mapeamento-de-tamanho-gam","status":"publish","type":"post","link":"https:\/\/www.monetizemore.com\/pt-br\/blog\/mapeamento-de-tamanho-gam\/","title":{"rendered":"Mapeamento de Tamanho para An\u00fancios Responsivos com o Ad Manager"},"content":{"rendered":"

\u201cResponsivo\u201d significa que o bloco de an\u00fancios se adapta automaticamente ao dispositivo onde est\u00e1 sendo veiculado. Por exemplo, ad_top_atf funciona como um bloco de an\u00fancios de 970 x 90\/728 x 90 em computadores e se transforma em um bloco de an\u00fancios de 300 x 250\/320 x 50 em dispositivos m\u00f3veis. O AdSense tem essa op\u00e7\u00e3o na hora de escolher o tamanho do bloco de an\u00fancios, que eles chamam de tamanho \u201cresponsivo\u201d. Se voc\u00ea usa tags do Google Ad Manager<\/a> e deseja fazer o mesmo, pode fazer o mapeamento de tamanho.<\/p>\n

O Google Ad Manager<\/a> pode lidar com o comportamento responsivo dos blocos de an\u00fancios usando o mapeamento de tamanho. Isso d\u00e1 aos editores a garantia de que somente os tamanhos apropriados poder\u00e3o ser veiculados, dependendo do dispositivo que o visitante estiver usando. Antigamente, inserimos c\u00f3digos manualmente, o que estava sujeito a muitos erros humanos, apenas para executar o mapeamento de tamanhos para an\u00fancios responsivos. Agora, voc\u00ea preenche os valores usando o Ad Manager Tag Generator & Tester e a ferramenta gera os c\u00f3digos para voc\u00ea.<\/p>\n

Vejamos como configur\u00e1-lo abaixo:<\/p>\n

Configura\u00e7\u00e3o de Mapeamento de Tamanho, parte 1<\/h2>\n

Passo 1:<\/strong> Defina as larguras m\u00ednimas da janela de visualiza\u00e7\u00e3o (em pixels) que voc\u00ea seguir\u00e1. Exemplo:<\/p>\n\n\n\n\n\n\n\n
Dispositivo<\/b><\/td>\nLargura M\u00ednima<\/strong><\/td>\n<\/tr>\n
Desktop<\/td>\n992 px<\/td>\n<\/tr>\n
Tablet<\/td>\n768 px<\/td>\n<\/tr>\n
Mobile<\/td>\n320 px<\/td>\n<\/tr>\n
Outro<\/td>\n0 px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Passo 2:<\/strong> Decida quantos mapas de tamanho voc\u00ea precisa. Dependendo do layout do seu site, voc\u00ea pode definir um Mapa de Tamanho que pode ser aplicado a v\u00e1rios locais ou pontos. Aqui est\u00e1 um exemplo:<\/p>\n

(top)<\/h4>\n

Mapeamento 1:<\/p>\n

992×0 – 970×250, 970×90, 728×250, 728×90, 300×250, 336×280, 1×1<\/p>\n

768×0 – 728×250, 728×90, 300×250, 336×280, 1×1<\/p>\n

320×0 – 300×250, 320×50, 320×100, 1×1<\/p>\n

0x0 – 320×50, 1×1<\/p>\n

(sidebar)<\/h4>\n

Mapeamento 2:<\/p>\n

992×0 – 300×600, 300×250, 336×280, 160×600, 1×1<\/p>\n

768×0 – 300×250, 336×280, 160×600, 1×1<\/p>\n

320×0 – 300×250, 320×50, 320×100, 1×1<\/p>\n

0x0 – 320×50, 1×1<\/p>\n

(mid-content)<\/h4>\n

Mapeamento 3:<\/p>\n

992×0 – 728×250, 728×90, 468×60, 300×250, 336×280, 1×1<\/p>\n

768×0 – 728×250, 728×90, 300×250, 336×280, 1×1<\/p>\n

320×0 – 300×250, 320×50, 320×100, 1×1<\/p>\n

0x0 – 320×50, 1×1<\/p>\n

Aqui est\u00e1 o que isso significa: observe o mapeamento 1 (acima).<\/p>\n

    \n
  • Se o dispositivo tiver pelo menos 992 px de largura<\/strong>, independentemente da altura, estes ser\u00e3o os tamanhos qualificados para veicula\u00e7\u00e3o: 970 x 250, 970 x 90, 728 x 250, 728 x 90, 300 x 250, 336 x 280, 1 x 1<\/li>\n
  • Se o dispositivo tiver pelo menos 768 px de largura, mas menos de 992 px<\/strong>, independentemente da altura, estes ser\u00e3o os tamanhos qualificados para veicula\u00e7\u00e3o: 728 x 250, 728 x 90, 300 x 250, 336 x 280, 1 x 1<\/li>\n
  • Se o dispositivo tiver pelo menos 320 px de largura, mas menos de 768 px<\/strong>, independentemente da altura, estes ser\u00e3o os tamanhos qualificados para veicula\u00e7\u00e3o: 300 x 250, 320 x 50, 320 x 100, 1 x 1<\/li>\n
  • Para qualquer dispositivo com largura menor que 320 px<\/strong>, estes s\u00e3o os tamanhos qualificados para veicula\u00e7\u00e3o: 320 x 50, 1 x 1<\/li>\n<\/ul>\n

    Estamos configurando outro Mapa de Tamanhos para a barra lateral e central porque certos tamanhos s\u00e3o inadequados para esses pontos. Por exemplo, voc\u00ea n\u00e3o pode veicular 300 x 600 no meio da p\u00e1gina e n\u00e3o pode veicular 728 x 90 na barra lateral. Portanto, voc\u00ea precisa declarar quais tamanhos s\u00e3o adequados.<\/p>\n

    Sinta-se \u00e0 vontade para criar quantos Mapas de Tamanho forem necess\u00e1rios. Voc\u00ea tamb\u00e9m pode reutilizar o mesmo mapa de tamanhos para v\u00e1rios blocos de an\u00fancios, quando aplic\u00e1vel. Por exemplo, se voc\u00ea executar tr\u00eas blocos de an\u00fancios diferentes no meio do conte\u00fado, poder\u00e1 atribuir o mesmo mapa de tamanhos para esses tr\u00eas locais de an\u00fancio, para que sigam o mesmo conjunto de regras.<\/p>\n

    Configura\u00e7\u00e3o de Mapeamento de Tamanho, parte 2<\/h2>\n

    #1 –<\/strong> Configure seus blocos de an\u00fancios no Google Ad Manager (GAM)<\/p>\n

    #2 –<\/strong> Fa\u00e7a login em https:\/\/dfpgpt.appspot.com\/<\/a><\/p>\n

    #3 –<\/strong> Insira seu ID de rede GAM<\/p>\n

    \"Mapeamento<\/p>\n

    #4 –<\/strong> Ative as Op\u00e7\u00f5es Avan\u00e7adas<\/p>\n

    \"Mapeamento<\/p>\n

    #5 –<\/strong> Ative o Mapeamento de Tamanho (Design Responsivo)<\/p>\n

    \"Mapeamento<\/p>\n

    #6 –<\/strong> Adicione o tamanho m\u00ednimo da janela de visualiza\u00e7\u00e3o e os tamanhos eleg\u00edveis correspondentes, com base nos mapas de tamanho que voc\u00ea preparou.<\/p>\n

    \"Mapeamento<\/p>\n

    #7 –<\/strong> Repita para o resto dos Mapas de Tamanho<\/p>\n

    \"Mapeamento<\/p>\n

    #8 –<\/strong> Adicione os blocos de an\u00fancios e os tamanhos de an\u00fancios correspondentes conforme configurados no Google Ad Manager.<\/p>\n

    \"Mapeamento<\/p>\n

    #9 –<\/strong> Selecione o Mapeamento de Tamanho que ser\u00e1 aplicado a cada bloco de an\u00fancios<\/p>\n

    \"Mapeamento<\/p>\n

    #10 –<\/strong> Repita para o restante dos blocos de an\u00fancios e clique em Gerar tags<\/p>\n

    \"Mapeamento<\/p>\n

    Implante a tag Header na se\u00e7\u00e3o <head> do HTML do seu site e as tags Body na se\u00e7\u00e3o <body>. Se voc\u00ea estiver usando WordPress, escolha o plugin gratuito Advanced Ads<\/a> que permite gerenciar e entregar an\u00fancios com efici\u00eancia.<\/p>\n

    Embora o mapeamento de tamanho seja uma \u00f3tima op\u00e7\u00e3o para tornar seus blocos de an\u00fancios responsivos, n\u00e3o \u00e9 o \u00fanico m\u00e9todo. Voc\u00ea tamb\u00e9m pode usar a segmenta\u00e7\u00e3o por item de linha para obter an\u00fancios responsivos.<\/p>\n

    No entanto, confiar na largura da tela do navegador para determinar os tamanhos dos an\u00fancios est\u00e1 sujeito a erros de c\u00e1lculo, uma vez que o espa\u00e7o dispon\u00edvel costuma ser mais estreito do que a tela inteira, especialmente em dispositivos desktop.<\/p>\n

    Para resolver isso, Advanced Ads fornece uma integra\u00e7\u00e3o automatizada do Google Ad Manager<\/a> que ajusta os an\u00fancios com base no espa\u00e7o real dispon\u00edvel, garantindo que eles sempre se encaixem perfeitamente sem mexer em nenhum c\u00f3digo.<\/p>\n

     <\/p>\n