Community研究&データ分析github.com

Croctプラットフォーム統合と移行

CroctをStoryblok、Shopify、VTEXなどのサードパーティプラットフォームに接続したり、MutinyやNinetailedからCroctに移行するためのスキルです。

Croctプラットフォーム統合と移行 とは?

このスキルは、Croctを様々なサードパーティプラットフォームと統合したり、他のパーソナライゼーションツールや実験ツールからCroctに移行するための包括的なガイドです。Storyblok(Optimize by Croctアプリ、@croct/plug-storyblok、withCroctなど)、Sanity、Strapi(スロットフォールバック、動的ゾーン、metadata.contentSource)、Shopify Hydrogenストアフロントイベント、Shopifyカスタムピクセル(croctPixel、PUBLIC_CROCT_SHOPIFY_PIXEL、チェックアウトおよび注文追跡)、VTEX、Googleタグマネージャーデータレイヤー、Microsoft Clarityタグ、HubSpotフォーム(hbspt.forms.create、hs-form-event)、ファームグラフィックプロバイダー(6sense、Demandbase、Clearbit Reveal、ZoomInfo WebSights)、およびMutinyやNinetailedからの移行をカバーします。各統合は、Croct SDKが動作していることを前提とし、イベントやプロファイル属性のデータ入力、Clarityへのデータ出力、CMSやHubSpotフォームIDへのスロットコンテンツレンダリングを行います。CDNスクリプト(cdn.croct.io/plug-integration/)を使用して簡単にセットアップでき、GTM経由でも導入可能です。開発者は、このスキルを使用して、Croctを様々なプラットフォームにシームレスに統合し、パーソナライズされたエクスペリエンスを提供できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/croct-tech/agent-skills/tree/HEAD/skills/croct-integrate-platforms

Installed? Explore more 研究&データ分析 skills: affaan-m/uspto-database, affaan-m/scholar-evaluation, affaan-m/literature-review · View all 6 →

お気に入りのAIに質問する

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

ドキュメント

Croctプラットフォーム統合と移行 は何をしますか?

ここにあるすべての統合は、動作しているCroct SDKの上に成り立っています。それらは、データの入力(イベント、プロファイル属性)、Croctデータの出力(Clarity)、またはプラットフォームのコンテンツ内にスロットコンテンツをレンダリング(CMS、HubSpotフォームID)を行います。移行は、別のツールのフラグやエクスペリエンスをスロットに置き換えます。

統合の選択

プラットフォーム / 目標統合の内容インストール方法参照
StoryblokOptimizeアプリがブロックをスロットにリンク;SDKがストーリー取得中にリンクされたブロックを交換(JS、PHP)Storyblokアプリ + croct init または @croct/plug-storyblok / croct/plug-storyblokstoryblok.md
SanitySanityコンテンツをfallbackとしてスロットフェッチ;Croctパッケージ不要croct init + fetchContentheadless-cms.md
Strapiマッピングスロットを介して動的ゾーンコンポーネントをスロットにマッピングcroct init + fetchContentheadless-cms.md
Shopify Hydrogen自動ストアフロントイベント、顧客識別;SDKの使用法はcroct-integrate-sdkスキルにありますcroct init(Hydrogen SDK)ecommerce.md
Shopify チェックアウト / 注文(Liquid または Hydrogen)カスタムピクセルがcheckoutStarted、orderPlaced、およびカスタムイベントを追跡ストアフロントプラグイン + Shopifyカスタムピクセルecommerce.md
Shopify Liquid テーマコンテンツ用JavaScript SDK;イベント用GTM統合;チェックアウト用ピクセルスクリプトタグecommerce.md
VTEX Store Framework(VTEX IO)ストアイベントを目標およびeコマースイベントとして転送;プロファイルをエンリッチvtex.js スクリプト または GTMecommerce.md
Googleタグマネージャー / GA4 データレイヤー推奨データレイヤーイベントを目標およびeコマースイベントとして転送google-tag-manager.js スクリプト または GTManalytics-and-crm.md
Microsoft ClarityCroctのエクスペリエンス、オーディエンス、実験バリアントでClarityセッションにタグ付けclarity.js スクリプト または GTManalytics-and-crm.md
HubSpot フォーム送信目標、プロファイルエンリッチメント、テスト用スロットから提供されるフォームIDHubSpot埋め込み周辺のコードanalytics-and-crm.md
6sense、Demandbaseリッチなfirmographics属性をプロファイルに書き込みCroctスクリプト または GTMfirmographics.md
Clearbit Reveal、ZoomInfo WebSights追加したコードを介して会社属性をプロファイルに書き込みGTMカスタムHTMLfirmographics.md
Mutiny、Ninetailed からの移行コンセプトマッピングとスロット、オーディエンス、実験による段階的な置き換えcroct init + エリアごとのスロットmigrations.md

対象のプラットフォームのリファレンスのみを読んでください。プラットフォームがリストにない場合、ドキュメントには専用の統合がないため、その旨を伝え、独断する前に https://docs.croct.com/llms.txt を確認してください。

横断的なルール

  1. SDKが第一。 すべての統合には、ページまたはサーバーにCroct SDKが必要です。統合スクリプトは、これがないと機能しません。croct init でセットアップするか、croct-integrate-sdk スキルを参照してください。
  2. croct initを優先してください(Storyblok、Sanity、Strapi、Hydrogen、移行の場合)。スタックを検出し、SDKを配線します(Storyblok JSの場合は、storyblokInit を withCroct でラップします)。ユーザーが明示的に要求した場合、またはCLIで配線できない場合(サポートされていないフレームワークでのPHP Storyblokなど)にのみ、手動の手順を使用してください。
  3. CMSコンテンツは常にフォールバックです。 既存のCMSまたはハードコードされたコンテンツを fallback として渡し、失敗したリクエストや遅いリクエストでも今日のページがレンダリングされるようにします。Sanity、Strapi、Ninetailedの場合は、ユーザーにデフォルトコンテンツをどこに置くべきか(Croct(推奨)か、metadata.contentSource === 'slot' を介したCMSか)を尋ねてください。headless-cms.md を参照してください。
  4. Croctコンポーネントは、CMSスキーマをミラーリングし、同じ属性名を使用するため、スロットコンテンツとCMSコンテンツは同じレンダリングコンポーネントで交換可能です。
  5. エクスペリエンスや実験を公開する前に目標を追跡してください。そうしないと、初期データにはコンバージョンのない露出が表示されます。
  6. ファームグラフィックデータは最初のページビューでは利用できません。 アカウントベースのエクスペリエンスは後続のページビューでアクティブになるように設計し、最初のインプレッションにはキャンペーン、リファラー、またはロケーションを使用してください。
  7. CQLのカスタム属性は custom. プレフィックスを削除します: custom.firmographics.profile.industry は user's firmographics's profile's industry です。プロファイルは最大10個のカスタム属性を許可します。これらの例を超える場合は、croct-cql スキルを参照してください。
  8. Storyblok固有の注意点: OptimizeにはScaleプランとStoryblokベンダーの承認(Croctサポート経由)が必要です。テーブルおよび参照フィールドはパーソナライズできません。

CDN統合スクリプト

すべて https://cdn.croct.io/plug-integration/ からロードされます:

スクリプト場所ロードタイミング
google-tag-manager.js<head> または <body>、または GTM任意;データレイヤーを再生
clarity.js<head> または <body>、または GTM任意;Clarityを待機
vtex.js<head> または <body>、または GTMできるだけ早く;初期のイベントは失われます
6sense.js、demandbase.js<head> または <body>、または GTMプロバイダーが訪問者を識別するのを待機
shopify-pixel.jsLiquid layout/theme.liquid の </head> の前、defer 付き任意;ロード時にSDKに登録します
shopify-pixel-tracker.jsShopifyカスタムピクセル内でインポートn/a

GTMタグのレシピ(ユーザーに伝達)

「GTM経由」で提供される上記のスクリプトの場合:タグ > 新規;名前を付け(例:「データレイヤーイベントをCroctに送信」);タグタイプ カスタムHTML;<script src="..."> タグを貼り付け;トリガー 初期化 - すべてのページ;保存、送信してコンテナを公開します。

ワークフロー

  1. テーブルからプラットフォームと目標を特定し、そのリファレンスを開きます。
  2. そこにリストされている前提条件(アカウント、SDK、プロバイダータグ、プラン)を確認します。
  3. コード変更を行います。ダッシュボードの手順(Storyblokアプリ、Shopify管理画面、GTM、Croct管理アプリ)は、簡潔なチェックリストとしてユーザーに任せます。エージェントはそれらを実行できません。
  4. ユーザーにリファレンスの確認手順を提供します。

中止して質問

  • リポジトリから明らかでない場合、サイトが使用しているSDKまたはフレームワーク。
  • CMS統合およびNinetailedの場合:デフォルトコンテンツをCroctとCMSのどちらに置くべきか。
  • Shopifyピクセルの場合:すべての訪問者に対して実行するか、分析の同意がある場合のみ実行するか。これはユーザーが判断すべき法的な決定です。
  • ファームグラフィックスの場合:ライセンスを取得しているプロバイダー。ユーザーが持っていないプロバイダータグは追加しないでください。

禁止事項

  • 6senseまたはDemandbaseの属性名を発明しないでください。リファレンスのテーブルを使用してください。
  • SDKでShopifyのチェックアウトを追跡しようとしないでください。チェックアウトではストアフロントスクリプトは実行されません。ピクセルを使用してください。
  • Hydrogenでは、Shopifyピクセルがlocalhost、Oxygenプレビュー、またはストアフロントのサブドメインではないチェックアウトドメインで動作することを期待しないでください(ドキュメントにはこの注意事項がHydrogen用に記載されています)。
  • FastStoreにはVTEXスクリプトを使用しないでください。GTM統合を使用してください。
  • MutinyまたはNinetailedからオーディエンスをインポートしないでください。ドキュメントにはCQLで書き換えられると記載されています。
  • ドキュメントに移行ガイドがないツール(MutinyとNinetailedのみ存在)を移行しないでください。その旨を伝え、最初に https://docs.croct.com/llms.txt を確認してください。

ライブドキュメント

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

croct-tech/agent-skills

>- Use when planning or implementing personalization or A/B testing with Croct: creating an experience (audience, slots, content, priority, scheduling, drafts), adding an experiment (A/B/n, primary goal ID, traffic allocation, variants, cross-device consistency), wiring the code it needs (slots, `croct.track('goalCompleted', {goalId})`, `orderPlaced`, `leadGenerated`, `userSignedUp`), server-side feature-flag experiments, redirect experiments, personalization recipes (UTM campaigns, ABM, search terms, location, free shipping, interests, blog readers, leads, customers, organic intent, HubSpot forms), or reading the experience, experiment, application, or workspace dashboards (probability to be best, potential loss, "Experiment in progress", "Recommended winner", "No clear winner", "Track your goal"). Phrasings: "personalize the hero for LinkedIn visitors", "A/B test this CTA", "which variant won?", "why does my experiment show no conversions?".

関連スキル