Squarespace 的帮助页面说,在其页眉注入字段中输入的代码会被放入 head 元素,“出现在您网站的每个页面上”。1Ghost 的帮助页面说,添加到 Site Header 的脚本“将出现在您网站的每一个页面上”。2Webflow 的页面说,Head code 部分中的代码“适用于您的整个网站”。3每家供应商都用一句话回答了发布商首先会问的问题:脚本应该放在哪里,才能在所有地方运行。WordPress 则在两个地方回答同一个问题,因为 WordPress 主题既可以用区块构建,也可以用代码构建。

各托管平台按套餐而不是按技能来限制全站字段

在 Squarespace 上,该字段是 Code Injection 面板中的页眉框。1同一页面说,代码注入“在 Core、Plus、Advanced 以及部分旧版计费套餐中提供”。1Ghost 将其放在 Settings、Advanced、Code Injection 之下,其中 Site Header 框用于 head,Site Footer 框用于 body 的末尾。2Webflow 将其放在 Site settings 的 Custom code 选项卡中,包含 Head code 和 Footer code 两个部分,每部分最多 50,000 个字符。3Webflow 的页面还补充说,自定义代码需要 Core、Growth、Agency 或 Freelancer 工作区,或者拥有有效 Site 套餐的网站。3

在托管平台上,如果存在障碍的话,障碍是计费套餐而不是代码。使用包含该字段的套餐的发布商,无需打开模板即可粘贴 script 元素。使用不包含该字段的套餐的发布商则无法做到。

WordPress 说明了两个位置,而账户的角色决定第一个位置能否生效

WordPress 自己的文档将站点编辑器描述为一种工具,用于“使用区块设计整个网站,包括页眉、页脚以及两者之间的所有内容”。4同一页面说,只有在启用区块主题时才能使用站点编辑器,并将模板部件定义为一种“用于管理网站中重复出现的全局区域”的区块。4放置在页脚模板部件中的自定义 HTML 区块,会出现在使用该部件的所有地方。区块本身可以从区块插入器添加,也可以在新的段落区块中输入 /html 来添加。5

自定义 HTML 页面中有一个细节,决定了粘贴的脚本是否会被保留。从 WordPress 7.0 开始,该区块为 HTML、CSS 和 JavaScript 提供了单独的面板,而 CSS 和 JavaScript 面板“仅对具有 unfiltered_html 权限的用户可用”。5对于没有该权限的用户(该页面的例子是投稿者),WordPress 会使用 wp_kses 对区块进行清理,并删除不允许的标签,其中就包括 script 标签。5因此,执行粘贴操作的账户的角色也是设置的一部分。

主题自己的代码是剩下的位置。主题手册说,主题和插件应当“使用标准的 WordPress 方法”加载脚本:在 wp_enqueue_scripts 动作上调用一个加入队列的函数。6同一页面在该函数的参数中展示了一个 'strategy' => 'defer' 键,它会以延迟方式加载脚本,旁边还有一个 'async' 选项。6面向 WordPress 的 AdBubbles 插件正在计划中;在它推出之前,WordPress 文档说明的就是这两个位置。

脚本如何加载,比由哪个字段承载更重要

HTML 标准为经典 script 元素描述了三种行为。用标准的话说,既没有 defer 属性也没有 async 属性的脚本会“被立即获取并执行,在两者都完成之前阻止解析”。7带有 defer 时,脚本“将被并行获取,并在页面完成解析时执行”。7async 脚本会被并行获取,并“在可用时立即执行(可能在解析完成之前)”。7字段决定浏览器在哪里遇到该元素;属性决定浏览器在那里做什么。

嵌入脚本 adbubbles.js 是一个静态文件,用纯 JavaScript 编写,没有任何依赖,通过 Cloudflare 的缓存提供,并在页面 DOM 就绪后加载。开设发布商账户免费,嵌入脚本也免费。已添加网站的发布商可以在粘贴任何内容之前申请抓取,以显示其哪些词语目前可以出售。安装页面给出了需要粘贴的确切 script 元素。

范围是需要仔细考虑的决定

当脚本出现在每个页面上之后,还剩下一个任何供应商的帮助页面都无法替您做出的决定。范围是嵌入脚本被允许扫描的页面部分,例如 article 元素或 entry-content 容器。即使在范围之内,嵌入脚本也不会触碰标题、链接、代码、预格式化文本、表单控件、导航、页眉和页脚,以及发布商标记为 data-noads 的任何内容。它为每个已购买词语的第一次出现添加下划线。每个词语最多一个气泡,两个气泡绝不会出现在同一段落中。

假设一个 WordPress 主题将每篇文章包裹在一个 class 为 entry-content 的容器中,并在侧边栏中显示一段简短的作者简介。将范围设为 entry-content,意味着作者简介永远不会被扫描,尽管它就在页面上,而且可能包含已购买的词语。将范围设为整个 main 元素,意味着作者简介也会被扫描,气泡可能会在那里而不是在文章中打开。两种选择都没有错,但它们出售的是不同的词语。

除了范围之外,账户中还保存着每页最多气泡数、要排除的广告主类别,以及网站的验证。验证有三种形式之一:DNS TXT 记录、meta 标签或上传的文件。Ghost 的页面将 meta 标签列为其 Site Header 字段的用途之一,因此承载脚本的字段也可以承载该标签。2能够控制 DNS 的发布商则可以改为添加记录。

气泡的链接为搜索引擎做了标识,而读者不会被追踪

气泡中的每个链接都带有 rel="sponsored noopener"。Google 搜索中心表示,应使用 sponsored 值标记“属于广告或付费展示位置的链接”,并允许在一个以空格分隔的列表中使用多个 rel 值。8发布商无需添加任何内容,因为嵌入脚本在渲染链接时已经带上了该属性。气泡在 Shadow DOM 中渲染,因此网站的 CSS 和气泡的 CSS 互不影响。

离开页面的只有三种信标:每次页面加载发送一次浏览信标,气泡保持可见满一秒时发送一次打开信标,点击链接时发送一次点击信标。AdBubbles 不设置 Cookie,不存储标识符,也不收集读者的任何个人数据。匹配发生在页面上的词语与购买这些词语的广告主之间。我们不选择哪些读者看到气泡,不在页面或网站之间跟踪读者,也不承诺任何效果。

对于拥有多个模板的网站,实际要点在于全站字段与页面级字段之间的区别。Squarespace、Ghost 和 Webflow 都各自指明了一个覆盖每个页面的字段,而 Webflow 还提供了一个其中代码“仅适用于该页面”的字段。3当读者点击气泡的链接时,发布商才能获得收入,而气泡只能在嵌入脚本运行过的地方打开。粘贴到页面级字段中的脚本只能在那一个页面上产生气泡,而全站字段才能将嵌入脚本放到每个页面上。