The most
effective method to Use Google Adsense Ads on Responsive Websites gooogle
Adsense has formally endorsed Responsive Design and this means you can serve Google ads of changing sizes relating to the viewport size (screen determination) of the guest's mechanism.
Case in
point, if a guest is perusing your site page on desktop, you can decide to
serve the expansive 728×90 (leaderboard) unit yet in the event that an
alternate guest is review the same site page on a cell telephone, you can show
the more modest 468×60 notice unit. The Adsense code catches the extent of the
guest's screen and serves the fitting notice unit that will best fit the
accessible space.
You can
serve responsive Google Adsense ads in both synchronous and additionally
offbeat (non-blocking) style. The recent is a more productive and proposed
system as the Javascript commercial code stacks in parallel and consequently
does not obstruct alternate components of the site page from rendering. As
such, your pages will stack quicker enhancing client experience.
The
most effective method to Generate Responsive Adsense Ads
Open
your Adsense dashboard and under My Ads, click "Make new commercial
unit." Set Ad Size as "Responsive Ad Unit" and click the
"Spare and Get Code" catch to create the Javascript code for your
Responsive Adsense notice. The default code is something like this:
1.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">How to Receive AdSense Earnings via Wire Transfer in Bangaladesh
ADSENSETWEETSHARE</script>
ADSENSETWEETSHARE</script>
2.
<ins class="adsbygoogle"
3.
style="display:block"
4.
data-ad-client="ca-pub-12345"
5.
data-ad-slot="xxxxx"
6.
data-ad-format="auto"></ins>
7.
<script>
8.
(adsbygoogle = window.adsbygoogle || []).push({});
9.
</script>
Adsense
processes the accessible width and renders the biggest commercial that will fit
that space. This may not generally be the most fitting methodology since the
best performing ads are rectangles and high rises and not so much the
leaderboards.
There
is however an alternative to drive the notice unit to dependably serve the
rectangle or the high rise. You can change the worth of the information
promotion position variable in the Javascript code from "auto" to
"rectangle" and it will dependably serve one of the rectangular
arrangements. Thus, you can set information notice configuration to
"vertical" to dependably render a 120×600 or 160×600 rectangle. The
changed notice code might be:
1.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
2.
<ins class="adsbygoogle"
3.
style="display:block"
4.
data-ad-client="ca-pub-12345"
5.
data-ad-slot="xxxxx"
6.
data-ad-format="rectangle"></ins>
7.
<script>
8.
(adsbygoogle = window.adsbygoogle || []).push({});
9.
</script>
Responsive
AdSense Ads (Another Approach)
Whether
you set data-ad-format as “auto” or “vertical” or “horizontal” or vertical, the
Google AdSense algorithms will still decide which ad to serve. For instance, if
you ask for an rectangle, you may either get a medium rectangle or a large
rectangle.
SHould you wish to force AdSense to serve ads of a particular
size while staying responsive, you can consider custom-sized ads. The
size of these ads is determined based on the screen but the publisher has more
control over the banner size that is served.
1.
<div id="google-ads-1"></div>
2.
3.
<script type="text/javascript">
4.
5.
/* Calculate the width
of available ad space */
6.
ad = document.getElementById('google-ads-1');
7.
8.
if (ad.getBoundingClientRect().width)
{
9.
adWidth = ad.getBoundingClientRect().width;
// for modern browsers
10.
} else {
11.
adWidth = ad.offsetWidth;
// for old IE
12.
}
13.
14.
/* Replace ca-pub-XXX
with your AdSense Publisher ID */
15.
google_ad_client = "ca-pub-XXX";
16.
17.
/* Replace 1234567890
with the AdSense Ad Slot ID */
18.
google_ad_slot = "1234567890";
19.
20.
/* Do not change
anything after this line */
21.
if ( adWidth >= 728 )
22.
google_ad_size = ["728", "90"]; /* Leaderboard 728x90 */
23.
else if ( adWidth >= 468 )
24.
google_ad_size = ["468", "60"]; /* Banner (468 x 60) */
25.
else if ( adWidth >= 336 )
26.
google_ad_size = ["336", "280"]; /* Large Rectangle
(336 x 280) */
27.
else if ( adWidth >= 300 )
28.
google_ad_size = ["300", "250"]; /* Medium Rectangle
(300 x 250) */
29.
else if ( adWidth >= 250 )
30.
google_ad_size = ["250", "250"]; /* Square (250 x 250)
*/
31.
else if ( adWidth >= 200 )
32.
google_ad_size = ["200", "200"]; /* Small Square (200 x
200) */
33.
else if ( adWidth >= 180 )
34.
google_ad_size = ["180", "150"]; /* Small Rectangle
(180 x 150) */
35.
else
36.
google_ad_size = ["125", "125"]; /* Button (125 x 125)
*/
37.
38.
document.write (
39.
'<ins
class="adsbygoogle" style="display:inline-block;width:'
40.
+ google_ad_size[0] + 'px;height:'
41.
+ google_ad_size[1] + 'px"
data-ad-client="'
42.
+ google_ad_client +
'"
data-ad-slot="'
43.
+ google_ad_slot + '"></ins>'
44.
);
45.
46.
(adsbygoogle = window.adsbygoogle
|| []).push({});
47.
48.
</script>
49.
50.
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
51.
</script>
Go to
your AdSense dashboard and either create a new ad unit or use one of your
existing ad units. Make a note of the ID of your ad unit and also your AdSense
Publisher ID and paste these values in Line #15 and #18.
0 comments:
Post a Comment