Como instalar código de anúncios AMP Adsense responsivo no blogger AMP

Na verdade, na página AMPProject forneceu um guia para instalar um anúncio AMP resposivo com amp-ad que ofereça suporte a vários layouts, como layouts de preenchimento, fixo, de altura fixa, itens flexíveis, nodisplay e responsivo. Este (amp-ad) suporta muitos provedores de anúncios, incluindo o Adsense.

E agora o Adsense realiza a detecção automática do código do anúncio instalado na página AMP e fornece ou sugere a instalação de um código de anúncio AMP responsivo do Adsense, que é ligeiramente diferente do código de anúncio AMP do AMPProject.

Mas ainda há muitos blogueiros que estão confusos para instalar um código de anúncio AMP responsivo do Adsense, porque quando instalado para substituir a noite do código de anúncio AMP anterior para parecer desconhecido.

Agora, o Adsense detecta automaticamente o código do anúncio que está instalado na página AMP e sugerirá para a instalação do código de anúncio AMP responsivo, fornecendo diretamente um código de anúncio AMP AdSense responsivo que seja ligeiramente diferente do código amp-addo AMPProject.

Acontece código do anúncio responsivo AMP a partir de Adsense usando a unidade de largura viewwidth ou vwou ajustar a largura da tela (o código é o código width="100vw"). Então, quando instalado apenas para substituir o código amp-adque foi instalado anteriormente, os anúncios parecem atender a largura da tela. Isso não é bom quando os anúncios são vistos na tela da área de trabalho porque os anúncios colidirem com a barra lateral e outros porque os anúncios aparecem tão amplo quanto a tela.

O código de anúncio AMP responsivo do Adsense é o seguinte:


<amp-ad width="100vw" height=320

     type="adsense"

     data-ad-client="ca-pub-3597723085513015"

     data-ad-slot="8128208329"

     data-auto-format="rspv"

     data-full-width>

  <div overflow></div>

</amp-ad>

Mas, se instalado no Blogger, há algum código que deve ser ajustado para que o código possa ser armazenado em Editar HTML. O código que será instalado no Editar HTML parece ser abaixo.



<amp-ad width="100vw" height="320"

     type="adsense"

     data-ad-client="ca-pub-3597723085513015"

     data-ad-slot="8128208329"

     data-auto-format="rspv"

     data-full-width="">

  <div overflow=""></div>

</amp-ad>

O código acima não é alterado, apenas ajustando-se ao código recebido Editar Blogger HTML. Como neste código de anúncio AMP responsivo, AdSense aconselha a não editar ou alterar o código para que os anúncios possam aparecer na página AMP.

E com a altura do anúncio de 320 pixels, o Adsense também explica que este tamanho de anúncio AMP responsivo é seguro para armazenar acima da dobra e abaixo da dobra .

E tenha em mente que esses anúncios AMP sensíveis ao Adsense são dedicados apenas a dispositivos móveis, de modo que, para este código de anúncio AdSense AdSense responsivo, não interfere no aspecto da área de trabalho, precisamos de um truque para instalá-lo.

Neste caso, instalamos 2 códigos de anúncio a partir do mesmo slot que aparecerá apenas na área de trabalho e no celular, usando apenas a etiqueta condicional móvel e de desktop. Portanto, existem anúncios que aparecem apenas na área de trabalho e existem anúncios que aparecem apenas no celular.

Use o código como abaixo.


<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

<!-- kode iklan ini tampil hanya di desktop saja -->

<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' height='250' layout='fixed-height' type='adsense'>

</amp-ad>

</b:if>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

<!-- kode iklan ini tampil hanya di mobile saja -->

<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' type='adsense' width='100vw'>

  <div overflow=''/>

</amp-ad>

</b:if>

Dessa forma, a exibição da área de trabalho não mudará enquanto no celular aparecerão anúncios com a tela do telefone móvel de largura total porque é um blog na tela móvel também é tela cheia.

Se algo não for entendido, pergunte no campo de comentários. Espero que seja útil.

UPDATE
Acontece depois que experimentei usar tags mediapara adicionar a mídia de consulta à medida que se aplica à imagem, o anúncio ainda aparece no limite da mídia de consulta que especificamos. Assim, com este anúncio não é visível fora da consulta de mídia que mostramos, isso fará com que o visual do blog permaneça limpo sem o espaço destruído suficientemente grande por causa desse anúncio AMP responsivo, se os usuários da área de trabalho acessarem nossa URL do blog móvel.

Adicione o código media="(max-width: 414px)"(o código max-width: 414pxpode ser configurado como desejado) no código do anúncio AMP responsivo do Adsense para ser o seguinte.

<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' type='adsense' width='100vw' media='(max-width: 414px)'>
  <div overflow=''/>
</amp-ad>