mcpField
W
webflow-browser-api

webflow-browser-api

github.com/224-industriesマーケティング・グロース1069 回インストール1 週間前に更新
リポジトリ

webflow-browser-api について

webflow-browser-api は、Analyze または Optimize が有効な Webflow サイト向けの JavaScript Browser API を解説するスキルです。開発者が同意管理、実験イベント、訪問者属性を扱う際に役立ちます。

主な機能

  1. 01訪問者のトラッキング同意管理
  2. 02実験バリエーションイベントの受信
  3. 03カスタム訪問者属性の設定
  4. 04タグやキーワードでリファレンス検索

活用シーン

  1. 01トラッキング同意の設定
  2. 02実験結果の分析ツールへの転送
  3. 03訪問者属性による対象者や結果の絞り込み

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/224-industries/webflow-skills --skill webflow-browser-api

インストール後、Claude Code で/webflow-browser-apiを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
attributes.md
consent-management.md
introduction.md
optimize-overview.md
variations.md
wf-ready.md
scripts/
search_references.py

詳細

Webflow Browser API

Browser API は、Analyze と Optimize が有効なすべての Webflow サイトで、グローバルオブジェクト wf を介して公開される JavaScript インターフェースです。手動でインストールする必要はありません。これを使って、同意を管理し、実験を追跡し、ユーザー体験をパーソナライズできます。

主な概念

  • グローバルオブジェクト wf — Analyze または Optimize が有効なすべてのサイトで自動的に利用できます
  • wf.ready() — Browser API の呼び出しはすべて、この準備完了コールバック内に記述する必要があります。references/wf-ready.md を参照してください
  • 同意管理 — トラッキングの同意を管理する 3 つのメソッド：getUserTrackingChoice()、allowUserTracking()、denyUserTracking()
  • バリエーション — onVariationRecorded() を介して実験結果を追跡し、分析ツールに転送します
  • カスタム属性 — setAttributes() を介して訪問者の属性を設定し、オーディエンスターゲティングや結果のフィルタリングに使用します（Enterprise のみ）

API メソッド

メソッド説明
wf.ready(callback)Browser API の読み込み後にコードを実行します
wf.getUserTrackingChoice()"allow"、"deny"、または "none" を返します
wf.allowUserTracking(options?)ユーザーのトラッキングを許可します
wf.denyUserTracking(options?)ユーザーのトラッキングを拒否します
wf.onVariationRecorded(callback)バリエーションイベントのコールバックを登録します
wf.setAttributes(scope, attributes)カスタム訪問者属性を設定します

重要な注意事項

  • Browser API は、Webflow Analyze または Optimize が有効なサイトでのみ利用できます
  • カスタム JavaScript 属性（setAttributes）は Enterprise サイトでのみ利用できます
  • 初期化前の呼び出しを防ぐため、API 呼び出しはすべて必ず wf.ready() 内に記述してください
  • 可能な限り早く実行されるよう、スクリプトは <head> のカスタムコードに配置してください

リファレンスドキュメント

各リファレンスファイルには、検索しやすいように name、description、tags を含む YAML フロントマターがあります。scripts/search_references.py の検索スクリプトを使って、関連するリファレンスを検索してください。

はじめに
同意管理
Optimize
リファレンスの検索
# List all references with metadata
python scripts/search_references.py --list

# Search by tag (exact match)
python scripts/search_references.py --tag <tag>

# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>

スクリプト

  • scripts/search_references.py: タグやキーワードでリファレンスファイルを検索するか、メタデータ付きですべて一覧表示します

コメント

Markdown 対応