联系支持

我们通过电子邮件回复，通常两天内。

为防止滥用，Google reCAPTCHA 会检查这次提交，其间会向 Google 传输数据。脚本只在此表单打开时才加载。

← 全部文章

通过 Google Tag Manager 添加 Stats4U 计数器

· Lukas Wojcik

博客上早在 2015 年就有一篇关于此事的指南。它的截图里，Tag Manager 的样子早已今非昔比，而它七个步骤中的一步——勾选 document.write——现在已经完全不需要了。本文将取代那篇指南。

本文也回答了那篇旧指南放弃回答的问题。旧指南说，配合 Tag Manager 应该使用隐形计数器，理由是无法控制 Stats 图片会显示在什么位置。其实是可以控制的，方法就在本文末尾。

简明版本

在 Tag Manager 中：Tags → New → Custom HTML，然后在 HTML 字段中粘贴这一行：

20157 — 个步骤今天3 — 个字段加一个触发器document.write 那一步没了——脚本不再用它 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

把触发条件设为All Pages，保存，然后发布容器。把 YOUR-ID 替换成计数器编号，编号可以在统计页面上找到。

整件事就这么多——三个字段加一个触发条件，而 2015 年那会儿需要七个步骤。不需要勾选任何关于 document.write 的选项，因为脚本已经不再使用它。

这实际上做了什么，以及为什么这可能不是想要的效果

这个脚本会把计数器放置在页面中紧跟在它自身之后的位置。直接粘贴进自己的 HTML 时，这样做完全正确：计数器会出现在代码所在的地方。

通过 Tag Manager 添加时情况就不同了，因为代码放在哪里不再由站点决定，而是由容器决定，而容器通常位于文档的 head 部分，或者容器代码片段被安装的任何位置。于是计数器就被插入到了那个位置——不是在页脚，也不是在侧边栏，而是 Tag Manager 恰好把标签注入进去的任何地方。

对于隐形计数器来说，这一点根本无关紧要，这也是旧指南推荐使用隐形计数器的原因。980 号设计什么都不显示，981 号设计只显示一个链接到统计页面的小图标。如果这就是全部所需，上面的简明版本已经足够，读到这里就可以了。

要让可见计数器出现在特定位置，下面是具体做法。

控制计数器出现的位置

这个脚本还有第二种模式，是旧指南从未提到过的。这时不使用 data-id 属性，而是给它一个列表，它会按 ID 去查找占位元素。

第一步——在页面中放置一个占位元素，放在计数器该出现的位置。这一步要写在站点自己的模板里，而不是 Tag Manager 里，因为我们正是要把 Tag Manager 排除在这个决定之外：

<div id="s4u_cp0"></div>

第二步——在 Tag Manager 中，改用下面这段代码，取代之前的一行式代码。标签类型仍然是 Custom HTML：

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

第三步——更改触发条件。这一步最容易让人栽跟头。All Pages 会在 Tag Manager 能做到的最早时机触发，而这往往早于占位元素在文档中出现的时间。更合适的是内置的 DOM Ready 触发条件。计数器必须在这个 div 之后到达，而不是之前。

现在，计数器只会出现在这个 div 里面，不会出现在其他任何地方。

控制它出现在哪些页面上

这里有两个相互独立的控制手段，值得分开来理解。

占位元素是其中之一。看看函数内的第一行：如果页面上没有 s4u_cp0，它就会停止执行，脚本甚至连下载都不会发生。于是，包含这个 div 的模板会有计数器，不包含的就没有——这个决定权留在站点自己的模板里，不需要改动 Tag Manager，也不需要发布。

触发条件是另一个手段。若要改在 Tag Manager 里做这个决定，可以给触发条件加一个条件——只在 Page Path 匹配指定的值时，才在 DOM Ready 时触发。规则如果关乎 URL，就用这种方式；规则如果关乎模板，就用占位元素。

一个页面上放不止一个计数器

这个列表可以放任意多个。列表中的位置，对应占位元素 ID 里的数字：

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

第一个会放进 s4u_cp0，第二个放进 s4u_cp1。撰写本文时两者都在浏览器中测试过：第一个渲染成了一个 20×20 的图标，第二个渲染成了一个 162×25 的长条，各自都出现在自己的占位元素里，页面上其他地方不会出现。

四个容易栽跟头的地方

  • 两种方法不能同时使用。如果同一个标签既有 data-id 属性，又设置了列表，结果就是两个计数器，而且这两次访问会被分别计数。
  • 使用列表时，s4ustyleid 必须设置。data-style 属性在被省略时，会悄悄回退到 30 号设计。而列表版本没有这种回退机制，会请求一个空设计。
  • 缺少占位元素会静默失败。没有计数器，没有错误提示，控制台里也什么都没有。如果什么都没出现，先检查一下 ID——是 s4u_cp0，数字零，不是字母 O。
  • 隐形计数器故意不带链接。980 号设计渲染时不带链接，因为在别人的页面上放一个透明的一像素点击区域，与其说是功能，不如说是陷阱。需要链接的话，用 981 号，也就是那个小图标。

检查是否生效

使用 Tag Manager 的Preview模式并加载页面。这个标签应该会出现在 DOM Ready 事件已触发的标签列表里。随后统计页面上就能看到结果——通过 Preview 产生的访问，和其他任何访问一样会被计入，所以数字应该会在几秒钟内发生变化。

如果标签触发了，但页面上什么都没出现，问题多半出在占位元素或触发条件上，按这个可能性顺序排查。

广告