网站安装万维广告代码指南
网站如何安装万维广告联盟代码?
(注意:在安装广告之前,请关闭浏览器的广告拦截器类插件,以及关闭本地 DNS 的广告拦截功能等阻碍广告展示的功能/产品,以便于您进行安装调试)
在您成功 创建流量资源 并通过我们的审核后,请为您的流量资源进行 创建广告单元 操作,请根据广告代码安装页面提示(或可点击 广告单元 页面的操作 -> 广告代码按钮)在您的网站页面安装我们的广告代码,请将 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 个,并且如果您安装了悬浮样式广告代码,就不能在此页面同时安装固定样式的广告代码。
- 广告位置不得影响用户阅读正文,广告不得阻挡页面其他元素(如正文)或被页面其他元素遮挡,不得在无内容页面(例如提醒页、致谢页、登录页、退出页、尚在建设中、错误页等页面)放置广告,不得在未经人工审核或整理而直接采用的自动生成的内容中放置广告(即程序化生成的内容,这类内容没有原创性,也没有增加足够的价值;其主要目的是操纵搜索排名,而非帮助用户),必须放置在主要内容的上方、侧面、下方(信息流除外)。在不同位置的点击率层面:悬浮样式广告比固定样式广告点击率更高,(左右两栏布局的页面)左侧正文广告(如信息流)比右侧栏广告的点击率更高,首屏或顶部广告比底部广告点击率更高,您可以尝试将广告放到不同位置,以获得更多收益。
- 广告位置与网站主要内容(定义见下)应有明显区别。广告应始终可识别为广告,并且可与所有其他内容区分开。您不得隐藏或删除广告底部的“广告”文字字样(即“万维广告”字样及其链接)、不得误导用户认为广告是网站主要内容的一部分(信息流广告除外)。
- 请勿诱导用户点击广告,诱导方式包括但不限于:在不便于最终用户区分网站内容和广告的位置放置广告(容易造成误解和误点击),在广告周围添加“请点击广告”等文字,在 Call For Action 等重要按钮旁边放置广告(容易造成误点击)等。
- 投放广告的页面需要公开可访问并提供站内索引,请勿使用替补方式(例如不可以将万维广告作为谷歌等第三方广告联盟未填充时的替补广告)或概率展示(例如不可以设置展示万维广告的概率)等方式植入我们的广告代码,万维广告必须可 100% 填充展现(除非被用户端浏览器设置或插件屏蔽),以便广告主和平台运营查验。
(“主要内容”定义为(基于 Mozilla 对<main> HTML 元素的 描述):主要内容由与文档的中心主题或应用程序的中心功能直接相关或由此扩展的内容组成。此内容对于文档应该是唯一的,不包括在一组文档中重复的任何内容,例如侧边栏、导航链接、版权信息、站点徽标和搜索表单(当然,除非文档的主要功能是搜索表单)。)
非侵入式广告是什么?为什么非侵入式广告的用户体验更佳?
万维广告采用了非侵入式广告样式,这种文字 + Logo 的广告样式对网站的侵入性小,更加尊重最终用户的观感,与网站更加融合,相比大型 Banner 广告,非侵入式广告不会降低您的网站用户体验。且您可以选择横版或竖版广告样式,并自定义广告宽度(max-width)。
横版非侵入式广告
竖版非侵入式广告
传统 Banner 广告
非侵入式广告点击率较(Banner 广告)低吗?
实际上,根据我们的观察,非侵入式广告的点击率反而比传统的 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>
如果您是 React 应用,可以在项目 /Public 目录下的 index.html 中直接引入,或使用 react-load-script 插件。
如果您不能嵌入 HTML,可以嵌入以下 JavaScript 代码:
const script = document.createElement("script");
script.setAttribute("src", "https://cdn.wwads.cn/js/makemoney.js");
document.head.appendChild(script);
此外请注意万维广告的 div 代码需要直接写入页面,不可以通过 Javascript 等方式动态插入,以确保广告填充成功。
如果您是其他前端框架,请自行 Google 搜索或询问 ChatGPT 等 AI 服务:“X 框架如何引入第三方 Javascript / 创建 div”。
您的网站通过井号 # 切换页面?
如果您的网站通过 URL 中的井号 # 切换页面,则需在我们的 Javascript 脚本中添加 data-mode="hash" 属性,以便在页面切换时更新广告素材,代码如下:
<script data-mode="hash" type="text/javascript" charset="UTF-8" src="https://cdn.wwads.cn/js/makemoney.js" async></script>
如何提升网站的广告营收?
如何自定义广告 div 背景等 css?
您可以自定义广告 div 的 style 以适配网站上下文 div 宽度和颜色,例如修改宽度或修改背景色:style="max-width:300px;background-color:#fff"
如何自定义固定广告样式默认自带的 margin-top 值?
万维广告默认在固定广告样式代码中增加了 20px 的 margin-top(广告 div 的顶部外边距),如需调整,请在 div 的 style 样式中自定义该值,例如:style="max-width:350px; margin-top:0"
或 style="max-width:350px; margin-top:10px"
对于信息流为主的网站,如何将广告插入到信息流中?
您可以自定义广告 div 的 CSS 制作原生的广告,以适应信息流的上下文 div 样式,如 style="max-width:800px;background-color:#fff"
常见问题
广告接口返回 400 错误或浏览器控制台报错应如何排查问题?
- 检查页面的 Javascript 和 div 代码是否加载正确且完整,请注意万维广告的 Javasctipt 代码禁止修改,且一个页面只允许放置 1 个广告 Javascript 脚本,否则将在浏览器控制台报错(不同网站的广告代码是不一样的,点击 广告单元 页面的操作 -> 广告代码按钮即可获取您的万维广告代码,并进行比对);
- 为确保广告素材的投递和环境安全,请开启网站的 HTTPS 并仅使用 HTTPS 协议,非 HTTPS 网站无法加载广告,同时万维广告也禁止通过 iframe 方式或其他方式例如 API 构造器加载;
- 请关闭广告拦截器等插件,或更换浏览器后刷新重试。
如还有问题,请 联系我们。