Framerの新機能「Advanced Analytics」の使い方!ノーコードでA/Bテストやクリック測定を行う手順

Framerの新機能「Advanced Analytics」の使い方!ノーコードでA/Bテストやクリック測定を行う手順

FramerのBusinessプラン以上で使える「Advanced Analytics」の導入手順を解説。外部ツール不要でクリック測定、コンバージョンファンネル、A/Bテストをサイト速度を落とさずに実装する検証プロセスを公開します。

1. 導入(リード文)

Framerで制作したサイトのコンバージョン率を改善したいけれど、Googleオプティマイズの終了以降、手軽なA/Bテストツールが見つからずに悩んでいませんか。外部の計測スクリプトを埋め込むとサイトの読み込み速度が低下し、モバイルのCore Web Vitalsスコアが悪化するトレードオフに直面するケースが多々ありますよね。

実際に弊社で検証したところ、Framer公式の「Advanced Analytics」アドオンを使うことで、サイトの表示速度を1ミリ秒も犠牲にせず、レイアウトのガタつき(レイアウトシフト)や一瞬白い画面が映るフリッカー現象も一切なしで、クリック測定やA/Bテストの環境が整いました。設定にかかる時間はわずか10分ほど。本番環境での具体的な挙動と設定手順を共有します。

2. Advanced Analyticsの有効化と初期設定手順

Framerの高度な分析機能は、Businessプランを契約しているプロジェクトで「Advanced Analytics」アドオンを追加することで利用可能になります。Enterpriseプランの場合は、利用量に応じた従量課金制が適用されます。すでにBusinessプランを契約しており、外部ツールのタグ埋め込みによる速度低下を避けたい人に向いていますが、FreeプランやProプランのまま手軽に試したい人には向きません。まずは30日間の無料トライアルを開始する手順を踏みましょう。画面左上の「Project Settings」から設定を行います。

  1. 画面左上の「Project Settings」アイコンをクリックして設定画面を開きます。

  2. 左側メニューの「Plans」を選択し、「Add-ons」セクションまでスクロールします。

  3. 「Advanced Analytics」の項目を見つけ、「Start 30-day Free Trial」ボタンをクリックします。

3. クリック測定とフォーム送信のイベントトラッキング設定

アドオンを有効化すると、特別なコードを1行も書くことなく、ボタンのクリックやフォーム送信の追跡が始まります。これまでGTM(Googleタグマネージャー)でトリガーを1つずつ設定していた手間(Before)が、Framer上で要素に名前をつけるだけで自動計測される状態(After)に変わるのが最大のメリットです。イベントトラッキングの設定を進めましょう。まずはキャンバス(Canvas)画面を開きます。

リンククリックの計測手順

  1. キャンバス(Canvas)上で、計測したいボタンやテキストリンクの要素を選択します。

  2. 右側のプロパティパネルで、リンク(Link)の設定が正しく適用されているか確認します。

  3. サイトをパブリッシュ(Publish)し、実際にスマートフォンやPCからリンクをクリックしてテストを行います。

コンバージョンファンネルの作成手順

ユーザーがどのページを経由して最終的なコンバージョン(問い合わせ完了など)に至ったかを可視化するファンネルを作成します。

  1. 画面上部の「Analytics」タブをクリックして分析ダッシュボードを開きます。

  2. 「Funnels」メニューから「Create Funnel」を選択します。

  3. ステップ1に「トップページ(/)」、ステップ2に「料金ページ(/pricing)」、ステップ3に「問い合わせ完了ページ(/thanks)」のように、ユーザーの遷移経路を登録します。

4. サイト速度を落とさないA/Bテストの作成手順

FramerのA/Bテストは、エッジサーバー側で配信の振り分けを行うため、JavaScriptによるクライアントサイドの書き換えが発生しません。これにより、SEO評価に悪影響を与えるレイアウトシフト(CLS)を完全に防ぐことができます。テストの配信設定を確認しましょう。画面上部の「Analytics」タブから操作を行います。

  1. 画面上部の「Analytics」タブから「A/B Tests」を選択し、「Create Test」をクリックします。

  2. オリジナルページとバリエーションページをそれぞれ指定し、テストの目標(Goal)として「クリックイベント」または「特定ページの表示」を設定します。

  3. 「Start Test」ボタンをクリックしてテストを開始します。

5. 補足:公式の最新情報

Framerの仕様は頻繁に更新されるため、最新の英語公式ヘルプも併せて参照することをおすすめします。

Framer公式のHelp Center(英語)

6. まとめ & アクションプラン

FramerのAdvanced Analyticsは、サイトのパフォーマンスを一切落とさずに、データに基づいた改善サイクルを回せる強力な機能です。しかし、アドオンの有効化やA/BテストのURL設計を誤ると、意図しない計測漏れが発生したり、Businessプランのコストが無駄になったりするリスクがあります。

もし、「自社サイトに最適なファンネル設計がわからない」「SEOに強い構成で確実にA/Bテストを回したい」とお悩みなら、プロの手を借りるのが近道です。「高品質でSEOに強いホームページを最速で始める」サービスでは、Framerを用いた高速なサイト構築から、高度な分析設計までワンストップでサポートしています。まずは無料相談から、あなたのサイトの可能性を広げてみませんか。

高品質でSEOに強いホームページを最速で始める

MIKI SHIMON

バンコク在住。企業のWeb/運用担当。

ノーコードツールに精通し、複数のプラットフォームを活用してWeb制作を行う。メディアの編集も担当。

趣味はカフェ巡りと、ノーコードツールのデザイン設定の探求。

MIKI SHIMON

バンコク在住。企業のWeb/運用担当。

ノーコードツールに精通し、複数のプラットフォームを活用してWeb制作を行う。メディアの編集も担当。

趣味はカフェ巡りと、ノーコードツールのデザイン設定の探求。

WI

PU

FLA

POLI

CHERI

FINI

PUBLI

DA

SH

次世代のウェブ体験を、すべての企業に。

Want to showcase your templates on Pitaly8? Submit your work here and share your designs with our community.

WI

PU

FLA

POLI

CHERI

FINI

PUBLI

DA

SH

次世代のウェブ体験を、すべての企業に。

Want to showcase your templates on Pitaly8? Submit your work here and share your designs with our community.

WI

PU

FLA

POLI

CHERI

FINI

PUBLI

DA

SH

次世代のウェブ体験を、すべての企業に。

Want to showcase your templates on Pitaly8? Submit your work here and share your designs with our community.