Community写作与编辑github.com

使用 Croct 进行个性化与测试

用于规划和实施 Croct 个性化或 A/B 测试:创建体验(受众、插槽、内容、优先级、排期、草稿),添加实验(A/B/n、主目标 ID、流量分配、变体、跨设备一致性),编写所需代码(插槽、`croct.track('goalCompleted', {goalId})`、`orderPlaced`、`leadGenerated`、`userSignedUp`),服务端特性标识实验、重定向实验、个性化方案(UTM 营销活动、ABM、搜索词、地理位置、免运费、兴趣、博客读者、潜在客户、客户、自然流量意图、HubSpot 表单),或查看体验、实验、应用或工作区仪表盘(成为最优的概率、潜在损失、“实验进行中”、“推荐获胜者”、“无明显胜者”、“追踪你的目标”)。措辞示例:“为 LinkedIn 访问者个性化英雄区域”、“对此 CTA 进行 A/B 测试”、“哪个变体获胜了?”、“为什么我的实验显示没有转化?”

使用 Croct 进行个性化与测试 是什么?

该技能(来自 croct-tech/agent-skills 仓库)使 AI 代理能够代表营销人员使用 Croct 平台规划和实施个性化与实验。它涵盖从构思到执行和结果分析的全流程:将用户目标转化为带受众和插槽的体验,添加带有变体、流量分配和主目标的 A/B/n 实验,并确保正确植入代码,包括通过 `croct.track('goalCompleted', {goalId})` 埋点转化事件。该技能明确区分了内容实验、特性标识实验和重定向实验,并提供了针对营销活动、ABM、搜索意图等常见场景的“配方”。支持平台包括 Web(React、纯 JavaScript、PHP)和任何可通过 Croct SDK 集成的环境。其工作原理是引导代理使用 Croct 仪表盘配置体验和实验,并使用 CQL(通过 croct-cql 技能单独处理)编写受众条件。最后,它提供了基于贝叶斯推断的明确规则来理解实验结果(如“推荐获胜者”、“实验进行中”),避免了误判。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/croct-tech/agent-skills/tree/HEAD/skills/croct-personalize-and-test

Installed? Explore more 写作与编辑 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

使用 Croct 进行个性化与测试 是做什么的?

营销人员在仪表盘(app.croct.com)中管理体验和实验。你作为代理的职责是:

  1. 规划:将用户的目标转化为体验(谁/哪里/什么),当用户需要验证时,转化为实验(假设、目标、分配、变体)。
  2. 编写代码:确保每个目标区域都是一个插槽,转化作为 goalCompleted 事件被追踪,并且受众所需的数据已被收集。
  3. 编写受众:CQL 条件。对于超出此处方案范围的语法,请加载 croct-cql 技能。
  4. 解读结果:使用文档中规定的阈值读取仪表盘;不要在仪表盘不支持时宣布获胜者。

不要告诉用户启动、更改或结束实验需要更改代码。一旦插槽和目标存在,其他所有内容都是配置。

思维模型

概念定义规则
体验向一个或多个插槽中的受众展示的内容由 谁(受众)、哪里(插槽)、什么(内容)定义。允许多个受众;通过内容组为每个受众提供其自己的内容。
受众根据用户当前上下文评估的 CQL 条件可以针对所有用户或一个细分群体。
优先级每个体验的唯一排名当同一插槽上的受众重叠时,优先级更高的体验胜出。不允许平局。
实验体验内的 A/B/n 测试每个体验一次只能有一个实验。继承体验的受众和插槽。2 到 5 个变体。
主目标 ID实验优化的转化必须与追踪到的 goalCompleted 事件的 goalId 匹配。
流量分配进入实验的合格用户百分比其余用户将看到体验内容。

对于给定插槽,谁看到什么:

用户看到的内容
不在任何体验的受众中插槽默认内容
在受众中,但未分配到实验体验内容
在受众中,且已分配所分配变体的内容
在相同插槽上匹配多个体验优先级最高的那个体验

分配是确定性的:访客 ID 与实验键一起哈希,因此重新加载永远不会改变变体。曝光会被自动追踪。对于已识别的用户,用户 ID 是分配键,因此变体可以跨设备跟随他们(匿名用户则不行)。

决定要构建什么

用户想要...构建
为已知细分群体提供不同内容带受众的体验,无实验
在全面推出前证明一项改动有效体验(通常是“所有用户”)+ 实验
测试文案、图片、布局或某个部分在插槽上进行内容实验(单个 URL,尽可能服务端渲染)
测试链接的跳转目标CTA 实验:插槽保存链接目标地址
显示或隐藏一个元素(促销横幅)仅在开发者拥有固定逻辑时使用代码侧 evaluate/useEvaluation;否则,使用包含布尔属性的插槽加上体验,以便营销人员控制谁看到它。请参阅 croct-integrate-sdk 技能的评估规则
测试功能或流程,而非可见内容特性标识实验:服务端分支的、带有布尔属性的插槽
测试两个真正独立的页面(重建的页面、其他模板、其他工具的登陆页面)重定向实验。当只有内容不同时,优先使用内容实验
一个活动中包含多个阈值或细分(按州免运费)一个体验,多个受众,内容组
一个在设定时间开始、暂停或恢复的活动排期(附加功能),可选择在受众的时区进行

实施检查清单

在配置之前,每个体验或实验都需要这些代码:

  • 每个变化的区域都有一个插槽。如果缺少:npx croct@latest add slot <slot-id>@1 并使用 SDK 渲染它(请参阅 croct-use-cli 和 croct-integrate-sdk 技能)。没有插槽,任何体验都无法改变该区域。
  • 转化的 goalCompleted 事件(实验必需)。目标 ID 必须等于实验的主目标 ID。如果目标是新的,请在开始实验之前交付它。
  • 相关情况下更丰富的转化事件:orderPlaced、leadGenerated、userSignedUp 会在目标旁边填充收入、潜在客户和注册小部件。
  • 受众需要读取的数据。UTM 参数、地理位置和会话数据是自动的;基于帖子、兴趣、订单、潜在客户或注册的方案需要追踪这些事件(请参阅 croct-track-events 技能)。
  • 如果变体需要在不同设备间保持一致,需要进行用户标识。

追踪目标

// components/HomeHero.tsx (React; @croct/plug-next 使用 'use client' 进行配置)
import type {ReactElement} from 'react';
import {useContent, useCroct} from '@croct/plug-react';

export function HomeHero(): ReactElement {
  const {content} = useContent('home-hero@1');
  const croct = useCroct();

  function handleClick(): void {
    croct.track('goalCompleted', {
      goalId: 'hero-cta-click',
    });
  }

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.subtitle}</p>
      <a href={content.button.link} onClick={handleClick}>{content.button.label}</a>
    </div>
  );
}
// 纯 JavaScript
import croct from '@croct/plug';

croct.track('goalCompleted', {goalId: 'sign-up'});

该事件还接受可选的 value 和 currency({goalId: 'signup', currency: 'USD', value: 50})。在服务端渲染的 PHP 栈中,使用模板助手在浏览器中追踪(Blade 中的 @croct ... @endcroct,Twig 中的 {% apply croct %} ... {% endapply %})。

在转化实际发生的浏览器中追踪目标。对于重定向实验,在两个页面上都进行追踪。当转化仅在服务器上完成时(支付 webhook、后端注册),使用来自 @croct/plug/api 的 JavaScript SDK 独立 track 函数并附带 API 密钥:其文档示例正是从服务器或沙箱脚本发送的 goalCompleted 事件(请参阅 croct-track-events 技能)。它接受可选的 userToken;文档未说明没有此 token 发送的事件如何归属于实验。

体验工作流程(仪表盘)

将这些步骤传递给用户;你不能自己点击它们。

  1. 体验页面 > 新建体验,为其命名。
  2. 受众标签页 > 新建受众 > 粘贴 CQL 条件。允许多个受众。
  3. 插槽标签页 > 选择一个或多个插槽(跨页面组合插槽以保持一致的用户旅程)。
  4. 内容标签页 > 编辑每个插槽的内容(并且当受众不同时,编辑每个内容组的内容)。
  5. 可选的 实验标签页(见下文)。
  6. 审查草稿更改,然后发布(或排期)——或者先预览。

在开发过程中,像 property welcome of page's query is "true" 这样的受众允许用户使用 ?welcome=true 来切换体验。在正式环境中将其替换为真实的受众。

有关状态、优先级、排期、草稿更改和内容的详细信息:references/experiences.md。

实验工作流程

  1. 写下假设:变更内容、它影响的指标以及原因。
  2. 选择主目标 ID(仪表盘会建议已追踪的 ID)。确认它会被触发。
  3. 设置流量分配。对于小众受众使用 100%。在整个测试期间保持稳定。
  4. 创建 2 到 5 个变体,其中一个通常是对照组。变体可以复制插槽内容,或者继承体验内容,而不是重复创建。
  5. 设置每个变体的内容(以及内容组,如果需要)。
  6. 如果用户已识别并且应保持其变体,则启用跨设备一致性。
  7. 预览每个变体,发布,然后验证:每个变体的会话数与分割匹配,并且测试转化显示在正确的目标下。

切勿在测试中途更改流量分配或添加/删除变体;这样做可能会使结果无效。

详细信息、特性标识和重定向:references/experiments.md 和 references/flag-and-redirect-experiments.md。

阅读结果

实验仪表盘顶部会显示一个标志。根据其内容采取行动:

标志含义操作
追踪你的目标未记录到目标完成事件修复追踪;其他一切均无意义
实验进行中尚未稳定等待。稳定需要每个变体访客数 ≥ 1,000,每个变体转化数 ≥ 25,并且运行时间 ≥ 1 周
推荐获胜者稳定,并且一个变体的 PBB > 95% 且潜在损失 < 0.1%将获胜内容应用到体验并停止实验
无明显胜者稳定,但变体过于相似无胜者结束或测试新的假设

在读取任何指标之前,请根据配置的分割检查每个变体的会话数。持续的不平衡意味着分配或日志记录正在丢失某一类用户。

成为最优的概率(PBB)和潜在损失来自使用每个变体的 Beta 分布和蒙特卡洛模拟进行的贝叶斯推断,实时计算,无需采样。解释、公式和每个仪表盘小部件:references/analytics.md。

方案

简明的操作手册(ABM、博客读者、客户、免运费、HubSpot 表单、兴趣、潜在客户、地理位置、营销活动、自然流量意图、搜索词),每个都包含其受众 CQL、前提追踪和推荐的插槽:references/playbooks.md。

应做 / 不应做

  • 应做:在发布实验之前实施并验证目标事件。没有它,实验会收集曝光但不会收集转化。
  • 应做:对于小众受众分配 100% 的流量,以便测试能够达到统计显著性。
  • 应做:优先使用单个 URL 配合插槽驱动的内容,而不是重定向;重定向会增加页面加载并可能使结果产生偏差。
  • 应做:保持重定向为临时性的(302/307)并防止循环。
  • 应做:测试结束后,从代码中移除过时的特性标识插槽。
  • 不应做:在仪表盘显示“实验进行中”时宣布获胜者,或仅凭原始计数(总订单数、总注册数)宣布获胜者。
  • 不应做:在测试中途编辑分配或变体列表。
  • 不应做:期望匿名用户实现跨设备一致性;这需要已识别的用户。
  • 不应做:重定向到不同的域名:访客是按域名识别的,因此转化永远不会被归属。对于子域名,请首先共享会话。
  • 不应做:完全预渲染或缓存包含实验插槽的页面;一个缓存的变体会被提供给所有用户。

实时文档

  • 索引:https://docs.croct.com/llms.txt
  • 任何页面以 markdown 格式:添加 .md 后缀,例如 https://docs.croct.com/explanation/experiment.md
  • 搜索:https://docs.croct.com/api/search.md?term=<terms>

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

croct-tech/agent-skills

>- Use when writing, reading, reviewing, or debugging Croct's Contextual Query Language (CQL): audience criteria, `croct.evaluate()` / `useEvaluation` / `<Personalization query>` / Next.js `cql` tag queries, Evaluation API `query` bodies (`/client/web/evaluate`, `/external/web/evaluate`), and dynamic content values (`"type": "dynamic"`, `"expression"`). Covers context variables (user, session, page, location, campaign, cart, device, browser, context, now/today), data types and conversions, accessors and selectors (`'s`, `property X of`, `[1st]`, `[*]`, `[...]`), tests (`is`, `matches`, `is like`, `contains either`, `is between`, `is defined`, `is returning`), quantifiers (`some ... satisfies`), macros, modifiers, event expressions (`user has viewed a page`, `user has abandoned a cart`, `user has completed goal`), audience estimation, and recipes. Triggers: "write an audience", "target mobile users in New York", "CQL syntax error", "audience never matches", "unavailable estimate".

croct-tech/agent-skills

>- Use when connecting Croct to a third-party platform or migrating to Croct from another personalization or experimentation tool. Covers Storyblok (Optimize by Croct app, @croct/plug-storyblok, Storyblok withCroct, resolveContent, croct/plug-storyblok, CroctStoriesApi), Sanity and Strapi (slot fallback, dynamic zones, metadata.contentSource), Shopify Hydrogen storefront events, Shopify custom pixel (croctPixel, PUBLIC_CROCT_SHOPIFY_PIXEL, checkout and order tracking), VTEX, Google Tag Manager data layer, Microsoft Clarity tags, HubSpot forms (hbspt.forms.create, hs-form-event), firmographic providers 6sense, Demandbase, Clearbit Reveal, and ZoomInfo WebSights (firmographics attributes, account-based audiences in CQL), and migrations from Mutiny and Ninetailed (Experience component, Contentful sunset). Triggers include cdn.croct.io/plug-integration scripts, "personalize Storyblok blocks", "track Shopify checkout", "send VTEX events", "ABM personalization", "replace Mutiny".

croct-tech/agent-skills

>- Use when installing or using a Croct SDK in application code: rendering slot content, evaluating CQL queries, server or client fetching, prerendering, identifying users, app ID / API key env vars, testing, or debugging. Covers JavaScript (`@croct/plug`, `croct.fetch`, `croct.evaluate`), React (`@croct/plug-react`, `<CroctProvider>`, `useContent`, `<Slot>`, `useEvaluation`, `useCroct`), Next.js (`@croct/plug-next`, `fetchContent`, `cql`, middleware/proxy, `NEXT_PUBLIC_CROCT_APP_ID`, `CROCT_API_KEY`), Vue (`@croct/plug-vue`), Nuxt (`@croct/plug-nuxt`), Shopify Hydrogen (`@croct/plug-hydrogen`), PHP (`croct/plug-php`), Laravel, Symfony, and Drupal. Triggers: slot IDs like `home-hero@1`, `SlotContent`, "Croct is not plugged in", "initial content is required for server-side rendering", "Did you forget to configure Croct's middleware?", CORS errors.

croct-tech/agent-skills

>- Use when designing or changing Croct content models: regular vs union components, what becomes a component, slot, structure, or primitive attribute; writing component schema JSON (`structure`, `union`, `reference`, `text`, `number`, `boolean`, `list`, `@croct/file`, `@croct/richText` rich text, `format`, `choices`, `optional`, `private`, `position`); writing content definition JSON (`static`/`dynamic` values, `nullable`, `default`, `{{placeholder}}` paths); slot default, localized, experience, experiment, or content group content; schema limit errors (30 attributes, 6 nesting levels, 10 union members, complexity score 50); component versioning and breaking changes (`home-hero@2`); refactoring (duplicate and modify, duplicate and replace, flatten and merge); Markdown in text attributes with `@croct/md-lite`. Phrasings: "model content for a hero", "add an attribute to the banner component", "support variations", "component is too complex", "localize the hero", "translations", `preferredLocale`.

相关技能