开发者工具 – 牛国柱

产品经理, 工具 12 月 24,2016

如何利用chrome开发者工具查看广告位的所属者

在前几年的广告网络时代，我们可以通过创意四个角上所显示的logo来判断这个广告是哪一家公司提供，并且据此知道该广告位被哪一家公司买断（广告位代码的提供方），因为广告网络时代，每家network的广告只有可能投放在自己掌控的媒体流量上。

但是在程序化营销的时代，由于系统的开放性，每家交易平台之间互相对接，每个DSP都对接到了多数的交易平台，而广告投放时显示的logo现在都是各个DSP自己的logo，于今年9月1日实施的新广告法也对此做出了明确的要求，必须添加需求方平台的logo（详细内容可以点击互联网广告管理暂行办法了解）。但展示该广告的广告位却是由交易平台提供的。此时就出现了广告标识的logo与页面上代码的不一致性。

在现在的环境下，当投放广告出现问题或者其他原因需要了解广告位的信息时，仅靠广告创意上的logo就无法识别了。此时，chrome浏览器的开发者工具会帮助我们（每一个chrome浏览器已经默认安装了开发者工具）。

第一步，我们需要打开开发者工具，可以通过三种方式打开：
1、在广告的上方点击鼠标的右键，在打开的对话框中点击“检查”
open DevTools
2、在工具栏上选择“更多工具”，点击“开发者工具”
tab in toolbar
3、快捷方式操作，MAC系统使用command+option+i，windows系统直接使用F12。

推荐使用第一种方式，可以直接定位到要查看的广告上。

第二步，查找到该广告位的最上层代码。以我的博客上的“广告实验田”为例，下面是将鼠标放到“广告实验田”下方的广告上，点击鼠标邮件，点击“检查”后弹出的开发者工具显示的内容：
content in DevTools
我们可以看到图中红色区域部分，这里标识了当前广告在页面代码中的结构，我们可以通过这个结构一直追溯到页面的body部分。另外，图中的蓝色区域就是当前显示的广告的请求代码，当把鼠标挪到蓝色区域的时候，页面上的广告区域也会被蒙上一层半透明层，如下图所示：
ad in html
通过这一点，结合上面提到的可现实当前广告所在页面结构的功能，我们就可以找到该广告在页面上的代码内容。

第三步，根据刚才提到的规则，一层一层往上查看，直到某次，页面上的广告不再被蒙上半透明层，那么该层级的下一层就是该广告位在页面上的原始代码所在的位置，或者说，最后一次出现广告被蒙上半透明层的那个层级是该广告位在页面上的原始代码所在区域。刚才的例子中，找到的层级如下：
find the top
div.textwidget就是当前广告位的原始代码所在的位置，该广告位的代码如图红色区域所示。根据这段代码特征，我们可以了解到该广告位为谷歌所有。这样我们就找到了广告位资源的真正拥有者，就是这么简单。

作者牛国柱

Tag 开发者工具