适用于一般场景和vuejs、angularjs、nuxtjs、nextjs 等 MVVM 单页应用
首先 需要添加 谷歌广告 连接
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXX"
crossorigin="anonymous"></script>
原理:
页面添加谷歌广告标签,触发拉取广告
关键点在于 data-ad-region 的更新,data-ad-region 代表广告位。单页应用当路由变化,
页面切换时 更新data-ad-region位标识 模拟页面切换广告位更新。
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
var adsbygoogle,html;
html = "<ins class='adsbygoogle' style='display:inline-block;width:300px;height:250px' data-ad-client='ca-pub-6743739625001258' data-ad-region='page-" + guid() + "'></ins>";
document.getElementById("demo").insertAdjacentHTML('beforebegin', html);
(adsbygoogle = window.adsbygoogle || []).push({});//触发拉取广告