AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

最近注意到不少新闻媒体网站,都采用 Flying Carpet 滑动广告 (俗称:滚动覆蓋广告),研究后发现其实在 AMP 网页有相关语法支援,经过修改调整也能应用于电脑手机 Adsense 广告,至于语法该如何产生与套用?简单写篇教学给站长们参考。

 

前言 & 效果展示:

 

Flying Carpet Ads 特色会在网页卷动时以视差 Parallax 来显示,最早爬文时发现应用于 AMP 平台【语法文件】,在这里可以查询到蛮多讯息,安装好后便想让电脑手机版也能运作,只是都没有找到相关教学资讯。

 

后来直接透过 Chrome 浏览器按鼠标右键检查元素方式,发现到其实它是用 CSS 方式实现,没想到也能直接套用到其他页面,然后就把这篇文章给诞生,接着就看下方效果展示 DEMO 还有如何套用语法吧。

 

AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

 

Flying Carpet Ads 全萤幕滚动覆蓋广告 – 我都称之为滑动广告,卷动时广告会覆蓋萤幕,并且得要不断滚动画面广告才会不见,透过友人与 Google Adsense 广告经理确认后,这种型态与 Backdrop 都不违反政策类型是可以正常使用的。

 

电脑手机版语法教学:

 

首先在广告单元点选 -> 多媒体广告,接着按右上角产业别,并将广告大小由回响式改为固定,宽 300 & 高 600 输入好后按建立,产生语法其 HTML 是针对电脑与手机装置,至于 AMP 则是有另外专属代码。

 

AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

 

语法如下,可以直接参考套用,或是把 CSS 写入 style.css 档案内,才不会每次要显示这广告得重复呼叫情况。

 

备注:布景栏宽 100% 数值会全屏绝对置中非单侧置中,除非是没有侧边栏 sidebar 情况,如有 sidebar 栏宽自调 XXXpx 数值设定

 

<style>
.ad{
    height: 500px;
    position: relative;
    display: block;
    overflow: hidden!important;
    box-sizing: border-box!important;
    }
    
.fixed{
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    border: 0!important;
    margin: 0!important;
    padding: 0!important;
    clip: rect(0,auto,auto,0)!important;
    -webkit-clip-path: polygon(0px 0px,100% 0px,100% 100%,0px 100%)!important;
    clip-path: polygon(0px 0px,100% 0px,100% 100%,0px 100%)!important;
    }
    
.flying_carpet_ads{
    position: fixed!important;
    top: 0!important;
    width: 100%; /* 备注 */
    height: 100%;
    -webkit-transform: translateZ(0)!important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
</style>

 

<div class="ad"><div class="fixed"><div class="flying_carpet_ads">
广告代码
</div></div></div>

 

AMP 语法教学:

 

至于 AMP 就简单些,首先把 amp-fx-flying-carpet-0.1.js 贴到 <head></head> 之间。

 

然后在要呈现广告位置贴上下图步骤二语法,文章更新后大概 10 – 15 分钟就会显示了。

 

想必会有 WordPress 站长问说该如何区别电脑手机与 AMP 网页,其实可善用 is_amp_endpoint 函数判断。

 

AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

 

延伸阅读:

 

参加过几场 Google Adsense 实体活动与线上讲座,可以发现到他们现在与多个网络广告巨擘,合推名为 Coalition for Better Ads 改善广告联盟 (俗称:好广告联盟),主要是在这数位浪潮中希望让浏览用户们,可以有良好的阅读感受,并且告诉站长们那些广告形式会有不好的互动与效果。

 

并且 Google于 2019 年 7 月 9 日起凡是使用 Chrome 浏览器用户,它会遵循 Better Ads 好广告联盟规范,只要违反下图 Better Ads Standards 都会被阻挡无法显示,最严重甚至将 Adsense 帐号给停权不得不注意,最主要目的也是因为用户有不好浏览体验,反而会对该品牌有负面印象,甚至安装 Ad Block 之类阻挡广告外挂,这样对广告主与媒体间伤害甚大。

 

最新的案例莫过于全台湾最大 BSP 平台“痞客邦”,贴出【Google AdSense 广告显示异常公告】消息,随后知名科技网瘾科技写了篇“搜寻文章终于不用跳过痞客邦 今天完全没有盖版广告超清爽”,这篇文章写出许多使用者们的心声,毕竟他们采用盖板广告行之有年,可说是最大获利者,现在 Google 大刀阔斧肯定他们也得针对这部分好好调整,否则无法继续摆放 Adsense 与其他数位广告。

 

至于这个浪潮已经成为全球趋势,现在全世界已经再实施 ing,其实早在去年 2018 搜寻一哥 Google 就在欧美国家实行,当时采用 Chrome 阻挡政策便发现高达三分之一网站不符合规范,直到今年重新审查数百万个网站均已获得改善,依据外媒资料指出目前仅不到 3% 网站不合规定,并且只有 1% 网站被阻挡广告。

 

 

补充:聊到这想必有朋友问究竟 Google 该如何判定与阻挡?? 目前除了会依据 Better Ads Standards 规范并采用已推行 Ad Experience Report 服务帮助用户了解自家网站数位广告是否符合规范,若不符合有 30 天可以改善,听说 Google 评级将会影响整个域名,因此即使只有一两个网页犯规,其域名都会被判定无法投放广告被封锁,这和 Adsense 网页层级违规处罚大不同,至于未来会如何处置或调整就静观其变囉!!

 

AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

AdSense Flying Carpet 滚动覆蓋广告语法#电脑手机 AMP 适用

 

更多关于 Better Ads 概念与推广目的,可以透过下方影片让大家有更多了解,若听不懂英文可以把字幕打开便有中文语系。

 

 

总结:

 

学会了摆放 AdSense Flying Carpet 滚动覆蓋广告语法,最后要提醒虽然这种广告很吸引目光,但最好别放太多个而造成碍眼情况,若要问我最理想摆放数目,我建议大概 1000 – 1200px 高度一个最刚好,以不超过两个或是考量到良好用户体验为原则 (网址)。

 

以上就是今天 WordPress + 数位广告小学堂,不知道站长们都学会了吗?毕竟我非纯网页设计出身,也是询问朋友东修西改才完成,大家有空就改看看,毕竟相信大家布景多少有差异,建议最好还是多测试几次确认能正常运作再上架会比较好。

 

若参考本文语法并且成功运作,欢迎斗内或是在本文下方留言告知,毕竟也想知道我花了数小时蒐集资料与截图撰文,究竟能帮助到多少的朋友,否则每次都觉得发废文高流量,认真写文都没人看这回馈与成就感不成比例啊 QQ

 

Avatar for 史密斯先生

史密斯先生

同时身兼站长与网管,校长兼撞钟一职,史密斯是个热爱科技三吸阿宅,常在 PTT 批踢踢与欧美乡民集散地 reddit 走跳,并且对 VPN & 翻墙跳板连线资讯特别感兴趣,希望借由“跳板俱乐部 VPN Club”平台让大家掌握最即时又快速的网络动态。

留言板