How to insert Adsense display ad in flutter web

Question

I created a fixed display ad 320px *60px. How do I insert in flutter web where I want? This is the code I obtained from adsense:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MyAd -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:60px"
     data-ad-client="xxxxxxxxx"
     data-ad-slot="xxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Or is it possible to make flutter not occupy the bottom 60 pixels of the screen and insert the adsense ad there by manipulating flt-glass-pane somehow?

I'm looking at a way to insert adsense ads to a mobile website built in flutter-web

score 9 · Accepted Answer · answered Sep 21 '20 at 07:10

9

I was able to insert ads into the listview in flutter-web as below: Created an html file adview.html

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:80px"
     data-ad-client="ca-pub-xxxxxx"
     data-ad-slot="xxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

And then, an IFrameElement to make use of the html:

// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

Widget adsenseAdsView() {
  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(
      'adViewType',
      (int viewID) => IFrameElement()
        ..width = '320'
        ..height = '100'
        ..src = 'adview.html'
        ..style.border = 'none');

  return SizedBox(
    height: 100.0,
    width: 320.0,
    child: HtmlElementView(
      viewType: 'adViewType',
    ),
  );
}

Then we can add the widget from the function adsenseAdsView() wherever we want. I added it in ListView.

answered Sep 21 '20 at 07:10

Gautham

3,418
3
30
41

1

Did it work? Did you get impressions in your Adsense account? – djalmafreestyler Nov 18 '20 at 03:27
2

Yes it works and am getting impressions in Adsense. – Gautham Nov 23 '20 at 14:53
2

How long does it take to your flutter web site get approved? Did you have already a lot of traffic in your site? – djalmafreestyler Nov 24 '20 at 15:10
2

How were you able to get your application approved? I obtained a "Valuable Inventory: No content" violation as a response. I guess there crawlers are not able to pick up pure JS applications. – onesiumus Jan 02 '21 at 23:18
2

I have built www.droidbiz.in flutter website. I am not able to get my flutter website approved from AdSense. It is giving "Valuable Inventory: No content". How you got approved? – Rashmi Tank Jul 05 '21 at 10:45
Is it safe to use ads inside iFrame? – Sheikh Shofiullah Jul 14 '22 at 07:50
Help please...I've been trying this approach, but I receive the error: "Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep"....What am I doing wrong? =( – Ramiro G.M. Dec 29 '22 at 00:43

Muhammad Amir · Answer 2 · 2023-01-15T18:31:43.403

You can add Adsense ad unit In Flutter Web with the help of below widget. It's work perfectly fine.

create widget with any name you like. I'm name BannerAdUnit only replace div tag ad unit id and script add Url as you can see in the below widget inside html body tag.

import 'dart:html' as html;  
import 'dart:ui' as ui;  
  
import 'package:flutter/material.dart';  
  
String viewID = "your-view-id";  
  
class BannerAdUnit extends StatelessWidget {  
  const BannerAdUnit({Key? key}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
  ui.platformViewRegistry.registerViewFactory(  
  viewID,  
  (int id) => html.IFrameElement()  
  ..style.width = '100%'  
  ..style.height = '100%'  
  ..srcdoc = '''  
        <!DOCTYPE html>  
 <html> <head> </head> <body>             
                     <div data-frill-widget="your ad unit id will come here" style="width: 340px; height: 460px;"></div>  
 <script async src="url"></script>           </body>  
 </html>           '''  
  ..style.border = 'none');  
  
  return SizedBox(  
  height: 460,  
  width: 340,  
  child: HtmlElementView(  
  viewType: viewID,  
  ),  
  );  
  }  
}

The story is not end here. When you add the above code You will see one beautiful error something like that.

The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix. (Documentation)

How to fix this error? Don't worry I'll show you how to fix this error.

Create new file on the root name it analysis_options.yaml and copy and paste the below code and the error is gone.

analyzer:
  errors:
    undefined_prefixed_name: ignore

Note: On the debugging mode flutter Web app not show you any ads. if you want to see ads deploy your Flutter Web App. you will see ads like this.

If you guys don't want to write these spaghetti code try this package flutter_ad_manager_web. I created this helpful package for display Adsense ads on Flutter Web.

I am using this package. But it shows me only a square on my screen. And How to load my unitid for publishing? — Berkay Isıkoglu, Aug 14 '23 at 16:17

score 0 · Answer 3 · answered Nov 05 '22 at 08:50

0

There is a new package that can help with this. Hopefully makes the process a little simpler.

https://pub.dev/packages/admanager_web

Example to implement:

AdBlock(
 size: AdBlockSize.largeRectangle,
 adUnitId: "/6355419/Travel/Europe",)

answered Nov 05 '22 at 08:50

DTD

11
3

But how do we get approval? – trueToastedCode Nov 28 '22 at 17:30
I never came right with approval but never kept trying. – DTD Jul 09 '23 at 18:14
Do you know how to change adUnitId to your AdSense? İf you can do. Tell us. Please! – Berkay Isıkoglu Aug 14 '23 at 17:12

How to insert Adsense display ad in flutter web

3 Answers3

Linked