# @freestar/pubfig-adslot-react-component 中文文档

规范地址：https://npmcn.com/package/%40freestar/pubfig-adslot-react-component/

版本：3\.6\.4
npm 元数据更新时间：2026-07-13T14:47:02.877Z
中文译文更新时间：2026-11-15T13:25:02.949Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40freestar/pubfig-adslot-react-component
原文对照：https://npmcn.com/package/%40freestar/pubfig-adslot-react-component/?lang=original
项目主页：https://github.com/freestarcapital/pubfig-adslot-react-component#readme
源码仓库：https://github.com/freestarcapital/pubfig-adslot-react-component

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：43 kB，3 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：3 个
- peer 依赖：prop-types ^15\.7\.2 ，react \>=15\.7\.0
- 首次发布：2019-09-10T15:52:46.726Z
- 最新版本发布：2026-07-13T14:47:02.756Z
- 近 30 天下载量：38526（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：92（近 12 个月 2 个）

## 中文简介

Freestar Pubfig AdSlot 反应组件

## 安装

```sh
npm install @freestar/pubfig-adslot-react-component
```

也可以使用：`pnpm add @freestar/pubfig-adslot-react-component`、`yarn add @freestar/pubfig-adslot-react-component`、`bun add @freestar/pubfig-adslot-react-component`

## README

# Freestar Pubfig Ad Slot 反应组件

## 注:截至v1.1,不再需要装入头部的核心Pubfig码的先决条件.

### 安装

```sh
npm install --save @freestar/pubfig-adslot-react-component
```

### 使用量

```js
import React, { Component } from 'react'

import FreestarAdSlot from '@freestar/pubfig-adslot-react-component'

import './demo.css'

class Demo extends Component {
  render() {
    const placementName = 'PublisherName_970x250_728x90_320x50'
    const slotId = 'in_content_ad_1'
    const publisher = 'publisherName'
    const targeting = { key1: 'value1', key2: 'value2' }
    const { adRefresh } = this.state
    
    return (
      <div>
        <FreestarAdSlot
          publisher={publisher}
          placementName={placementName}
          slotId={slotId}
          targeting={targeting}
          channel='custom_channel'
          classList={['m-30', 'p-15', 'b-thin-red']}
          onNewAdSlotsHook={(placementName) => console.log('creating ad', placementName)}
          onDeleteAdSlotsHook={(placementName) => console.log('destroying ad', placementName)}
          onAdRefreshHook={(placementName) => console.log('refreshing ad', placementName)}
        />
        <button onClick={this.onAdRefresh}>Trigger Refresh</button>
      </div>
    )
  }
}

export default Demo
```

### 道具

**出版社** A 类 _所需经费_ 出版商的字符串,由Freestar提供.

**放置Name** A 类 _所需经费_ 广告单元设置的字符串,由Freestar提供.

**时间档** 一个 _选项_ 字符串以指定包含在adslot周围的分录的元素 ID。 设置的默认值 .

**目标** 一个 _选项_ 用于瞄准的密钥/值对对象.

**频道** 一个 _选项_ 要使用的自定义频道字符串 .

**类列表** 一个 _选项_ 表示任何附加类的字符串数组,这些类应被应用到广告槽的包装多姆元素上.

**更新广告** 一个 _选项_ 数字绑入广告刷新。 增加此值以触发更新广告插槽 。 请咨询您的 Freestar 支援团队了解更多信息.

**在NewAdSlotsHook上发布** 一个 _选项_ 返回 : `placementName` 当组件 **挂载** 并请求发布广告.

**在删除AdSlotsHook上** 一个 _选项_ 返回 : `placementName` 当组件 **卸载**。 。 。 .

**重新定义** 一个 _选项_ 返回 : `placementName` 当组件刷新广告时.

**诚信** 一个 _选项_ 属性,当通过时,可以为我们的 puffig 库提供 SRI 。 组件在装入 puffig 时将使用此值来表示完整性属性

### API 方法

**FreestarAdSlot.setPage目标** GPT 设置的代理目标调用设置页面级别目标 。 见 [GPT 文档](https://developers.google.com/doubleclick-gpt/reference#googletag.PubAdsService_setTargeting) 详情

**FreestarAdSlot. ClearPageTalgging (英语:FreestarAdSlot (FreeStarAdSlot)) 空出目标(英语:FreestarAdSlot) 空出目标(英语:FreestarAdSlot)** GRP 清除目标呼叫的代理服务器,用于清除页面级目标. 见 [GPT 文档](https://developers.google.com/doubleclick-gpt/reference#googletag.PubAdsService_clearTargeting) 详情

**FreestarAdSlot.trackPageView (英语)** Freestar.trackPageview()方法的代理服务器.

Freestar 收集数据值, 如 url 位置, 然后用于各种表格 。 为了正确跟踪使用单页应用程序(SPA)的数据站点,或使用幻灯片/木马改变urls/url参数的网站,出版商必须采取这些新行动,以确保所收集数据的准确性。 当位置和/或url更新 DOM 和/或窗口的生命周期时,不会重新装入 puffig.js 脚本. 为了解决这个问题,出版商必须使用freestar.trackPageview()方法. 这将确保新的url在为该页或该视图收集数据的整个过程中得到存储和使用.

### 词汇表

**放置Name** 从Google Ad Manager(以前称为DFP/Adx)获得的价值,由Freestar提供.

**目标** 一套广告单位定位的目标值. 见 [GPT 文档](https://developers.google.com/doubleclick-gpt/guides/key-value-targeting) 详情

### 绕过 Freestar 广告放置

如果您想绕过 Freestar Ad 的设置, 直接让 GAM 的广告单位 [这里](https://npmcn.com/package/%40freestar/pubfig-adslot-react-component/README-BYPASS.md)

### 排队自由星Adplaces

如果您想让自由之星库预先装入, 但需要等待广告发送, 直到完成 buisness 逻辑, 请遵守指令 [这里](https://npmcn.com/package/%40freestar/pubfig-adslot-react-component/README-QUEUE.md)

### 将新版本放入 npm

此软件包作为 npm 发布 `@freestar/pubfig-adslot-react-component` 共享 `freestar_engineering` 账户.

#### 先决条件(一次性设置)

1.  在共享账户下登录到 npm :
    
    ```sh
    npm login
    ```
    
    您将会通过电子邮件在 `freestar_engineering` 邮箱。 使用它完成登录.
    
2.  确认您已发布访问权限 `@freestar` 范围 :
    
    ```sh
    npm access list packages | grep pubfig-adslot
    ```
    
    线 `@freestar/pubfig-adslot-react-component` 必须显示 `read-write`如果没有,请 `@freestar` org 管理员要添加你.
    

#### 释放流量

1.  打开您更改的拉动请求 `master`。 。 。 .
2.  批准后,合并为 `master` 并在当地拉出:
    
    ```sh
    git checkout master
    git pull origin master
    ```
    
3.  赖斯图尔依附区和从清洁状态重建:
    
    ```sh
    rm -rf node_modules
    npm install
    npm run build
    ```
    
4.  跳出版本, 生成本地承诺并标记 :
    
    ```sh
    npm version patch -m "%s"
    # use `minor` or `major` instead of `patch` if appropriate
    ```
    
5.  根据被撞倒的版本重建 :
    
    ```sh
    npm run build
    ```
    
6.  发布到 npm( 运行前见下文“ 2FA gotcha ”) :
    
    ```sh
    npm publish
    ```
    
7.  按下版本承诺和新标签到 GitHub :
    
    ```sh
    git push origin master --follow-tags
    ```
    
8.  从新标签创建 GitHub 发布 :
    -   打开 `https://github.com/freestarcapital/pubfig-adslot-react-component/releases/tag/vX.Y.Z`
    -   单击“ 从标签创建释放”
    -   标题 : `vX.Y.Z`. 标记"Set as the last release". 发表.
9.  验证发布成功 :
    
    ```sh
    npm view @freestar/pubfig-adslot-react-component version
    ```
    
    应该打印你刚刚发布的版本.

#### 2FA得到了恰和如何绕道

这个 `@freestar` npm组织执行2FA写作. 这个 `freestar_engineering` 账户被配置为通过电子邮件发送一次性密码 **仅用于登录**,不用于出版业务。 结果, `npm publish` hTTP 403 失败 :

```
npm error 403 Forbidden ... Two-factor authentication or granular access token with bypass 2fa enabled is required to publish packages.
```

目前的Npm CLI没有促使检察官办公室参与这一流动,而且 `np` (参考了老文件)继承了同样的问题。 可靠的工作是使用 **颗粒访问令牌, 启用 2FA 绕行**数字 :

1.  登录到 `https://www.npmjs.com` 作为 `freestar_engineering`。 。 。 .
2.  转到"Access Tokens" - >"Generate New Token" - >"Granular Access Token".
3.  配置 :
    -   **脚本名称 :** 任何说明(例如:. `pubfig-adslot-react-publish`(中文(简体) )
    -   **过期 :** 30天(视需要延长)
    -   **软件包和范围 - 权限 :** 读写
    -   **包和范围 - 选择 :** `@freestar/pubfig-adslot-react-component` (或全文) `@freestar` 范围)
    -   **副路由2FA 用于此标志 :** 启用
4.  生成并复制代号( 只刷一次) 。 开始 `npm_`。 。 。 .
5.  配置 npm 来本地使用符号 :
    
    ```sh
    npm config set //registry.npmjs.org/:_authToken=npm_xxxxxxxxxxxxxxxxxxxxxx
    ```
    
6.  运行 `npm publish`没有检察官办公室的迅速行动,它将取得成功.

#### 出版后清理

一旦发布开始,请从您的本地配置中删除此符号 :

```sh
npm config delete //registry.npmjs.org/:_authToken
```

可选地撤销该标志 `https://www.npmjs.com/settings/freestar_engineering/tokens`。 。 。 .

## 常见问题

### @freestar/pubfig-adslot-react-component 是什么？

Freestar Pubfig AdSlot 反应组件

### 如何安装 @freestar/pubfig-adslot-react-component？

在项目目录运行 npm install @freestar/pubfig-adslot-react-component，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prop-types（^15\.7\.2 ）、react（\>=15\.7\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @freestar/pubfig-adslot-react-component 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/freestar\_\_pubfig-adslot-react-component 是否存在。

### @freestar/pubfig-adslot-react-component 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @freestar/pubfig-adslot-react-component 可以商用吗？

@freestar/pubfig-adslot-react-component 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @freestar/pubfig-adslot-react-component 的下载量有多少？

根据 npm 官方下载统计，@freestar/pubfig-adslot-react-component 在 2026/10/16 – 2026/11/14 这 30 天内被下载 38,526 次，日均约 1,284 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @freestar/pubfig-adslot-react-component 还在维护吗？

最新版本 3\.6\.4 发布于 2026/07/13（4 个月前）；至今共发布 92 个版本，其中过去 12 个月发布了 2 个；首次发布于 2019/09/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。