天下网吧 >> 网吧天地 >> 天下码农 >> 前端开发 >> 正文

动态加载Google Adsense广告,并判断是否微信小程序环境,动态引入js代码

需求:

H5和PC端的页面需要加载Google Adsense的广告并显示。微信小程序环境下不加载广告,因为微信小程序环境下加载Adsense代码会提示「域名非法」的问题导致整个H5页面无法在小程序里打开。

分析:

分析发现,Google Adsense的代码,是需要引入JS文件的,引入Adsense的JS代码后,就会自动执行并iframe一个页面,这个页面访问的域名因为没有在小程序后台添加到业务域名(也没有办法添加)。所以必须判断微信小程序环境,发现是微信小程序环境就不引入adsense的js代码。这样才能规避微信小程序下页面提示「域名非法」而无法打开的问题。

完整代码:

<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="auto"
	data-ad-client="ca-pub-6518549715186400" data-ad-slot="3773431114" data-full-width-responsive="false"></ins>
<script src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
	function dynamicLoadJs(url, callback) {
		var head = document.getElementsByTagName('head')[0];
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = url;
		script.crossorigin = 'anonymous';
		if (typeof (callback) == 'function') {
			script.onload = script.onreadystatechange = function () {
				if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
					callback();
					script.onload = script.onreadystatechange = null;
				}
			};
		}
		head.appendChild(script);
	}
	function showAdGoogle() {
		var ua = navigator.userAgent.toLowerCase();
		var isInMp = false;
		//引入的js文件地址
		let url = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6518549715186400';
		dynamicLoadJs(url, function () {
			(adsbygoogle = window.adsbygoogle || []).push({});
		});
	}
	if (ua.match(/MicroMessenger/i) == "micromessenger") {
		wx.miniProgram.getEnv((res) => {
			if (res.miniprogram) {
				isInMp = true;
			} else {
				showAdGoogle();
			}
		})
	} else {
		showAdGoogle();
	}
</script>

执行效果:

微信小程序里可以愉快的打开相关页面而不提示错误了。H5和PC端正常加载和使用Adsense广告

本文来源:天下网吧 作者:天下码农

声明
声明:本站所发表的文章、评论及图片仅代表作者本人观点,与本站立场无关。若文章侵犯了您的相关权益,请及时与我们联系,我们会及时处理,感谢您对本站的支持!联系Email:support@txwb.com,系统开号,技术支持,服务联系QQ:1175525021本站所有有注明来源为天下网吧或天下网吧论坛的原创作品,各位转载时请注明来源链接!
天下网吧·网吧天下
  • 本周热门
  • 本月热门
  • 阅读排行