Pingates Computer Technology: AD CODE IMPLEMENTATION Create a responsive ad unit

সোমবার, ৩০ সেপ্টেম্বর, ২০১৩

AD CODE IMPLEMENTATION Create a responsive ad unit

Responsive web design allows you to dynamically control the presentation of your website according to the properties of the screen/device that it’s being viewed on. By using a responsive ad unit, you can control the size of the ads on your page, in line with how you control the layout of the rest of your page across devices. For more information on responsive design in general, see Building Smartphone-Optimized Websites on the Google Developers site.
Responsive ad units use the new asynchronous ad code. With the asynchronous ad code, you can set the size of the ad code directly via Cascading Style Sheets (CSS), which allows you to dynamically specify the size of the ad that will be served.

Step 1. Generate the ad code

To generate the ad code for a responsive ad unit:
·         Create an ad unit in the usual way, making sure to select “Responsive ad unit (BETA)” from the Ad size drop-down in the process.
Note that as responsive ad units only use asynchronous code, you won't see a Code type drop-down in the “Ad code” box when you get your code.

Step 2. Place the ad code on your site

Copy and paste the ad code into the HTML source code of your page where you'd like the ad to appear.

Step 3. Set the size of the responsive ad unit

Responsive ad units have no predefined size, so you need to specify the size dynamically through CSS. As this feature is still in beta, here are a few pointers to keep in mind when setting your size:
·         Be sure to specify fixed pixel values when setting the width and height of the ad to be served. Make sure that the specified width and height match one of our supported ad sizes.
·         The asynchronous ad code is responsive on initial page load only, subsequent changes to the ad size (e.g., after a screen orientation change) will not cause a new ad to be displayed. This is something that we’ll look to address in the future.
·         Always set a default ad size in case media queries aren’t supported.
·         We currently don’t provide a breakdown by size for all of the ads served by a responsive ad unit. This is also something that we’ll look to address in the future.


Basic non-responsive example
Here’s a simple non-responsive example that shows how you can set the size of the ad unit through CSS:
<style type="text/css">
.adslot_1 { width: 728px; height: 90px; }
<ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-1234" data-ad-slot="5678"></ins>
<script async src=""></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Responsive leaderboard example
For a responsive ad unit, you use media queries to set the size. Typically you’ll want to base the size on the width of a screen. Here’s an example of a CSS style block that can be combined with the basic example above to give a responsive leaderboard:
<style type="text/css">
.adslot_1 {
  width: 320px; height: 50px;
@media (min-width:500px) { .adslot_1 {
  width: 468px; height: 60px;
@media (min-width:800px) { .adslot_1 {
  width: 728px; height: 90px;
Note that the sizes in this example are the same as those in the sample CSS media queries in the responsive ad code you generate on the My ads tab.
The @media rules are a CSS3 syntax, and are supported on all modern browsers. If you want to support older browsers, such as, Internet Explorer 7 or lower, we suggest having a default size specified first. This will ensure that an ad renders even when media queries aren’t supported. Note that setting the size of the ad code via CSS in external style sheets is not officially supported.

Tracking the performance of responsive ad units

You can track the performance of your responsive ad units by viewing the ad sizes report on the Performance reports tab. All responsive ad unit requests are shown under the “Responsive” label in the report.

কোন মন্তব্য নেই:

একটি মন্তব্য পোস্ট করুন