[Admob Campaigns] Banners showing black borders / not resizing in Flutter App

[ts8ta]

Hi! We are having issues with Flutter application using Image Banner from our own campaign. When we receive the ad and load it into the container (which is implemented as shown in the example app), we are sometimes seeing the container not being resized to the size of the image ad and remaining space is filled up with black background (see screenshot attached where our test-ad is only the green image)

Could this be related to our campaign which includes multiple ads having different image ads sizes (320x100 and 300x250)? How is it possible to ensure that the container is getting resized to only the size of the image inside the ad and is it possible to change the black background color to something that fits to our apps ci?

Plugin Version

2.0.1

Steps to Reproduce

• create app in AdMob
• create ad units in AdMob
• create campain
• create new ads for campaign and use image ad as type (using different image sizes)
• implement banner ads as shown in examples (as adaptive inline ads)

[huycozy]

Hi @ts8ta I hope I can understand this properly. Are you worried about ad rendering from the campaign being affected by rendering ads with plugin?

If so, I don't think rendering ads on the device is related to the campaign input images. This plugin helps to display ads from the ads server while the images in your campaign are provided by yourself.

If not so, can you be more specific on the issue and steps to replicate it in detail (adding a video may be useful)?

[ts8ta]

Hi,

thanks for your message.

You are right, we are seeing a black border around the images that we are uploading to our campaigns. So the image is correct, the size of the image as well, but there is a large border around it and we assume that the container holding the ad image should adapt to the size of the image. In our example, the ad image uploaded to the campaign is 320x100 but the ad is shown in a container of size 320x250 where the rest of the size is black.

If you need more details, I can also share a response that we receive from google ads.

Thomas

On Tue, 20 Dec 2022 at 10:04, huycozy @.***> wrote:

Hi @ts8ta https://github.com/ts8ta I hope I can understand this properly. Are you worried about ad rendering from the campaign being affected by rendering ads with plugin?

If so, I don't think rendering ads on the device is related to the campaign input images. This plugin helps to display ads from the ads server while the images in your campaign are provided by yourself.

If not so, can you be more specific on the issue and steps to replicate it in detail (adding a video may be useful)?

— Reply to this email directly, view it on GitHub https://github.com/googleads/googleads-mobile-flutter/issues/730#issuecomment-1359035457, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJTFB53EGYTUZCWEX2Y6OUDWOFZARANCNFSM6AAAAAATDZITLQ . You are receiving this because you were mentioned.Message ID: @.***>

[huycozy]

but there is a large border around it and we assume that the container holding the ad image should adapt to the size of the image. In our example, the ad image uploaded to the campaign is 320x100 but the ad is shown in a container of size 320x250 where the rest of the size is black.

It sounds like you're assuming the campaign image source will show up in your app when using this plugin, right?

From my understanding and my explanation above, the image from ads server and the campaign are separate. If there is a source about displaying campaign images with the ads plugin that I may not be aware of, please refer to it here.

[ts8ta]

Hi again!

We are using our campaign to fill the ads from google. So the images we upload into our campaign are being sent by google when requesting an ad for our app.

Thanks, Thomas

On Tue, 20 Dec 2022 at 11:05, huycozy @.***> wrote:

but there is a large border around it and we assume that the container holding the ad image should adapt to the size of the image. In our example, the ad image uploaded to the campaign is 320x100 but the ad is shown in a container of size 320x250 where the rest of the size is black.

It sounds like you're assuming the campaign image source will show up in your app when using this plugin, right?

From my understanding and my explanation above, the image from ads server and the campaign are separate. If there is a source about displaying campaign images with the ads plugin that I may not be aware of, please refer to it here.

— Reply to this email directly, view it on GitHub https://github.com/googleads/googleads-mobile-flutter/issues/730#issuecomment-1359113124, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJTFB52LXSCU46P5BTCFNU3WOGAFLANCNFSM6AAAAAATDZITLQ . You are receiving this because you were mentioned.Message ID: @.***>

[huycozy]

@ts8ta I found the source of this now and had the context of this issue.

To be more precise, please provide information indicated below:

1. Do you set a fixed size for Container? Can you share the snippet code of this?
2. Please try changing the Container color and re-check whether black space is Container content
3. Does this issue happen without enabling Ads campaign? (It means that ads is fetched from ad server as normal)

[ts8ta]

Hi,

exactly this is what we are trying.

1. Do you set a fixed size for Container? Can you share the snippet code of this? --> no, we don't, I am attaching our container widget
2. Please try changing the Container color and re-check whether black space is Container content --> no effect, the space keeps being displayed in black
3. Does this issue happen without enabling Ads campaign? (It means that ads is fetched from ad server as normal) --> yes, this only happens when we are enabling our campaigns.

Thanks for your help!

Thanks, Thomas

On Tue, 20 Dec 2022 at 12:44, huycozy @.***> wrote:

@ts8ta https://github.com/ts8ta I found the source https://support.google.com/admob/answer/6177178#when of this now and had the context of this issue.

To be more precise, plea single_adaptive_banner_ad_widget .txt se provide information indicated below:

1. Do you set a fixed size for Container? Can you share the snippet code of this?
2. Please try changing the Container color and re-check whether black space is Container content
3. Does this issue happen without enabling Ads campaign? (It means that ads is fetched from ad server as normal)

— Reply to this email directly, view it on GitHub https://github.com/googleads/googleads-mobile-flutter/issues/730#issuecomment-1359240990, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJTFB5Y26YISUDNN5VSG753WOGL3RANCNFSM6AAAAAATDZITLQ . You are receiving this because you were mentioned.Message ID: @.***>

[huycozy]

@ts8ta thanks for your response. I suspect this issue may also happen with Native SDK. Could you please retry with Android ads sample to see if the issue still persists or not?

[ts8ta]

Hi!

We have been in touch with that Mobile Ads SDK Team and they tested it with their code saying that all looks good.

Could you please try to reproduce with the following steps:

• create app in AdMob
• create ad units in AdMob
• create campaigncreate new ads for campaign and use image ad as type (using different image sizes,--> setup one ad with an image of 320x100, and one with an image 300x250)
• use campaign for ad units
• implement banner ads as shown in examples (as adaptive inline ads)

Thanks! Thomas

On Wed, 21 Dec 2022 at 05:32, huycozy @.***> wrote:

@ts8ta https://github.com/ts8ta thanks for your response. I suspect this issue may also happen with Native SDK. Could you please retry with Android ads sample https://github.com/googleads/googleads-mobile-android-examples/ to see if the issue still persists or not?

— Reply to this email directly, view it on GitHub https://github.com/googleads/googleads-mobile-flutter/issues/730#issuecomment-1360844439, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJTFB55ZB3RCLJWFC7CV3MLWOKB4ZANCNFSM6AAAAAATDZITLQ . You are receiving this because you were mentioned.Message ID: @.***>

[huycozy]

@ts8ta I tried to reproduce the issue but still didn't see the issue, it displayed well as normal when there is no campaign. Also, I see there is a warning from the Campaigns dashboard:

For your campaign to serve ads, be sure to include payment info in your Google Ads account. [Learn more](https://support.google.com/admob/answer/7047399?hl=en_US)

I'm not sure whether this may affect to this, so I will label the issue for further insights from the team.

[ts8ta]

ok, did you add ads of type image with different sizes in your campaign? To us, it looks like the issue is occurring when using a banner of size 320x100. Could you please try with an ad of this size again?

One more thing: why isn't it possible to set the background of the flutter container widget to a color that integrates with the CI of our application? If we set this to a color of our choice, the color does not get used. Where is the black color coming from in our case? Is that filled by AdMob or within the code of the flutter plugin? Using charles to check what we receive from AdMob, we received an html showing our banner surrounded by a black background - but there is no chance to change that behavior in AdMob.

Appreciate your help!

On Wed, 21 Dec 2022 at 10:50, huycozy @.***> wrote:

@ts8ta https://github.com/ts8ta I tried to reproduce the issue but still didn't see the issue, it displayed well as normal when there is no campaign. Also, I see there is a warning from the Campaigns dashboard:

For your campaign to serve ads, be sure to include payment info in your Google Ads account. Learn more

I'm not sure whether this may affect to this, so I will label the issue for further insights from the team.

— Reply to this email directly, view it on GitHub https://github.com/googleads/googleads-mobile-flutter/issues/730#issuecomment-1361092353, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJTFB57JGMKPV3HBADHB4NDWOLHH3ANCNFSM6AAAAAATDZITLQ . You are receiving this because you were mentioned.Message ID: @.***>

[huycozy]

ok, did you add ads of type image with different sizes in your campaign? To us, it looks like the issue is occurring when using a banner of size 320x100. Could you please try with an ad of this size again?

Currently, I have these image sizes on my campaigns: 320x100, 300x250, 320x50. And the rendered ads seems still getting image from ads server rather than the campaign.

Where is the black color coming from in our case

I recommend you should use Flutter Inspector tool to find where the black color comes from.

[ts8ta]

Hi,

We will use flutter inspector again to check where the background is coming from. Any idea why you are not getting the images from the campaign? All ads coming from AdServer are looking fine for us.

Thomas

On Wed, 21 Dec 2022 at 11:56, huycozy @.***> wrote:

ok, did you add ads of type image with different sizes in your campaign? To us, it looks like the issue is occurring when using a banner of size 320x100. Could you please try with an ad of this size again?

Currently, I have these image sizes on my campaigns: 320x100, 300x250, 320x50. And the rendered ads seems still getting image from ads server rather than the campaign.

Where is the black color coming from in our case

I recommend you should use Flutter Inspector https://docs.flutter.dev/development/tools/devtools/inspector tool to find where the black color comes from.

— Reply to this email directly, view it on GitHub https://github.com/googleads/googleads-mobile-flutter/issues/730#issuecomment-1361164898, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJTFB54N66HWGK2URFNBBXLWOLO53ANCNFSM6AAAAAATDZITLQ . You are receiving this because you were mentioned.Message ID: @.***>

[martipello]

I'm also seeing this. I am using the example code.

When I use the test ad unit id in the example it works perfectly except all banners are always the same height. When I swap the ad unit id for my own the size does get updated but i get black bars... sometimes 🤷

It doesn't seem to be consistently one size thats problematic. it doesn't refresh when scrolling out the view and back in, maybe implying it has the correct size? It isn't the surrounding container (giving the container a color doesn't show)

google_mobile_ads: ^2.3.0

Flutter 3.7.0 • channel stable • https://github.com/flutter/flutter.git Framework • revision b06b8b2710 (9 days ago) • 2023-01-23 16:55:55 -0800 Engine • revision b24591ed32 Tools • Dart 2.19.0 • DevTools 2.20.1

[stjfk]

I have a similar problem when using NativeTemplateStyle. there is white color behind/around the ads. is this normal?

flutter 3.7.6 google mobile ads 2.4.0 android - small template

[JohannDesobry]

Did someone find a way to remove black background from ad banner?

[huycozy]

We’re closing this issue due to inactivity. If you’re still impacted, please create a new issue via the Developer Forum.