开发工具分享
  • 首页
  • 计算科学
  • 文化旅游
  • 项目和网站
    • OSSEZ 计算技术
    • USRealEstate 社区
    • 地区文化
    • CWIKI.US
    • BUG.OSSEZ.COM
    • RSS.OSSEZ.COM
CWIKIUS.CN
一个有独立思考和温度的清新站
  1. Home
  2. Computer Science
  3. This article

Vue Google 广告的配置

2024年10月19日 513Browse 0Like 0Comments

前置条件:已经在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>

 

2024-10-18_19-58-39

 

组件中

组件中添加应用。

onMounted(() => {
   window.googlAdsense();
});

 

2024-10-18_20-00-52

 

为广告添加占位符。

//将广告单元代码添加到盒子中
<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>

 

2024-10-18_20-00-16
https://www.isharkfly.com/t/vue-google/16438/1

 

Tags: None
Last updated:2024年10月19日

HoneyMoose

有温度的人文和独立的思考

Like
< Previous
Next >

Comments

Cancel reply

Archives
  • July 2026
  • June 2026
  • May 2026
  • April 2026
  • March 2026
  • February 2026
  • January 2026
  • December 2025
  • November 2025
  • October 2025
  • September 2025
  • August 2025
  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • March 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
Categories
  • Computer Science (2,383)
    • Confluence (663)
    • Gradle (12)
  • U.S. (555)
  • 文化旅游 (146)

COPYRIGHT © 2020 CWIKIUS. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

湘ICP备2020018253号-1