Freestar Pubfig Ad Slot 反应组件

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

安装

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

使用量

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 文档 详情

FreestarAdSlot. ClearPageTalgging (英语:FreestarAdSlot (FreeStarAdSlot)) 空出目标(英语:FreestarAdSlot) 空出目标(英语:FreestarAdSlot) GRP 清除目标呼叫的代理服务器,用于清除页面级目标. 见 GPT 文档 详情

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

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

词汇表

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

目标 一套广告单位定位的目标值. 见 GPT 文档 详情

绕过 Freestar 广告放置

如果您想绕过 Freestar Ad 的设置, 直接让 GAM 的广告单位 这里

排队自由星Adplaces

如果您想让自由之星库预先装入, 但需要等待广告发送, 直到完成 buisness 逻辑, 请遵守指令 这里

将新版本放入 npm

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

先决条件(一次性设置)

1. 在共享账户下登录到 npm :

   npm login
   

   您将会通过电子邮件在 freestar_engineering 邮箱。 使用它完成登录.

2. 确认您已发布访问权限 @freestar 范围 :

   npm access list packages | grep pubfig-adslot
   

   线 @freestar/pubfig-adslot-react-component 必须显示 read-write如果没有,请 @freestar org 管理员要添加你.

释放流量

1. 打开您更改的拉动请求 master。 。 。 .
2. 批准后,合并为 master 并在当地拉出:

   git checkout master
   git pull origin master
   

3. 赖斯图尔依附区和从清洁状态重建:

   rm -rf node_modules
   npm install
   npm run build
   

4. 跳出版本, 生成本地承诺并标记 :

   npm version patch -m "%s"
   # use `minor` or `major` instead of `patch` if appropriate
   

5. 根据被撞倒的版本重建 :

   npm run build
   

6. 发布到 npm( 运行前见下文“ 2FA gotcha ”) :

   npm publish
   

7. 按下版本承诺和新标签到 GitHub :

   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. 验证发布成功 :

   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 来本地使用符号 :

   npm config set //registry.npmjs.org/:_authToken=npm_xxxxxxxxxxxxxxxxxxxxxx
   

6. 运行 npm publish没有检察官办公室的迅速行动,它将取得成功.

出版后清理

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

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

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