From this article, you will learn how to create Ads that will change based on the device screen size used. For example, desktop users will see 728x90 banner, meantime mobile or tablet users will be displayed with 320x50 banner.
This article consists of 3 main blocks:
Ad Manager Tag
In Google Ad Manager Delivery:
Create an Ad Unit for each Ad that you want to appear.
Make sure to specify the size for the Ad Unit for each Ad
In Google Ad Manager Inventory:
Create an Order
Create a Line Item for each ad that you want to display and input the size for each one
Assign a Line Item to the Ad Unit with the corresponding ad size.
Create your Responsive Ad Manager Tag:
Select the Tag Type: GPT
Enter your network code from the Google Ad Manager
The Network ID is required and can be found in the Admin Tab under: Global Settings -> All Network Settings -> Network Code.
Turn on “Advanced Options” and “Size mapping (responsive Design)”
This part is important to design responsive ads. Before going to the settings. Understand the syntax of the responsive design.
.addSize([Screen WxH], [[Ad request Sizes]])
.addSize([1024, 400], [[970, 90], [970, 250], [728, 90]]) //Desktop
.addSize([768, 400], [[728, 90]]) //Tablet Landscape
.addSize([470, 400], [[320, 50], [320, 100], [300, 250]]) //Tablet Portrait
.addSize([360, 400], [[320, 50], [320, 100], [300, 250]])//Mobile
.addSize([0, 0], [[320, 50], [320, 100], [300, 250]]) Small Screen Devices
If the minimum width of the desktop screen is 1024px then the Google ad manager will request sizes mentioned in the size mapping. So here as 970×90, 970×250 and, 728×90. The same way for other devices.
6. Add the Size mapping in the tag generator as per syntax mentioned above.
You can add multiple mapping as per your requirement and size needed for specific ad slots. For example, if you have 2 variations of ads (728x90 and 320x50), you should add 2 mapping elements.
7. Add the ad unit code created in your account.
8. Enter your ad size. Eg: 728x90.
Note: If you use size mapping, then ad request will be taken from the mapping code not from the actual ad size in the ad slot.
9. Select the corresponding Size mapping from the drop-down. So that ad will behave as responsive otherwise it won’t.
Add multiple ad slots as per your requirements.
10. Click the “Generate Tag” button. The responsive tag is ready to deploy on your site.
Note: The will be two parts: Header Tag and Body Tag.
SAMPLE HEAD Tag - Place this tag before </head> on your site
SAMPLE BODY Tags - Place where you want to display the ad using the RAW HTML Element