是否有可能 - 在 Flutter Web 应用程序中插入 google AdSense？

Posted 2023-02-23

【中文标题】是否有可能 - 在 Flutter Web 应用程序中插入 google AdSense？

【英文标题】：is it possible - to insert google AdSense at Flutter Web application?

【发布时间】：2020-01-14 12:19:02

【问题描述】：

我尝试在我的网站上插入下一个代码（Google AdSense），但现在没有成功。代码是：

            <script type="text/javascript">var nend_params="media":00000,"site":000000,"spot":000000,"type":1,"oriented":1;0</script>
            <script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>

1.有一段时间我尝试了一个带有类似句子的 'dart:js'

    js.context.callMethod(..

但是，认为它不起作用，因为我们需要展示广告，而不仅仅是执行 javascript 代码..

2.next，我想它可以是一个WebView（一个webview，在webapp..）并尝试使用next：

依赖： webview_flutter: ^0.3.14 但它是秋天的

“错误：PlatformException（未注册工厂，没有为视图类型'plugins.flutter.io/webview'注册工厂”...

可能是有积极经验的人或可以给我任何建议的人。

【问题讨论】：

我已经使用 Flutter Web 构建了 www.droidbiz.in 网站。我已经申请了 adsense，但它给出了 Valuable Inventory: No content error。你遇到过这个问题吗？如何让 Flutter 网站获得 AdSense 的认可？

【参考方案1】：

如果您只需要网页中的这些脚本，您可以尝试将其直接包含在web/Index.html 页面中。

否则您将不得不使用ui.platformViewRegistry.registerViewFactory，如此处所示PlatFormView example。以下代码将向您的页面添加一个脚本元素。

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

class MyHomePage extends StatelessWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) 
    ui.platformViewRegistry.registerViewFactory("add_script", (int viewId) 
      ScriptElement element = ScriptElement()
        ..src = "https://js1.nend.net/js/nendAdLoader.js"
        ..type = "text/javascript";
      return element;
    );
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Directionality(
            textDirection: TextDirection.ltr,
            child: SizedBox(
              width: 640,
              height: 360,
              child: HtmlElementView(viewType: 'add_script'),
            ),
          ),
        ],
      ),
    );
  

注意：此代码需要一个托管小部件，例如 MaterialApp 内的脚手架或类似的东西。对于脚本中的代码，尝试使用不同的 viewtype 字符串创建一个类似的小部件，并使用setInnerHtml 或类似的方法。

但是你应该知道这个元素是作为一个 shadow dom 元素添加到你的页面中的。这个issue 讨论了这个。

【讨论】：

是的，它出现在 html - 源代码中，非常感谢！但是，不幸的是，在“flutter_web”激活之前，它是一段时间的解决方案。但是现在，我们也只得到了 'flutter'-branch，对于 'web'-app 也是如此。而且我尝试使用该解决方案和错误-我们不能将包'dart：html'与'flutter'一起使用。它无法理解 - 如何为“HtmlElementView”制作“viewtype”。也许可以这样（github.com/flutter/flutter/blob/…）但我不知道怎么做。

@alex89607 目前只有 IDE 会抱怨 dart:html 但当您使用颤振主通道时编译器会正常工作。请检查this wiki 将您现有的基于flutter_web 的项目迁移到新的基于flutter 的Web 项目。

还有一件事，如果你不介意的话。我有一个带有 HtmlElementView 帮助的完整 Javascript 代码，但它没有开始显示，我只在调试时看到加载的脚本。您已经写道，我需要“创建一个具有不同视图类型字符串的类似小部件”，但是我如何才能从小部件中获取结果 javascript 代码？我尝试调试上下文，但在“platform_view$.HtmlElementView1.new”中找不到结果数据。我应该在 HtmlElementView1 创建某种控制器来获取数据还是有其他方式？

我不确定我是否理解你的意思。如果你想运行脚本，那么你应该在 body 的 onload 事件或其他一些标签中执行它。否则作为按钮点击等事件的回调。

预期输出是什么？你能举个例子吗！