Vue Google 广告的配置

server/2024/10/20 12:31:16/

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


http://www.ppmy.cn/server/133336.html

相关文章

【Docker】Harbor 私有仓库和管理

目录 一、搭建本地私有仓库 二、harbor简介&#xff08;特性、构成、架构的数据流向&#xff09; 2.1 什么是Harbor 2.2 Harbor的特性 2.3 Harbor的构成 2.4 Harbor的工作原理&#xff08;运行流程&#xff09; 三、harbor部署以及配置文件 1. 部署 Docker-Compose 服…

React中的useState和useEffect解析

一、组件状态管理——useState 1.定义 useState 是一个 React Hook&#xff08;函数&#xff09;&#xff0c;它允许我们向组件添加一个状态变量&#xff0c;从而控制影响组件的渲染结果 和普通JS变量不同的是&#xff0c;状态变量一旦发生变化组件的视图UI也会跟着变化&…

STM32F1+HAL库+FreeTOTS学习17——事件标志组

STM32F1HAL库FreeTOTS学习17——事件标志组 1. 事件标志组1.1 事件标志组的的引入1.2 事件标志组简介1.3 事件标志组与队列、信号量的区别 2. 事件标志组下相关API函数2. 1 xEventGroupCreate()2. 2 xEventGroupCreateStatic()2. 3 vEventGroupDelete()2. 4 xEventGroupWaitBit…

python 爬虫 入门 三、登录以及代理。

目录 一、登录 &#xff08;一&#xff09;、登录4399 1.直接使用Cookie 2.使用账号密码进行登录 可选观看内容&#xff0c;使用python对密码进行加密&#xff08;无结果代码&#xff0c;只有过程分析&#xff09; 二、代理 免费代理 后续&#xff1a;协程&#xff0c;…

fastjson注解说明,fastjson注解有那些?fastjson是java的json序列化和反序列化工具包

fastjson注解说明,fastjson注解有那些?fastjson是java的json序列化和反序列化工具包 包版本说明 fastjson请使用1.2.83以上版本,小于这个版本的存在漏洞。 fastjson请使用1.2.83以上版本,小于这个版本的存在漏洞。 fastjson请使用1.2.83以上版本,小于这个版本的存在漏洞…

Golang Map简介

Go Map Map 简介 在Go语言中提供了map数据结构来存储键值对数据。map的数据类型为map[K]V&#xff0c;其中K为键的类型&#xff0c;V为值的类型。map的键类型必须支持操作符&#xff0c;用来比较两个键是否相等。Go语言提供了4种内置的map操作: len、delete、comparison、ass…

关于C语言——对一个数据定义的两种属性

对一个数据的定义&#xff0c;需要去定义它的两种属性:数据类型和存储类型。 对于数据类型主要有: intcharlongfloatdouble 对于存储类型有这四种: auto static register extern 平时使用的时候一般不标明存储类型&#xff0c;而存储类型主动是为auto&#xff0c;自动变…

基于x86_64汇编语言简单教程1: 环境预备与尝试

目录 前言 环境配置 基本硬件与操作系统要求 WSL VSCode基本配置(For Windows) 安装基本的依赖 为您的VSCode安装插件&#xff1a; 学习要求 入门 先试试味道 前言 笔者最近正在梭哈使用NASM汇编器的x86 32位汇编&#xff0c;笔者这里记录一下一个晚上的成果。 环境…