最近项目中需要对于adsense的固定广告是否正常展示，做一个简单的事件打点，来确认广告投放效果。由于固定广告没有回调事件，但是谷歌固定广告对于展示成功的广告，都会主动去更改
ins元素上的data-ad-status属性值。因此针对这个特点，我们可以手动实现成功展示和失败展示的事件打点, 以及后期可以针对这个打点，做一些特殊处理。
1、MutationObserver
Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知
注意：Mutation Observer 是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。避免DOM 变动频繁，导致事件重复执行
使用方式：
- 1、新建观察者实列
javascript
var observer = new MutationObserver(function (mutations, observer) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});每次DOM变动后，回调函数就会触发。mutations是变动数组，observer是观察器实例
- 2、使用observe，启动监听
ini
const insEle = document.querySelector(".adsbygoogle");
var options = {
'attributes':true
} ;
observer.observe(insEle, options);第一个参数：所要观察的 DOM 节点
第二个参数：一个配置对象，指定所要观察的特定变动
- 3、options设置
childList：布尔值，子节点的变动（指新增，删除或者更改）。attributes：布尔值，属性的变动。characterData：布尔值，节点内容或节点文本的变动。subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）。
注意：childList、attributes 和 characterData 中，必须有一个参数为 true。否则会抛出 TypeError 异常
- 4、取消监听
ini
observer.disconnect();调用该方法后，DOM 再发生变动，也不会触发观察器
2、案列
js
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxx"
crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxx" data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
const observerAds = () => {
try {
const insEle = document.querySelector(".adsbygoogle");
if (insEle) {
const observer = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes') {
if (mutation.attributeName === 'data-ad-status') {
console.log(insEle.getAttribute("data-ad-status"));
//logEvent(`ad_load_${insEle.getAttribute("data-ad-status")}`);
observer.disconnect();
}
}
}
});
const config = { attributes: true, attributeOldValue: true };
observer.observe(insEle, config);
}
} catch (error) {
console.log(error)
}
}
observerAds();
</script>3、相似api
MutationObserver和IntersectionObserver是两个在web开发中常用的观察者对象，都是用于监测特定DOM元素的变化。
差异性：
MutationObserver用于监测DOM树的变化。它可以观察指定DOM节点及其子节点的变化，包括节点的添加、删除、属性的变化IntersectionObserver用于监测DOM元素与其父容器或视口的交叉状态。它可以观察指定DOM元素与其父容器或视口的交叉情况，包括元素进入视口、离开视口、部分可见等 之前介绍过IntersectionObserver,可参考之前文章