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,不允许包含视频，音频。如果要做，只能是网络资源做（但不一定支持）。