Microsoft Clarity Flutter SDK、Web版は対象外だった
書いた経緯
プロジェクトでClarityを使っていて、「Flutter連携できるみたいだから連携してみようか」という話になりました。
ところが調べてみると、Zennで「Clarity」タグで検索しても4本しか記事がない...。公式ドキュメントはありますが、思ったより情報が少なくて困りました。
結局、色々遠回りして半日くらい調査に費やしてしまったので、同じように調査している人の役に立てばと思って記事にします。
結論から言うと
- Mobile版（iOS/Android）→ clarity_flutter SDKが使える（Flutter 3.32以降必要）
- Web版 → 公式SDKは使えない。GTM経由とかの普通の方法で入れる
そもそもMicrosoft Clarity Flutter SDKって？
2025年6月16日にリリースされた、Microsoft公式のFlutter SDK。
対応プラットフォームを見ると Android, iOS, Linux, macOS, Windows
...あれ、Webは？
ハマったポイント1 Web版は対象外だった
最初は「Flutter WebでもSDK使えるんじゃない？」と思って色々試しました。
clarity_webっていう非公式パッケージも見つけて「これか！」と思ったんですが、よく調べたら内部的には普通のJavaScript SDKを使ってるだけでした。
結局、Web版は従来通りのJavaScript SDKやGTM経由で入れるしかないみたいです。
ハマったポイント2 Flutter 3.29.3では動かない
Mobile版なら使えるはず！と思ってclarity_flutterを入れてみたら、こんなエラーが
Error: Type 'ui.RSuperellipse' not found.
何これ...？と思って調べたら、RSuperellipseっていうAPIがFlutter 3.32.0で追加されたものでした。
うちのプロジェクトは3.29.3。Flutterのバージョンアップは影響範囲が大きいので、今回は見送りに。
参考：https://github.com/flutter/flutter/pull/160883
「Flutterとして認識される」って何？
ここが一番混乱したところ。
「Flutterアプリとして認識される」って聞くと、Clarityのダッシュボードに「これはFlutterアプリです！」って表示されるのかと思いますよね。
実際には違いました。
Clarityのプロジェクトタイプは2種類だけ
- Webプロジェクト
- モバイルアプリプロジェクト
Flutter、React Native、ネイティブアプリ...
全部ひっくるめて「モバイルアプリプロジェクト」として扱われます。
つまり、Flutterで作ったかどうかは区別されません。
参考：https://learn.microsoft.com/en-us/clarity/mobile-sdk/sdk-getting-started
で、結局どうしたか
Web版は既にGTM経由でClarityが動いてたので、何もしませんでした。
Mobile版も、Flutterのバージョンアップが必要なので今回は見送り。
調査に時間かかったわりに、何も変更しないという結論に...
まとめ
- Web版でFlutter SDKは使えない（そもそも対象外）
- Mobile版はFlutter 3.32以降が必要
- 既にGTM経由でClarity動いてるなら、Web版は追加対応不要
情報が少なくて遠回りしてしまいましたが、誰かの参考になれば嬉しいです！
Discussion