💼 ビジネスコミュニティ

webflow-browser-api

Control Webflow Analyze and Optimize from JavaScript via the Browser API. Use when managing tracking consent, integrating CMPs (OneTrust, TrustArc), tracking experiment variations, setting custom visitor attributes, or personalizing user experiences.

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

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 の検索スクリプトを使用してください。

はじめに

references/introduction.md: 概要、機能、配置オプション、はじめに
references/wf-ready.md: wf.ready() API リファレンス

同意管理

references/consent-management.md: 同意 API、CMP 統合 (OneTrust, TrustArc)、カスタム同意ソリューション

Optimize

references/optimize-overview.md: Optimize の概要とクイックスタート
references/variations.md: バリエーションの概念と onVariationRecorded() API リファレンス
references/attributes.md: カスタム属性と setAttributes() API リファレンス

リファレンスの検索

# メタデータ付きのすべてのリファレンスをリスト表示
python scripts/search_references.py --list

# タグで検索 (完全一致)
python scripts/search_references.py --tag <tag>

# キーワードで検索 (名前、説明、タグ、コンテンツ全体)
python scripts/search_references.py --search <query>

スクリプト

scripts/search_references.py: タグ、キーワードでリファレンスファイルを検索したり、メタデータ付きのすべてをリスト表示したりします

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Webflow Browser API

The Browser API is a JavaScript interface exposed via the global wf object on all Webflow sites with Analyze and Optimize enabled. It requires no manual installation. Use it to manage consent, track experiments, and personalize user experiences.

Key Concepts

Global wf object — Automatically available on all sites with Analyze or Optimize enabled
wf.ready() — All Browser API calls must be wrapped in this readiness callback. See references/wf-ready.md
Consent management — Three methods to manage tracking consent: getUserTrackingChoice(), allowUserTracking(), denyUserTracking()
Variations — Track experiment results via onVariationRecorded() and forward to analytics tools
Custom attributes — Set visitor attributes via setAttributes() for audience targeting and result filtering (Enterprise only)

API Methods

Method	Description
`wf.ready(callback)`	Execute code after the Browser API loads
`wf.getUserTrackingChoice()`	Returns `"allow"`, `"deny"`, or `"none"`
`wf.allowUserTracking(options?)`	Opt user into tracking
`wf.denyUserTracking(options?)`	Opt user out of tracking
`wf.onVariationRecorded(callback)`	Register a callback for variation events
`wf.setAttributes(scope, attributes)`	Set custom visitor attributes

Important Notes

The Browser API is only available on sites with Webflow Analyze or Optimize enabled
Custom JavaScript attributes (setAttributes) are only available on Enterprise sites
Always wrap all API calls inside wf.ready() to prevent calls before initialization
Place scripts in <head> custom code for earliest possible execution

Reference Documentation

Each reference file includes YAML frontmatter with name, description, and tags for searchability. Use the search script in scripts/search_references.py to find relevant references.

Getting Started

references/introduction.md: Overview, capabilities, placement options, getting started
references/wf-ready.md: wf.ready() API reference

Consent Management

references/consent-management.md: Consent APIs, CMP integrations (OneTrust, TrustArc), custom consent solutions

Optimize

references/optimize-overview.md: Optimize overview and quickstart
references/variations.md: Variations concept and onVariationRecorded() API reference
references/attributes.md: Custom attributes and setAttributes() API reference

Searching References

# 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

scripts/search_references.py: Search reference files by tag, keyword, or list all with metadata