Vue Google 广告的配置

前置条件:已经在Google AdSense 中 添加网站 并通过审核 同时已创建广告单元。

因 VUE 的 Script 配置问题,所以不能直接拷贝内容。

index.html 配置

添加 Google 广告的脚本。

复制代码
//index.template.html
/* *
在head标签中添加 script
【 **** 】:你的发布商 ID
*/
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4797644559430915"
            crossorigin="anonymous"></script>

//index.template.html
//在body标签中为window添加函数
<body>
 
  <div id="q-app"></div>

<script>
    window['googlAdsense'] = function () {
        let chlid = document.getElementsByClassName('google-adsense-slot')
        for (let index = 0; index < chlid.length; index++) {
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    }
</script>
</body>

组件中

组件中添加应用。

复制代码
onMounted(() => {
   window.googlAdsense();
});

为广告添加占位符。

复制代码
//将广告单元代码添加到盒子中
<template>
            <div class="col google-adsense-slot">
              <ins
                  class="adsbygoogle"
                  style="display: block"
                  data-ad-client="ca-pub-4797644559430915"
                  data-ad-slot="4417932244"
                  data-ad-format="auto"
                  data-full-width-responsive="true"
              ></ins>
            </div>
</template>

https://www.isharkfly.com/t/vue-google/16438/1

相关推荐
无双_Joney2 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥4 分钟前
前端必学的 CSS Grid 布局体系
前端·css
EMT4 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare5 分钟前
选择文件夹路径
前端
艾小码5 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月6 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁10 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅10 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸11 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端