在React中使用Danderously set InnerHTML方式添加广告时,Adsense广告无法正常工作
由于Adsense需要在页面加载时解析为正常的HTML,而使用Danderously set InnerHTML方式添加的内容会在组件挂载时一次性渲染,导致Adsense无法正常加载。因此,需要使用异步脚本加载的方式。
具体做法是在组件挂载完成后,在DOM上添加异步脚本标签,并设置src为Adsense的脚本文件地址,使其可以独立加载并正常解析。
代码示例:
class Ads extends React.Component {
componentDidMount() {
const adScript = document.createElement('script');
adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
adScript.async = true;
document.body.appendChild(adScript);
}
render() {
return ' }} />;
}
}
注意,实际使用时需要将data-ad-client和data-ad-slot替换为自己Adsense的广告位ID。
相关内容