Vue3 接入Google AdSense
vue3引入谷歌广告方法
前言：个人博客 我的博客网站也是通过这样的方法接入，不添加插件
为什么选择谷歌广告
门槛低，作为新生站点，缺的是内容和流量， 国内最大就是百度联盟，但是对这2点都有要求。
相比较之下除了对内容审核是否灰色以外，对流量要求不大
vue3接入
前置条件：已经在Google AdSense 中 添加网站 && 通过审核 && 已经创建广告单元
我这里项目是quasar V2 ssr，主要以项目为主讲解
index.template.html 对标 正常vue项目 index.html
//index.template.html
/* *
在head标签中添加 script
【 **** 】：你的发布商 ID
*/
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=****"
crossorigin="anonymous"
>
</script>
//index.template.html
//在body标签中为window添加函数
<body><div id="q-app"></div><script>window['addAds'] = function () {let chlid = document.getElementsByClassName('adsItem')for (let index = 0; index < chlid.length; index++) {(adsbygoogle = window.adsbygoogle || []).push({});}}</script>
</body>
组件中应用
onMounted(() => {window.addAds();
});
//将广告单元代码添加到盒子中
<template><div class="col adsItem"><insclass="adsbygoogle"style="display: block"data-ad-client="**"data-ad-slot="**"data-ad-format="auto"data-full-width-responsive="true"></ins></div>
</template>
注意事项
Google AdSense 中添加域名 ，本地开发时会 广告返回403。只有运行对应谷歌添加域名，才会显示
Google AdSense 广告单元有几种，根据需要添加。效果 个人博客 也是这样的方式添加的
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！