网站安装万维广告代码指南
网站如何安装万维广告联盟代码？
在您成功 创建流量资源 并通过我们的审核后，请为您的流量资源进行 创建广告单元 操作，请根据广告代码安装页面提示（或可点击 广告单元 页面的操作 -> 广告代码按钮）在您的网站页面安装我们的广告代码，请将 Javascript 代码放置在 head 或 footer 标签里（一个页面只需安装一个 Javascript 代码，如安装多个则会报错），并安装广告 div 代码。请注意在一个页面中，悬浮或固定样式广告只能二选一，即您可以选择安装 1 个悬浮样式广告代码，或选择安装 1 到 2 个固定样式广告代码，但不能同时安装悬浮和固定样式广告。
如果您的网站页面在 1300px 浏览器宽度时，右下角有空白区域可放置广告，推荐安装点击率更高的悬浮广告样式，悬浮样式广告可以长期展示在最终用户浏览器视窗中（悬浮触发宽度及悬浮左右位置皆可自定义，默认情况下，悬浮触发宽度为 1300px，即当浏览器宽度大于等于 1300px 时，广告将悬浮于页面右下角，当浏览器宽度小于 1300px 时，广告将固定于代码安装位置），故请注意在一个页面中，您仅可以安装 1 个悬浮样式广告 div 代码，并且不能在此页面同时安装固定样式的广告代码。
如果悬浮广告样式不适合您的网站，您也可以选择安装 1 - 2 个固定样式广告 div 代码，注意您只能在一个屏幕里（如首屏，即用户无需向下滚动即可看到的网页区域）安装 1 个固定样式广告 div，另一个固定样式广告 div 可以放到文末或者 footer 等位置，并需保证两个固定广告 div 之间的垂直距离在 1000px CSS 像素以上。
此外请注意：安装广告 div 代码时，如果页面存在全局 CSS 样式代码或 !important 声明代码，或将广告 div 放置在一个或多个父级元素如父级 div 之内，则广告 div 的样式可能错乱，请自行注意修改（查看关于层叠与继承的 MDN 文档）。
广告位置规范是什么？
- 一个屏幕，一个广告 —— “一个屏幕”高度以浏览器窗口的视口高度（window.innerHeight）为 1000px 为标准。您可以在一个页面中添加两个固定式广告位 div 代码，但请注意您只能在一个屏幕里（如首屏，即用户无需向下滚动即可看到的网页区域）放置 1 个固定广告位，另一个固定广告位可以放到文末或者 footer 等位置，并需要保证两个固定广告位之间的垂直距离在 1000px CSS 像素以上。一个屏幕可视区内如果存在多个广告，就会对最终用户造成过重的视觉负担，降低了贵站的用户体验，也会降低广告的点击率和收益。如果您选择安装悬浮样式广告 div 代码，请注意在一个页面中，悬浮广告只能安装 1 个，并且如果您安装了悬浮样式广告代码，就不能在此页面同时安装固定样式的广告代码。
- 广告位置不得影响用户阅读，不得在弹窗或跳转中间页面放置广告，必须放置在主要内容的上方、侧面、下方（信息流除外）。可参考如：https://zhaodao.ai/ （首页右下角悬浮）。在不同位置的点击率层面：悬浮样式广告比固定样式广告点击率更高，（左右两栏布局的页面）左侧正文广告（如信息流）比右侧栏广告的点击率更高，首屏或顶部广告比底部广告点击率更高，您可以尝试将广告放到不同位置，以获得更多收益。
- 广告位置与网站主要内容（定义见下）应有明显区别。广告应始终可识别为广告，并且可与所有其他内容区分开。您不得隐藏或删除广告底部的“广告”文字字样（即“万维广告”字样及其链接）、不得误导用户认为广告是网站主要内容的一部分（信息流广告除外）。
- 请勿诱导用户点击广告，诱导方式包括但不限于：在不便于最终用户区分网站内容和广告的位置放置广告（容易造成误解和误点击），在广告周围添加“请点击广告”等文字，在 Call For Action 等重要按钮旁边放置广告（容易造成误点击）等。
（“主要内容”定义为（基于 Mozilla 对<main> HTML 元素的 描述）：主要内容由与文档的中心主题或应用程序的中心功能直接相关或由此扩展的内容组成。此内容对于文档应该是唯一的，不包括在一组文档中重复的任何内容，例如侧边栏、导航链接、版权信息、站点徽标和搜索表单（当然，除非文档的主要功能是搜索表单）。）
非侵入式广告是什么？为什么非侵入式广告的用户体验更佳？
万维广告采用了非侵入式广告样式，这种文字 + Logo 的广告样式对网站的侵入性小，更加尊重最终用户的观感，与网站更加融合，相比大型 Banner 广告，非侵入式广告不会降低您的网站用户体验。且您可以选择横版或竖版广告样式，并自定义广告宽度（max-width)。
横版非侵入式广告
竖版非侵入式广告
传统 Banner 广告
非侵入式广告点击率较（Banner 广告）低吗？
实际上，根据我们在 https://zhaodao.ai 的测试观察，非侵入式广告的点击率反而比传统的 Banner 广告要高一些，最终用户会认真看文字，而潜意识中会自动忽略大型 Banner 等图片广告—— Banner 广告盲区现象；）。
如何通过外部资源引用 script 代码？
万维广告的 JavaScript 代码已兼容 SPA 应用，我们会通过监听路由变化来更新广告素材（距离上次广告请求时间超过 5s 后才会更换广告）。大部分前端应用如 Vue.js 可直接在 index.html 或网站模版文件里引入 Javascript 代码，复制引入下面的代码即可：
<script type="text/javascript" src="https://cdn.wwads.cn/js/makemoney.js" async></script>
如果您的前端是 NuxtJS，可以在 nuxt.config.js 引入我们的广告脚本（查看 NuxtJS 帮助文档）：
script: [{ src: "https://cdn.wwads.cn/js/makemoney.js"} ],
如果您是 React 应用，可以在项目 /Public 目录下的 index.html 中直接引入，或使用 react-load-script 插件。
此外请注意万维广告的 div 代码需要直接写入页面，不可以通过 Javascript 等方式动态插入，以确保广告填充成功。
如何提升网站的广告营收？
我们建议您采取以下措施：
- 万维广告采用了有效展示曝光机制，即当最终用户的 浏览器视口 (viewport) 浏览到广告位置时，才会被统计为一次广告有效展示。故我们推荐您优先安装悬浮样式广告代码，或在网站内容页面的首屏范围内安装固定样式广告代码（首屏指的是网页的上半版，是指用户无需向下滚动即可看到的网页区域），同时尽可能在更多页面（包括手机站页面）安装广告代码，以确保广告有更多的曝光，有效展示量越多，点击量越多。
- 经统计，至少 60% 的广告展示被最终用户浏览器端的 Adblock 等广告屏蔽插件拦截了，您可以通过在网站前端安装我们的 广告屏蔽检测和提示 Javascript 代码，在最终用户使用浏览器的广告屏蔽插件屏蔽广告时提示用户暂时关闭 AdBlock 或将贵站和我们的域名加入白名单以维持网站长期运营，这可以有效提升至少 50% 以上的广告收益。
- 一个屏幕，一个广告—— “一个屏幕”高度以浏览器窗口的视口高度（window.innerHeight）为 1000px 为标准。我们推荐您安装广告展示和点击率更高的悬浮样式广告代码，但请注意一个页面只能安装 1 个悬浮广告代码（同一页面不可以同时安装悬浮和固定广告代码）；您也可以在一个页面中安装 2 个固定样式的广告 div 代码，但您只能在一个屏幕里（如首屏，即用户无需向下滚动即可看到的网页区域）放置 1 个广告位，另一个广告位可以放到文末或者 footer 等位置，并需要保证两个广告位之间的垂直距离在 1000px CSS 像素以上。万维广告以尊重用户的隐私和体验为本，一个屏幕可视区内如果存在多个广告，就会对最终用户造成过重的视觉负担，也降低了您的网站用户体验和留存率，同时降低了广告的点击率和您的广告收益。
- 效益最大化，按浏览器语言展示不同广告网络的广告 —— 万维广告网络在国内的 RPM（每千次广告收益）极具竞争力，如果您加入了多个广告网络/联盟，建议您使用我们的 开源脚本 根据访客用户的浏览器设置，向中文访客展示万维广告，向非中文访客展示其他第三方国外广告网络（例如 Adsense）的广告。
- 优化网站的访问速度，有调查研究表明，若网站加载超过 3s 仍是白屏，50% 的用户会选择立即离开您的网站，故我们推荐您使用 PageSpeed Insights 测试和优化您的网页性能，并优化您的服务器等；
- 制作或撰写更多的优秀原创内容，同时确保来到您网站的每个访问者都不断深入探索网站内容，如设计清晰明确的导航栏和提供热门内容榜单等；
- 提升您的流量，并留住您的访客，比如通过微信订阅号，微博，RSS 等渠道发布您的网站动态，引导其浏览您的网站等，广告点击率是具有一定比例的，通常您的网站日活 UV 需要高于 5000 人以上才可以看到可观的广告收益。
- 我们的广告智能分配算法会根据不同网站投放不同广告的 eCPM 收益等数据进行广告智能匹配，同时我们也在不断提升受众群广告的最低 cpc 出价，故您加入万维广告网络的时间越久，收益会越高！
- 请谨慎屏蔽广告，如果您屏蔽的广告过多，可供匹配的广告量进一步缩小，可能会降低您的 eCPM 收益；
- 如果您期望继续提升广告收益，请联系您的客户经理，我们将免费为您提供广告位置和样式优化等方面的建议。
如何自定义广告 div 背景等 css？
您可以自定义广告 div 的 style 以适配网站上下文 div 宽度和颜色，例如修改宽度或修改背景色：style="max-width:300px;background-color:#fff"
对于信息流为主的网站，如何将广告插入到信息流中？
您可以自定义广告 div 的 CSS 制作原生的广告，以适应信息流的上下文 div 样式，如 style="max-width:800px;background-color:#fff"
完整的 div 代码如：<div class="wwads-cn wwads-horizontal" data-id="{{你的广告单元 ID}}" style="max-width:350px;background-color:#fff"></div>
常见问题
广告接口返回 400 错误或浏览器控制台报错应如何排查问题？
- 检查页面的 Javascript 和 div 代码是否加载正确且完整，请注意万维广告的 Javasctipt 代码禁止修改，且一个页面只允许放置 1 个广告 Javascript 脚本，否则将在浏览器控制台报错（不同网站的广告代码是不一样的，点击 广告单元 页面的操作 -> 广告代码按钮即可获取您的万维广告代码，并进行比对）；
- 我们会检查广告请求域名和您在万维广告创建流量资源时填写的网站域名是否一致，故您在本地域名环境是无法加载到广告的；
- 为确保广告素材的投递和环境安全，请开启网站的 HTTPS 并仅使用 HTTPS 协议，非 HTTPS 网站无法加载广告，同时万维广告也禁止通过 iframe 方式或其他方式例如 API 构造器加载。
如还有问题，请 联系我们。