Sizemapping and multiple ad sizes

[derekhbui]

Hi,

We're trying to implement React-GPT into our application. I was wondering how you handled having multiple slots for one viewport using sizemapping? For a 600 viewport width, we have a leaderboard 728x90 placement that we also want to serve 970x250, 970x90, 728x90, or 300x250.

The following is what we used without react. How would we translate this to work with this? The entire async code snippet would be helpful.

var mapping728x90BTF1 = googletag.sizeMapping().addSize([600, 0], [[728, 280], [728, 90], [300, 250]).addSize([0, 0], [[300, 250], [320, 100], [320, 50]]).build();

We've tried the following and it doesn't work. We can only get the ads to show when we have 1 slot size for each viewport size.

example1 fail

{viewport: [0, 0], slot: [300, 250], [320, 100], [320, 50]},
{viewport: [600, 0], slot: [728, 280], [728, 90], [300, 250]}

example2 fail

          sizeMapping={[
            {viewport: [0, 0], slot: [300, 250]},
            {viewport: [0, 0], slot: [320, 100]},
            {viewport: [0, 0], slot: [320, 50]},
            {viewport: [600, 0], slot: [728, 280]}, 
            {viewport: [600, 0], slot: [728, 90]},
            {viewport: [600, 0], slot: [300, 250]}
          ]}

Thanks in advanced, Derek

[potench]

Have you tried passing it in as an Array of Arrays? Here's an example in the example folder: https://github.com/nfl/react-gpt/blob/32e0f19cc6102e6ece05bb7e7bc0097dcf672f85/examples/apps/routing/app.js#L42

 slotSize={[[728, 90], [970, 90]]}

Also, thanks for raising this. Noted that we should include a test case for responsive multi-size slot requests and add to documentation.

[derekhbui]

We've passed it as an array of arrays and it allows us to serve other sizes, but where could we include sizemapping once we've done slotSize={[[970, 250], [970, 90], [728, 90], [320x50]}? We want to be able to serve 970x250s and 970x90s to viewports over 1000 and 728x90s and 320x50s to viewports below 1000px

[taak77]

@derekhbui use slotSize when an ad is not responsive, otherwise use sizeMapping. If I just translate your need to the prop, it would be

sizeMapping: [
      {viewport: [0, 0], slot: [[320, 50], [728, 90]]},// Fits browsers of any size smaller than 1000
      {viewport: [1000, 0], slot: [[970, 90], [970, 250]]}
]

but it seems you would want another break point for displaying 728x90s and 320x50s.

[iamdhrooov]

Can we use size=['fluid']? Is the googletag.NamedSize supported?