沃梦达编程

Vue项目如何接入谷歌联盟广告(Google Adsense)

发布时间：2025/01/12

功能介绍：Vue项目开发中在指定的地方接入谷歌联盟广告(Google Adsense)，下面编程教程网小编给大家简单介绍一下具体实现代码！

1、在index.html首页加入script通用代码

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" ></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

2、新建AdComponent.vue通用模板

<template>  
  <div>  //自己的广告联盟
    <ins class="adsbygoogle"
        style="display:block; text-align:center;"
        data-ad-layout="in-article"
        data-ad-format="fluid"
        data-ad-client="YOUR_AD_CLIENT_ID"
        data-ad-slot="YOUR_AD_CLIENT_ID"></ins>
  </div>  
</template>  
  
<script>  
export default {  
  name: 'AdComponent'  
}  
</script>  
  
<style scoped>  
</style>

3、在需要展示的地方插入

<template>
  <div>
    <adComponent></adComponent>
  </div>
</template>
<script>
import adComponent from '@/components/AdComponent.vue';  
export default {
  components: {
    adComponent
  },
}
</script>

以上是编程学习网小编为您介绍的“Vue项目如何接入谷歌联盟广告(Google Adsense)”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。