AdMob设计工具google web designer

一、google web designer工具中文文档:

https://support.google.com/webdesigner?hl=zh-Hans#topic=3227692 我用的版本:应用版本4.2.0.0802

二、google web designer是什么

如果要定制自己的AdMob广告,就需要用到google web designer工具。本质上,这广告是H5页面。google web designer也允许制作除了AdMob外的其他HTML:


本质上,google web designer是一个可视化制作H5页面的工具,但是由于一些不完善的地方(或者说BUG)。基本上没有人用它做H5页面,大部分用它只是来制作AdMob广告。
三、特性
可视化制作H5页面,是这个工具的设计视图提供的功能。除此之外,AdMob也提供了代码视图,可以直接修改设计中的代码。注意,代码视图中的代码并不是最终生成H5的代码。这个代码和编辑器中的设计视图是对应的。有很多很少用的css属性:

.gwd-page-content {
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

这是css的属性,但上面这一行的属性,也决定了在设计视图中的展示方式,修改会改变在设计视图的显示方式。

<gwd-image id="gwd-image_6" source="assets/index/logo_little_english.png" scaling="stretch" class="gwd-image-ehfx"></gwd-image>

如果是设计视图中添加的图片,在代码视图的是这样一行,最后会转换为H5中的<img>来显示。
四、元素工具
设计视图中,常用组件来堆砌页面,常见的有:360度图片。但有些元素是没有的,比如input输入框,这时候需要用到左侧的【元素工具】,自己画一个输入框。
五、发布
预览生成的文件夹:gwd_preview_项目名。
文件夹下有个index.html,这就是入口。
发布的时候,打包后需要校验,google提供的校验网址:https://h5validator.appspot.com/adwords/asset。上传发布的zip包校验即可,在实际测试中,这个校验会涉及注释掉的代码。也就是说,注释代码中有引用不存在的资源,他也会警告。
AdMob广告项目大小限制150k,不允许包含视频,音频。如果要做,只能是网络资源做(但不一定支持)。

原文地址:https://www.cnblogs.com/xiaochongchong/p/9934841.html