How to Design Responsive ad in DFP? – Step By Step Tutorial

Hits: 4770

What is Responsive Design in DFP?

Ads will fit to the browser based on the screen size. This will provide better user experience on different devices like Mobile, Tablet and Desktop

How to implement Responsive design in GPT tag?

In General, .sizeMapping function is used to design responsive design for GPT tags.

.sizeMapping to map the ad sizes to browser sizes and then call .defineSizeMapping to implement the mapping:

Sample size mapping function:

var mapping = googletag.sizeMapping().

addSize([1024, 768], [970, 250]).  // addSize([screensize], [Creative Size]).

addSize([980, 690], [728, 90]).

addSize([640, 480], [120, 60]).

addSize([0, 0], [88, 31]).

// Fits browsers of any size smaller than 640 x 480

build();


This is called in adslot declaration part:

adSlot.defineSizeMapping(mapping);

How to use mapping functionality from External Tag Generator:

Manual method requires codding skill set and sometimes it will result in big bug, if we miss any coding.

So we can use external tool to design responsive GPT tags.

Link: https://dfpgpt.appspot.com/

Steps to follow:

  1. Once you navigate to the https://dfpgpt.appspot.com/ page
  2. Select Tag Type: As required (Async or Sync)
  3. Provide Network id: eg: 1234
  4. If you need to pass any “Page Level” key value?. Add key-value in Custom targeting
    1. Eg: Category=homepage
  5. Enable/Disable : SRA(Single Request Architecture) – Recommended setting is Disable
  6. Turn ON “Advanced options”
  7. Once you turned ON “ Advanced options”, Then Turn ON “Size Mapping”
  8. Leave Advanced Setting options and navigate to Size mapping column,
  9. There you need to provide viewport size (Screen Resolution in WxH) and Request size (Creative size in WxH)
  10. Use the below customized mapping for Different devices
    1. 1024×500 – Desktop
    2. 768×400 – Tablet Landscape
    3. 470×400 – Tablet Portrait
    4. 360×400 – Mobile
    5. 0x0 – Smaller screen size
  11. While providing request size, make sure to add creative size lesser than screen size so that ad will looks good on different screen width otherwise responsive design is invalid. Example below
    • 1024×500 screen width provide request size as 970×250, 728×90
    • 768×90 screen width provide request size as 728×90
  12. Once you defined the Size Mapping, call the mapping function on ad slot declaration
  13. If you click the drop down at size mapping, you can assign the mapping name to the ad slot
  14. Custom targeting is ad slot declaration is used for “Ad unit” level targeting. Mainly used for targeting ads based on position.
    1. Eg: POS=ATF
  15. Finally Generate tag.

Sample Tag:

HEAD Tag

<!-- Start GPT Async Tag -->

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

<script>

var gptadslots = [];

var googletag = googletag || {cmd:[]};

</script>

<script>

googletag.cmd.push(function() {

var mapping1 = googletag.sizeMapping()

.addSize([1024, 500], [[970, 90], [970, 250], [728, 90]])

.addSize([768, 400], [[728, 90]])

.addSize([470, 400], [[300, 250]])

.addSize([360, 400], [[320, 50], [320, 100]])

.addSize([0, 0], [[320, 50], [320, 100]])

.build();




//Adslot 1 declaration

gptadslots.push(googletag.defineSlot('/1234/Test_728x90', [[728,90]], 'div-gpt-ad-8750488-1')

.setTargeting('POS', ['ATF'])

.defineSizeMapping(mapping1)

.addService(googletag.pubads()));




googletag.pubads().enableSingleRequest();

googletag.pubads().setTargeting('Category', ['homepage']);

googletag.enableServices();

});

</script>

<!-- End GPT Async Tag -->




BODY Tags

<!-- Async AdSlot 1 for Ad unit 'Test_728x90' ### Size: [[728,90]] -->

<!-- Adslot's refresh function: googletag.pubads().refresh([gptadslots[0]]) -->

<div id='div-gpt-ad-8750488-1'>

<script>

googletag.cmd.push(function() { googletag.display('div-gpt-ad-8750488-1'); });

</script>

</div>

<!-- End AdSlot 1 -->

38 thoughts on “How to Design Responsive ad in DFP? – Step By Step Tutorial

  • Pingback:Cialis online

    • April 20, 2018 at 3:52 am
      Permalink

      Thanks for your comment.

      Reply
  • Pingback:writeessay

  • April 27, 2018 at 8:55 am
    Permalink

    I have checked your site and i’ve found some duplicate content, that’s why you don’t rank high in google’s search results, but there
    is a tool that can help you to create 100% unique articles, search for; boorfe’s tips
    unlimited content

    Reply
  • July 1, 2018 at 7:13 pm
    Permalink

    I often visit your blog and have noticed that you don’t update it often.
    More frequent updates will give your website higher authority
    & rank in google. I know that writing content takes a lot of time, but you can always help yourself with miftolo’s tools which will shorten the time of
    creating an article to a few seconds.

    Reply
  • July 2, 2018 at 7:15 am
    Permalink

    I’ve learn some good stuff here. Certainly price bookmarking for revisiting.
    I wonder how much attempt you put to create any such fantastic
    informative site.

    Reply
  • July 2, 2018 at 7:30 am
    Permalink

    Hi, i think that i saw you visited my blog so i came to “return the favor”.I’m attempting to find things to improve my site!I suppose its ok to use some of your ideas!!

    Reply
  • July 4, 2018 at 1:42 pm
    Permalink

    Simply desire to say your article is as amazing. The clarity on your
    put up is simply cool and i can think you are an expert on this subject.
    Fine along with your permission let me to take hold of
    your feed to stay up to date with drawing close post. Thanks 1,000,000 and please carry on the rewarding work.

    Reply
  • July 7, 2018 at 10:52 am
    Permalink

    I don’t even understand how I ended up right here,
    but I thought this publish used to be good. I don’t understand who you are
    however definitely you’re going to a well-known blogger if you happen to aren’t already.
    Cheers!

    Reply
  • July 8, 2018 at 5:11 am
    Permalink

    I have observed that in the world today, video games are definitely the latest craze with kids of all ages. There are occassions when it may be impossible to drag young kids away from the games. If you want the best of both worlds, there are numerous educational activities for kids. Thanks for your post.

    Reply
  • July 10, 2018 at 4:01 am
    Permalink

    excellent put up, very informative. I wonder why the opposite specialists of this sector do not notice this.
    You shoukd continue your writing. I amm confident, you’ve a huge readers’ base already!

    Reply
  • July 12, 2018 at 10:59 am
    Permalink

    Hurrah, that’s what I was seeking for, what a information! present here
    at this web site, thanks admin of this site.

    Reply
  • July 15, 2018 at 7:10 am
    Permalink

    Its like you read my mind! You appear to know
    a lot approximately this, such as you wrote the e-book in it or something.

    I believe that you simply can do with some percent to
    force the message home a little bit, however instead of that,
    that is fantastic blog. An excellent read. I will definitely be back.

    Reply
  • July 16, 2018 at 1:33 am
    Permalink

    I love reading through a post that can make men and women think.
    Also, thanks for permitting me to comment!

    Reply
  • July 26, 2018 at 11:30 pm
    Permalink

    Excellent blog you have here.. It’s difficult to fid good quality writing like yours these days.
    I really appreciate individuals like you! Take care!!

    Reply
  • August 2, 2018 at 4:05 am
    Permalink

    I used to be recommended this blog by means of my cousin. I am not sure whether this post is written via him as no one else realize such unique approximately my difficulty.
    You are wonderful! Thanks!

    Reply
  • August 2, 2018 at 4:39 am
    Permalink

    What’s uup to evrry one, the contents present at this web
    site are really amazsing for ppeople knowledge, well, keep up the nice work fellows.

    Reply
  • August 2, 2018 at 6:08 pm
    Permalink

    Hi every one, here every one is sharing these experience, therefore it’s fastidious to read
    this web site, and I used to payy a quick visit this blog every day.

    Reply
  • August 2, 2018 at 9:03 pm
    Permalink

    Hello, all the time i used too check web sijte posts here early in the dawn, aas i likke to learn more and more.

    Reply
  • August 2, 2018 at 9:30 pm
    Permalink

    Hello would you mind sharing which blog platform you’re working with?
    I’m going to start my own blog soon but I’m having a hard time mking
    a decision between BlogEngine/Wordpress/B2evolutionand Drupal.
    The reason I ask is because your layout seems different tjen most blogs and I’m
    looking for somethikng unique.
    P.S My apologies foor getting off-topic but I had to ask!

    Reply
  • August 2, 2018 at 10:30 pm
    Permalink

    Good blog you’ve got here.. It’s hard to find excesllent writing like yours these days.

    I truly appreciate people like you! Take care!!

    Reply
  • August 3, 2018 at 5:29 am
    Permalink

    Hello mates, iits great piece of writing on the topic of cultureand completely defined, keep it uup alll
    the time.

    Reply
  • August 3, 2018 at 10:34 pm
    Permalink

    Hi there, I discovered your website by the use of Googl while searching for a
    comparable subject, your website came up, it ppears tto be like good.
    I have bookmarked it in my google bookmarks.
    Hi there, simply became awaree of your blog through Google,
    and found that it is teuly informative. I am gonna watch out for brussels.

    I’llappreciate in the event youu continue this in future.
    Numerous people will bbe benefited from your writing. Cheers!

    Reply
  • August 3, 2018 at 10:47 pm
    Permalink

    Prety nice post. I just stumbled upon your weblog and wished
    to say that I have really enjoyed browsing your bblog posts.
    In any case I’ll be subscribing to your feed and
    I hopee you write again very soon!

    Reply
  • August 10, 2018 at 5:38 am
    Permalink

    What’s up Dear, are you truly visiting this web
    page on a regular basis, if so after that you will absolutely obtain fastidious know-how.

    Reply
  • August 10, 2018 at 5:10 pm
    Permalink

    Howdy outstanding blog! Does running a blog such as this take a
    lot of work? I have absolutely no expertise in computer programming however I had been hoping to start my own blog in the near future.
    Anyhow, should you have any ideas or techniques for new blog owners
    please share. I understand this is off subject however I simply needed to ask.
    Cheers!

    Reply
  • August 10, 2018 at 8:38 pm
    Permalink

    What’s up, after reading this amazing article i am
    also glad to share my experience here with colleagues.

    Reply
  • March 13, 2019 at 8:24 am
    Permalink

    Thanks! For sharing your views regarding this topic. I really enjoyed your post.

    Reply
  • March 13, 2019 at 8:30 am
    Permalink

    Great article! We will be linking to this particularly greatcontent on our website. Keep up the great writing.

    Reply
  • March 13, 2019 at 9:29 pm
    Permalink

    I really love your website.. Pleasant colors & theme. Did you build this website yourself?Please reply back as I’m wanting to create my own personal blogand would like to learn where you got this from or just what the theme is called.Thank you!

    Reply
  • March 13, 2019 at 9:40 pm
    Permalink

    I don’t know if it’s just me or if everybody else experiencingissues with your website. It looks like some of the text within your content arerunning off the screen. Can someone else please provide feedback andlet me know if this is happening to them as well? This could be a problem with my internet browser because I’ve had this happen before.Thanks

    Reply
  • March 13, 2019 at 10:34 pm
    Permalink

    I just wanted to let you all know that I added a new list. It has taken me awhile to let everyone know due to server issues. Everything should be back on track now.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.