Communityライティング&編集github.com

croct-tech/agent-skills

Croct を使ったパーソナライゼーションや A/B テストの計画・実装・結果解釈を支援するスキル。

agent-skills とは?

Croct でパーソナライズと実験を実装するための包括的なガイドです。ユーザーの目標をエクスペリエンス(誰に、どこに、何を表示するか)に変換し、必要に応じて実験(仮説、目標、トラフィック配分、バリアント)を追加する方法を説明します。また、スロットのセットアップ、goalCompleted イベントの追跡、A/B/n テスト、リダイレクト実験、フィーチャーフラグ実験、そして UTM キャンペーンや ABM、検索語句などのパーソナライズレシピを扱います。実験の結果を解釈するためのダッシュボードの読み方(確率、潜在損失、「推奨勝者」などのフラグ)もカバーしており、開発者はコード変更を最小限に抑えながらマーケターが管理できる環境を整えられます。このスキルは Croct プラットフォーム専用で、React、JavaScript、PHP などの SDK と連携します。

対応~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に質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Croct でパーソナライズしてテストする

マーケターはダッシュボード(app.croct.com)でエクスペリエンスと実験を管理します。あなた(エージェント)の役割は次のとおりです。

  1. 計画: ユーザーの目標をエクスペリエンス(誰 / どこ / 何)に変換し、証拠が必要な場合は実験(仮説、目標、割り当て、バリアント)も設計します。
  2. コードを配線する: ターゲット領域すべてがスロットであり、コンバージョンが goalCompleted イベントとして追跡され、オーディエンスが必要とするデータが収集されていることを確認します。
  3. オーディエンスを記述する: CQL 条件を記述します。ここにあるレシピ以外の構文については、croct-cql スキルを読み込んでください。
  4. 結果を解釈する: ドキュメントに記載されたしきい値に従ってダッシュボードを読み取ります。ダッシュボードがサポートしていない「勝者」を宣言してはいけません。

実験の開始、変更、終了のためにコードの変更が必要だとはユーザーに伝えないでください。スロットと目標が存在すれば、それ以外はすべて設定です。

メンタルモデル

概念説明ルール
エクスペリエンス1 つ以上のスロットでオーディエンスに表示されるコンテンツ誰(オーディエンス)、どこ(スロット)、何(コンテンツ)で定義されます。複数のオーディエンスが可能;それぞれにコンテンツグループを使って個別のコンテンツを割り当てます。
オーディエンスユーザーの現在のコンテキストに対して評価される CQL 条件すべてのユーザーを対象にすることも、狭いセグメントを対象にすることもできます。
優先度エクスペリエンスごとに一意のランク同じスロットでオーディエンスが重複した場合、優先度の高いエクスペリエンスが優先されます。同点はありません。
実験エクスペリエンス内の A/B/n テストエクスペリエンスごとに 1 つ。エクスペリエンスのオーディエンスとスロットを継承します。2~5 つのバリアント。
プライマリ目標 ID実験が最適化するコンバージョン追跡される goalCompleted イベントの goalId と一致する必要があります。
トラフィック割り当て実験に参加する対象ユーザーの割合(%)残りはエクスペリエンスのコンテンツを表示します。

特定のスロットにおける各ユーザーの表示内容:

ユーザー表示される内容
どのエクスペリエンスのオーディエンスにも該当しないスロットのデフォルトコンテンツ
オーディエンスに該当するが、実験に割り当てられていないエクスペリエンスのコンテンツ
オーディエンスに該当し、実験に割り当てられている割り当てられたバリアントのコンテンツ
同じスロットで複数のエクスペリエンスに一致する最も優先度の高いもの

割り当ては決定論的です。訪問者 ID は実験キーとハッシュされるため、リロードしてもバリアントが変わることはありません。露出は自動的に追跡されます。識別されたユーザーの場合、ユーザー ID が割り当てキーとなるため、バリアントはデバイス間で追跡できます(匿名ユーザーは不可)。

何を構築するか決定する

ユーザーが望むもの...構築するもの
既知のセグメントに対して異なるコンテンツエクスペリエンス(オーディエンスあり、実験なし)
変更をロールアウトする前に効果を証明したいエクスペリエンス(多くの場合「すべてのユーザー」)+ 実験
コピー、画像、レイアウト、セクションをテストしたいスロット上のコンテンツ実験(1 URL、可能な限りサーバーサイドレンダリング)
リンクの遷移先をテストしたいCTA 実験:スロットにリンク先を持たせる
要素(プロモバナーなど)の表示・非表示を切り替えたい開発者が所有する固定ロジックにはコード側の evaluate/useEvaluation のみを使用;それ以外はブール属性を持つスロットとエクスペリエンスを使用し、マーケターが誰に表示するかを制御できるようにします。詳細は croct-integrate-sdk スキルの評価ルールを参照。
表示されるコンテンツではなく、機能やフローをテストしたいフィーチャーフラグ実験:ブール属性を持つスロット、サーバー側で分岐
真に別のページ(再構築したページ、別のテンプレート、別のツールのランディングページ)をテストしたいリダイレクト実験。コンテンツのみが異なる場合はコンテンツ実験を推奨。
1 つのキャンペーンで複数のしきい値やセグメント(州ごとの送料無料など)1 つのエクスペリエンス、複数のオーディエンス、コンテンツグループ
設定した時間に開始、一時停止、再開するキャンペーンスケジューリング(アドオン)、オプションでオーディエンスのタイムゾーンで設定

実装チェックリスト

すべてのエクスペリエンスまたは実験は、設定前にコードで以下が必要です。

  • 変更される各エリアに対するスロット。ない場合: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 %})。

コンバージョンが実際に発生する場所(ブラウザ)で目標を追跡します。リダイレクト実験の場合は、両方のページで追跡します。コンバージョンがサーバー上でのみ完了する場合(支払いウェブフック、バックエンドのサインアップ)、JavaScript SDK のスタンドアロン track(@croct/plug/api)を API キーとともに使用します:そのドキュメントの例は、まさにサーバーまたはサンドボックススクリプトから送信される goalCompleted イベントです(croct-track-events スキルを参照)。オプションの userToken を受け入れます;ドキュメントには、それなしで送信されたイベントがどのように実験に帰属するかは記載されていません。

エクスペリエンスのワークフロー(ダッシュボード)

以下の手順をユーザーに伝えてください。エージェント自身がクリックすることはできません。

  1. エクスペリエンスページ > 新しいエクスペリエンス、名前を付けます。
  2. オーディエンスタブ > 新しいオーディエンス > CQL 条件を貼り付けます。複数のオーディエンスが可能です。
  3. スロットタブ > 1 つ以上のスロットを選択します(一貫したユーザージャーニーのために複数ページのスロットを組み合わせます)。
  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 つのバリアントを作成します。1 つは通常コントロールです。バリアントはスロットコンテンツをコピーするか、複製せずにエクスペリエンスコンテンツを継承できます。
  5. 各バリアントのコンテンツを設定します(必要に応じてコンテンツグループも)。
  6. ユーザーが識別されており、バリアントを維持する必要がある場合は、クロスデバイス一貫性を有効にします。
  7. 各バリアントをプレビューし、公開してから確認します:バリアントごとのセッションが分割と一致し、テストコンバージョンが正しい目標の下に表示されることを確認します。

テスト中にトラフィック配分を変更したり、バリアントを追加・削除したりしないでください。結果が無効になる可能性があります。

詳細、フィーチャーフラグ、リダイレクト:references/experiments.md および references/flag-and-redirect-experiments.md

結果の読み取り

実験ダッシュボードには上部にフラグが表示されます。それに応じて行動します。

フラグ意味行動
目標を追跡してください目標完了イベントが記録されていません追跡を修正してください;他には意味がありません
実験進行中まだ安定していません待機します。安定には各バリアント ≥ 1,000 人の訪問者、各バリアント ≥ 25 コンバージョン、かつ ≥ 1 週間の実行が必要です
推奨勝者安定しており、バリアントの PBB > 95% かつ潜在損失 < 0.1%勝者のコンテンツをエクスペリエンスに適用し、実験を停止します
明確な勝者なし安定しているが、バリアントが類似しすぎている勝者なしで終了するか、新しい仮説をテストします

メトリクスを読む前に、バリアントごとのセッション数を設定された分割と照らし合わせて確認してください。持続的な不均衡は、割り当てまたはログ記録が特定のユーザークラスをドロップしていることを意味します。

最適である確率(PBB)と潜在損失は、ベイズ推定(バリアントごとにベータ分布、モンテカルロシミュレーション)に基づいており、サンプリングなしでリアルタイムに計算されます。説明、数式、およびすべてのダッシュボードウィジェット:references/analytics.md

レシピ

簡潔なプレイブック(ABM、ブログ読者、顧客、送料無料、HubSpot フォーム、興味、リード、位置情報、マーケティングキャンペーン、オーガニックインテント、検索語句)。それぞれにオーディエンス CQL、前提となる追跡、推奨スロットが含まれます:references/playbooks.md

推奨事項 / 禁止事項

  • 推奨: 実験を公開する前に目標イベントを実装し確認します。これがないと、実験は露出を収集しますがコンバージョンは記録されません。
  • 推奨: ニッチなオーディエンスには 100% を割り当てて、テストが統計的有意性に達するようにします。
  • 推奨: リダイレクトよりも、スロット駆動のコンテンツを持つ 1 つの URL を優先します。リダイレクトはページ読み込みを追加し、結果を歪めます。
  • 推奨: リダイレクトは一時的(302/307)に保ち、ループを防ぎます。
  • 推奨: テスト終了後、コードから古いフィーチャーフラグスロットを削除します。
  • 禁止: ダッシュボードが「実験進行中」と表示している間、または生のカウント(総注文数、総サインアップ数)のみから勝者を宣言しないでください。
  • 禁止: テスト中に割り当てやバリアントリストを編集しないでください。
  • 禁止: 匿名ユーザーのクロスデバイス一貫性を期待しないでください。識別されたユーザーが必要です。
  • 禁止: 異なるドメインにリダイレクトしないでください。訪問者はドメインごとに認識されるため、コンバージョンは決して帰属しません。サブドメインの場合は、最初にセッションを共有します。
  • 禁止: 実験スロットをレンダリングするページを完全にプリレンダリングまたはキャッシュしないでください。キャッシュされた 1 つのバリアントが全員に提供されます。

ライブドキュメント

  • インデックス: https://docs.croct.com/llms.txt
  • 任意のページをマークダウンとして: .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`.

関連スキル