How To Install Ads Code AMP Responsive Adsense On Blog AMP
How To Install Ads Code AMP Responsive Adsense On Blog AMP - Actually in the AMPProject page has provided a guide to install a resposive AMP ad with amp-ad that supports multiple layouts such as fill layouts, fixed, fixed-height, flex-items, nodisplay, and responsive. This (amp-ad) supports many ad providers including Adsense.
And now Adsense performs automatic detection of ad code installed on the AMP page and provides or suggests the installation of a responsive AMP ad code from Adsense that is slightly different from the AMP ad code from AMPProject.
But there are still many bloggers who are confused to install a responsive AMP ad code from Adsense because when installed to replace the previous AMP ad code night to appear unfamiliar.
Now Adsense automatically detects the ad code installed on the AMP page and will advise for the installation of the responsive AMP ad code by directly assigning a responsive Adsense AMP ad code slightly different from the amp-ad code of AMPProject.
It turns out that the responsive AMP ad code from Adsense uses a width unit of viewwidth or vw or adjusts the width of the screen (the code appears width = "100vw"). So when installed just to replace the amp-ad code that was previously installed, the ads appear to meet the width of the screen. This is not good when ads are viewed on the desktop screen because the ads will collide with the sidebar and others because the ads appear as wide as the screen.
The responsive AMP ad code from Adsense is as follows:
But if installed in Blogger, there are some code that must be adjusted so that the code can be stored in Edit HTML. The code that will be installed in Edit HTML looks like below.
The above code is not changed, just adjusting to the code received Edit Blogger HTML. Because in this responsive AMP ad code Adsense advises not to edit or change the code so that ads can appear on the AMP page. And with 320 pixel ad height, Adsense also explains that this responsive AMP ad size is safe to store above the fold and below the fold.
And keep in mind that these Adsense responsive AMP ads are devoted to mobile only, so for this responsive Adsense AMP ad code does not interfere with the desktop look, we need a trick to install it. In this case we install 2 ad code from the same slot that will appear on desktop only and mobile only by using mobile and desktop conditional tag. So there are ads that appear on the desktop only and there are ads that appear on the mobile only.
Please use code like below.
That way the desktop display will not change while in the mobile will appear ads with full width mobile phone screen because it is a blog on mobile display is also full screen.
Then Please add the code media="(max-width: 414px)" (max-width: 414px can be set as desired) in the Adsense responsive AMP ad code as follows.
That's a bit of tips on how to install AMP Responsive adsense ad code on AMP blog. Hopefully with this short enough article can be useful for us all, Good luck and good luck.
And now Adsense performs automatic detection of ad code installed on the AMP page and provides or suggests the installation of a responsive AMP ad code from Adsense that is slightly different from the AMP ad code from AMPProject.
But there are still many bloggers who are confused to install a responsive AMP ad code from Adsense because when installed to replace the previous AMP ad code night to appear unfamiliar.
Now Adsense automatically detects the ad code installed on the AMP page and will advise for the installation of the responsive AMP ad code by directly assigning a responsive Adsense AMP ad code slightly different from the amp-ad code of AMPProject.
It turns out that the responsive AMP ad code from Adsense uses a width unit of viewwidth or vw or adjusts the width of the screen (the code appears width = "100vw"). So when installed just to replace the amp-ad code that was previously installed, the ads appear to meet the width of the screen. This is not good when ads are viewed on the desktop screen because the ads will collide with the sidebar and others because the ads appear as wide as the screen.
The responsive AMP ad code from Adsense is as follows:
<amp-ad width="100vw" height=320
type="adsense"
data-ad-client="ca-pub-123456789"
data-ad-slot="123456789"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>
But if installed in Blogger, there are some code that must be adjusted so that the code can be stored in Edit HTML. The code that will be installed in Edit HTML looks like below.
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-123456789"
data-ad-slot="123456789"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
The above code is not changed, just adjusting to the code received Edit Blogger HTML. Because in this responsive AMP ad code Adsense advises not to edit or change the code so that ads can appear on the AMP page. And with 320 pixel ad height, Adsense also explains that this responsive AMP ad size is safe to store above the fold and below the fold.
And keep in mind that these Adsense responsive AMP ads are devoted to mobile only, so for this responsive Adsense AMP ad code does not interfere with the desktop look, we need a trick to install it. In this case we install 2 ad code from the same slot that will appear on desktop only and mobile only by using mobile and desktop conditional tag. So there are ads that appear on the desktop only and there are ads that appear on the mobile only.
Please use code like below.
<b:if cond='data:blog.isMobileRequest == "false"'>
<! - this ad code appears on desktop only ->
<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 == "true"'>
<! - this ad code appears only on mobile only ->
<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>
That way the desktop display will not change while in the mobile will appear ads with full width mobile phone screen because it is a blog on mobile display is also full screen.
Then Please add the code media="(max-width: 414px)" (max-width: 414px can be set as desired) in the Adsense responsive AMP ad code as follows.
<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>
That's a bit of tips on how to install AMP Responsive adsense ad code on AMP blog. Hopefully with this short enough article can be useful for us all, Good luck and good luck.
Your Articles Just Brilliant. Its really helpful for me and I hope also for others who use blogger. Thanks Admin
ReplyDelete