一、系统需求

一个朋友需要在DeWeb中嵌入 Google Ads，原以为很简单，实际也很简单！

Google Ads代码如下

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8698255600561309"
     crossorigin="anonymous"></script>
<!-- Plyaer Dom -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-87654321xxxxxxx"
     data-ad-slot="8888xxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

查看相应的文档，都写是直接在html中插入即可。但在deweb中使用label或memo插入上述的Google Ads代码时报错。

分析原因，主要是采用了vue框架的缘故，导致直接嵌入报错。

二、研制控件

为了后续更方便地嵌入Google Ads广告代码，特地写了一个控件dwTMemo__googleads

全部代码如下；

library dwTMemo__googleads;

uses
     ShareMem,

     //
     dwCtrlBase,

     //
     SynCommons,

     //
     Messages, SysUtils, Variants, Classes, Graphics,
     Controls, Forms, Dialogs, ComCtrls, ExtCtrls,
     StdCtrls, Windows;


//==================================================================================================

//当前控件需要引入的第三方JS/CSS
function dwGetExtra(ACtrl:TComponent):string;stdCall;
var
    joHint  : Variant;
    joRes   : Variant;
begin
    joRes   := _json('[]');

    //取得HINT对象JSON
    //<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8698255600561309"    crossorigin="anonymous"></script>
    joHint    := dwGetHintJson(TControl(ACtrl));
    if joHint.Exists('uses') then begin
        joRes.Add(joHint.uses);
    end;
    Result  := joRes;
end;



//根据JSON对象AData执行当前控件的事件, 并返回结果字符串
function dwGetEvent(ACtrl:TComponent;AData:String):string;StdCall;
var
     joData    : Variant;
begin
    with TMemo(ACtrl) do begin
        //
        joData    := _Json(AData);

    end;
end;


//取得HTML头部消息
function dwGetHead(ACtrl:TComponent):string;StdCall;
var
    sCode       : string;
    joHint      : Variant;
    joRes       : Variant;
    iItem       : Integer;
begin
    with TMemo(ACtrl) do begin
        //===============================================================

        //生成返回值数组
        joRes    := _Json('[]');

        //取得HINT对象JSON
        joHint    := dwGetHintJson(TControl(ACtrl));



        //
        sCode   := '<el-main'
                +' id="'+dwFullName(Actrl)+'"'
                +dwGetDWAttr(joHint)
                +' :style="{'
                    +'left:'+dwFullName(Actrl)+'__lef,top:'+dwFullName(Actrl)+'__top,width:'+dwFullName(Actrl)+'__wid,height:'+dwFullName(Actrl)+'__hei'
                +'}"'
                +' style="'
                    +'position:'+dwIIF((Parent.ControlCount=1)and(Parent.ClassName='TScrollBox'),'relative','absolute')+';'
                    +'overflow:hidden;'
                    +dwGetDWStyle(joHint)
                +'"' //style 封闭
                +'>';
        //添加到返回值数据
        joRes.Add(sCode);

        //添加内容ins
        for iItem := 0 to Lines.Count-1 do begin
            joRes.Add(Lines[iItem]);
        end;

        //
        Result    := (joRes);
    end;
end;

//取得HTML尾部消息
function dwGetTail(ACtrl:TComponent):string;StdCall;
var
    joRes     : Variant;
    sCode     : String;
begin
    with TMemo(ACtrl) do begin
        //生成返回值数组
        joRes    := _Json('[]');
        //生成返回值数组
        joRes.Add('</el-main>');
        //
        Result    := (joRes);
    end;
end;

//取得Data
function dwGetData(ACtrl:TComponent):string;StdCall;
var
    joRes     : Variant;
    joHint    : Variant;
begin
    with TMemo(ACtrl) do begin
        //生成返回值数组
        joRes    := _Json('[]');
        //
        joRes.Add(dwFullName(Actrl)+'__lef:"'+IntToStr(Left)+'px",');
        joRes.Add(dwFullName(Actrl)+'__top:"'+IntToStr(Top)+'px",');
        joRes.Add(dwFullName(Actrl)+'__wid:"'+IntToStr(Width)+'px",');
        joRes.Add(dwFullName(Actrl)+'__hei:"'+IntToStr(Height)+'px",');
        //
        Result    := (joRes);
    end;
end;

function dwGetAction(ACtrl:TComponent):string;StdCall;
var
    joRes   : Variant;
    joHint  : Variant;
begin
    with TMemo(ACtrl) do begin
        //生成返回值数组
        joRes    := _Json('[]');
        //
        joRes.Add('this.'+dwFullName(Actrl)+'__lef="'+IntToStr(Left)+'px";');
        joRes.Add('this.'+dwFullName(Actrl)+'__top="'+IntToStr(Top)+'px";');
        joRes.Add('this.'+dwFullName(Actrl)+'__wid="'+IntToStr(Width)+'px";');
        joRes.Add('this.'+dwFullName(Actrl)+'__hei="'+IntToStr(Height)+'px";');
        //
        Result    := (joRes);
    end;
end;

//取得Mounted
function dwGetMounted(ACtrl:TComponent):String;StdCall;
var
    joHint    : Variant;
    joRes     : Variant;
begin
    try
        //生成返回值数组
        joRes    := _Json('[]');

        //取得HINT对象JSON
        joHint    := dwGetHintJson(TControl(ACtrl));

        // (adsbygoogle = window.adsbygoogle || []).push({});
        if joHint.Exists('push') then begin
            joRes.Add(joHint.push);
        end;
        //
        Result    := (joRes);
    except

    end;
end;



exports
     dwGetMounted,
     dwGetExtra,
     dwGetEvent,
     dwGetHead,
     dwGetTail,
     dwGetAction,
     dwGetData;
     
begin
end.

三、使用方法

拖放一个TMemo控件
设置该控件的HelpKeyword为googleads
设置该控件的Hint为

{
	"uses": "<script async src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8698255600561309\"    crossorigin=\"anonymous\"></script>",
	"push": "(adsbygoogle = window.adsbygoogle || []).push({});"
}

其中：

uses部分为原Google Ads代码的前面部分，注意写入Hint中时，由于采用JSON格式的原因，原来的双引号需要转义为\"
push部分为原Google Ads代码的后面部分

设置该控件的lines为原Google Ads代码的ins部分，即

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-87654321xxxxxxx"
     data-ad-slot="8888xxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

四、具体实现

用一个小demo进行了测试，经过一段时间，广告正常显示了，如图

但是嵌入到实际应用系统后，不显示广告。

浏览器F12显示以下错误提示：no slot size for availableWidth=0

度娘/GPT一圈后，也没找到什么答案。

后来，研究下Google Ads的原理，灵机一动，是不是需要一块空地？

然后，在程序界面中留出一个空白区域。注意：不是白色的区域或透明的区域，而是界面上的一块区域没有任何元素。再测试就正常了。

记录下来，希望能帮助后来的朋友吧！

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

[ DeWeb控件说明 ] DeWeb 中如何嵌入Google Ads代码?

一、系统需求

二、研制控件

三、使用方法

四、具体实现