Croctプラットフォーム統合と移行 は何をしますか?
ここにあるすべての統合は、動作しているCroct SDKの上に成り立っています。それらは、データの入力(イベント、プロファイル属性)、Croctデータの出力(Clarity)、またはプラットフォームのコンテンツ内にスロットコンテンツをレンダリング(CMS、HubSpotフォームID)を行います。移行は、別のツールのフラグやエクスペリエンスをスロットに置き換えます。
統合の選択
| プラットフォーム / 目標 | 統合の内容 | インストール方法 | 参照 |
|---|---|---|---|
| Storyblok | Optimizeアプリがブロックをスロットにリンク;SDKがストーリー取得中にリンクされたブロックを交換(JS、PHP) | Storyblokアプリ + croct init または @croct/plug-storyblok / croct/plug-storyblok | storyblok.md |
| Sanity | Sanityコンテンツをfallbackとしてスロットフェッチ;Croctパッケージ不要 | croct init + fetchContent | headless-cms.md |
| Strapi | マッピングスロットを介して動的ゾーンコンポーネントをスロットにマッピング | croct init + fetchContent | headless-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 スクリプト または GTM | ecommerce.md |
| Googleタグマネージャー / GA4 データレイヤー | 推奨データレイヤーイベントを目標およびeコマースイベントとして転送 | google-tag-manager.js スクリプト または GTM | analytics-and-crm.md |
| Microsoft Clarity | Croctのエクスペリエンス、オーディエンス、実験バリアントでClarityセッションにタグ付け | clarity.js スクリプト または GTM | analytics-and-crm.md |
| HubSpot フォーム | 送信目標、プロファイルエンリッチメント、テスト用スロットから提供されるフォームID | HubSpot埋め込み周辺のコード | analytics-and-crm.md |
| 6sense、Demandbase | リッチなfirmographics属性をプロファイルに書き込み | Croctスクリプト または GTM | firmographics.md |
| Clearbit Reveal、ZoomInfo WebSights | 追加したコードを介して会社属性をプロファイルに書き込み | GTMカスタムHTML | firmographics.md |
| Mutiny、Ninetailed からの移行 | コンセプトマッピングとスロット、オーディエンス、実験による段階的な置き換え | croct init + エリアごとのスロット | migrations.md |
対象のプラットフォームのリファレンスのみを読んでください。プラットフォームがリストにない場合、ドキュメントには専用の統合がないため、その旨を伝え、独断する前に https://docs.croct.com/llms.txt を確認してください。
横断的なルール
- SDKが第一。 すべての統合には、ページまたはサーバーにCroct SDKが必要です。統合スクリプトは、これがないと機能しません。
croct initでセットアップするか、croct-integrate-sdkスキルを参照してください。 croct initを優先してください(Storyblok、Sanity、Strapi、Hydrogen、移行の場合)。スタックを検出し、SDKを配線します(Storyblok JSの場合は、storyblokInitをwithCroctでラップします)。ユーザーが明示的に要求した場合、またはCLIで配線できない場合(サポートされていないフレームワークでのPHP Storyblokなど)にのみ、手動の手順を使用してください。- CMSコンテンツは常にフォールバックです。 既存のCMSまたはハードコードされたコンテンツを
fallbackとして渡し、失敗したリクエストや遅いリクエストでも今日のページがレンダリングされるようにします。Sanity、Strapi、Ninetailedの場合は、ユーザーにデフォルトコンテンツをどこに置くべきか(Croct(推奨)か、metadata.contentSource === 'slot'を介したCMSか)を尋ねてください。headless-cms.md を参照してください。 - Croctコンポーネントは、CMSスキーマをミラーリングし、同じ属性名を使用するため、スロットコンテンツとCMSコンテンツは同じレンダリングコンポーネントで交換可能です。
- エクスペリエンスや実験を公開する前に目標を追跡してください。そうしないと、初期データにはコンバージョンのない露出が表示されます。
- ファームグラフィックデータは最初のページビューでは利用できません。 アカウントベースのエクスペリエンスは後続のページビューでアクティブになるように設計し、最初のインプレッションにはキャンペーン、リファラー、またはロケーションを使用してください。
- CQLのカスタム属性は
custom.プレフィックスを削除します:custom.firmographics.profile.industryはuser's firmographics's profile's industryです。プロファイルは最大10個のカスタム属性を許可します。これらの例を超える場合は、croct-cqlスキルを参照してください。 - 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.js | Liquid layout/theme.liquid の </head> の前、defer 付き | 任意;ロード時にSDKに登録します |
shopify-pixel-tracker.js | Shopifyカスタムピクセル内でインポート | n/a |
GTMタグのレシピ(ユーザーに伝達)
「GTM経由」で提供される上記のスクリプトの場合:タグ > 新規;名前を付け(例:「データレイヤーイベントをCroctに送信」);タグタイプ カスタムHTML;<script src="..."> タグを貼り付け;トリガー 初期化 - すべてのページ;保存、送信してコンテナを公開します。
ワークフロー
- テーブルからプラットフォームと目標を特定し、そのリファレンスを開きます。
- そこにリストされている前提条件(アカウント、SDK、プロバイダータグ、プラン)を確認します。
- コード変更を行います。ダッシュボードの手順(Storyblokアプリ、Shopify管理画面、GTM、Croct管理アプリ)は、簡潔なチェックリストとしてユーザーに任せます。エージェントはそれらを実行できません。
- ユーザーにリファレンスの確認手順を提供します。
中止して質問
- リポジトリから明らかでない場合、サイトが使用している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>