内容个性化分析
优化网络预览面板
此软件包执行首端浏览器预览面板 优化 Web SDK。它作为基于 Lit 的网络组件加载到 DOM 中 微前端和通过优化网络所暴露的预览桥向 Web SDK 说话 SDK运行时间.
[大
从v1升级? 跟着 v1-v2 迁移指南 并与升级的 Web SDK 软件包对齐此软件包.
开始
使用与国家预防机制兼容的软件包管理器安装,例如:
pnpm add @contentful/optimization-web-preview-panel
导入附加功能;支持CJS和无害环境管理模块系统,无害环境管理优先:
import attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel'
将预览面板与已有的,未修改的内容交付 API 客户端相接. 默认, 附加函数使用由优化Web SDK创建的浏览器单通:
attachOptimizationPreviewPanel({
contentful: contentfulClient,
})
当您的应用程序已经获取预览内容时, 通过 entries 相反:
attachOptimizationPreviewPanel({
entries: {
audiences: audienceEntries,
experiences: experienceEntries,
},
})
附加函数将面板附加到 DOM 上并添加打开它的切换按钮. 没错 安全地拨打不止一次; 反复拨打重复使用飞行中或完成的接驳板附件。 这个 面板搜索对观众使用模糊匹配并优化名称和亮点匹配文本 结果列表.
[大
导入此软件包没有副作用 。 它不附加面板,定义自定义元素, 插入样式、 触摸存储或变异全局
attachOptimizationPreviewPanel(...)实值 电话.
何时使用此软件包
使用 @contentful/optimization-web-preview-panel 当Web SDK或React Web SDK集成需要时
已存在的 Contentful SDK 客户端上的浏览器预览面板。 应用程序代码可以通过
一个明显的优化 Web SDK 实例,但常见浏览器流量使用
window.contentfulOptimization。 。 。 .
前置条目
使用 entries 当应用程序不能给浏览器预览面板一个直接内容客户端时,或者当
它已经拥有查询层。 这包括图QL 查询适配器、 氢加载器、 SSR 数据
交接、标签过滤内容查询和代理 API .
这个 entries 选项有此形状:
attachOptimizationPreviewPanel({
entries: {
audiences,
experiences,
},
})
每个值既可以是Contentful风格的条目收藏,也可以是只读的Contentful系列
条目。 预览面板将数组正常化为条目收藏,只保留 nt_audience 项目
从 audiences,仅保留 nt_experience 来自 experiences,并保留
experiences.includes.Entry 因此可以显示链接的变体名称.
如果两者兼有 entries 财务报告和审定财务报表 contentful 提供, entries 胜利且预览面板不获取
通过内容客户端.
常见路径 :
- 内容客户端 - 通过
contentful首先当浏览器可以使用已有的内容时 发送API客户端. - 图QL - 将图表QL 节点映射到内容性条目对象,然后通过数组为
entries.audiences财务报告和审定财务报表entries.experiences。 。 。 . - 氢加载机和苏维埃 - 在装载器或服务器路线上装入受众和经验,
串行到浏览器中,然后随附
entries。 。 。 . - 标签过滤查询 - 直接通过过滤内容集。 还是小组 在构建定义之前按内容类型过滤.
- 代理 APIs - 回来
{ audiences, experiences }从代理中取出,然后将该对象作为entries。 。 。 .
通用配置
| 选项 | 需要吗? | 默认 | 说明 |
|---|---|---|---|
contentful | 有条件 | 不详 | 用于读取预览内容的现有内容客户端 |
entries | 有条件 | 不详 | 预选受众和经验条目 |
optimization | 没有 | window.contentfulOptimization | 现有优化 Web SDK 实例 |
nonce | 没有 | undefined | 当启用严格的CSP时, CSP 非ce 应用到 Lit 样式 |
提供其中之一 contentful 或者说 entries。 。 。 .
对于完整的附加函数签名,请使用生成的 预览面板参考。 。 。 .
生产捆绑控制
预览面板用于开发和建构。 消费者自己制定政策 并可以在环境支持的条件中将附件调用封装:
import attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel'
if (import.meta.env.PUBLIC_OPTIMIZATION_ENABLE_PREVIEW_PANEL === 'true') {
void attachOptimizationPreviewPanel({ contentful: contentfulClient })
}
当消费者捆绑者用建设时间来取代这个条件时 false 值和履行
dead-code 消除后,可删除预览面板导入图
生产产出.
内容安全政策支助
在严格的CSP环境中,直接通过非ce:
attachOptimizationPreviewPanel({ contentful: contentfulClient, nonce })
或者设置 window.litNonce 在附载面板之前:
window.litNonce = nonce
attachOptimizationPreviewPanel({ contentful: contentfulClient })
相关
- 预览面板生成参考 - 说吧 导出附加函数引用
- 优化 Web SDK - 提供预览桥的浏览器SDK
- 优化反应 Web SDK - 常用的反应层 带有预览面板
- 反应网络集成指南 - 说吧 react 应用程序中的预览设置