この文書はFramerを学ぶ国内のユーザーが日本語の資料が少ないために経験する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様のお役に立てれば幸いです。

1. リンクにトラッキング機能を追加

特定のボタンまたはリンクがどれだけクリックされているか知りたい場合、リンクを設定する際にTracking IDを追加します。このとき、それぞれのリンクに固有IDを指定して使用すると、IDごとに正確な結果を得られ、他のイベントのデータと混ざるのを防ぐことができます。

2. フォームにトラッキング機能を追加

フォームの送信頻度もまたFramerで追跡が可能です。追跡したいフォームを選択し、右のFormのプロパティパネルでTracking IDを入力すると、訪問者がサイトでフォームを送信するたびにイベントが記録される方式で追跡が進行します。

3. Analytics Overviewで結果確認

リンクやフォームにトラッキング機能を追加した後、結果はどこで確認できるでしょうか？該当トラッキングイベントに関する結果はAnalytics OverviewのTrackingセクションで確認できます。該当セクションは以下のような機能があります。

• サイトの上位20個のトラッキングイベントが表示されます。

• 設定したトラッキングIDをFunnelsやA/Bテストと連携させてコンバージョン率を分析することも可能です。

4. 外部分析ツールと連携

Framerはサイトでのユーザーの動きを追跡するために使用できるCustom Eventsを提供しています。該当イベントはGoogle AnalyticsやSegmentといった分析プラットフォームと簡単に統合できるので、よく活用してみてください。

以下のスクリプトをサイトのCustom Codeセクションに追加してみてください。またCustom Codeを追加する方法はこのガイドからご確認いただけます。

// 클릭 이벤트 수신하기
document.addEventListener("framer:click", (event) => {
    console.log("Click tracked:", event.detail.trackingId);
});

利用可能なイベントの種類

(例１) gtag.jsを用いたGoogle Analyticsの例

document.addEventListener("framer:click", (event) => {
    gtag('event', 'click', {
        'event_category': 'engagement',
        'event_label': event.detail.trackingId,
        'value': event.detail.href
    });
});

(例２) analytics.jsを用いたUniversal Analyticsの例

document.addEventListener("framer:click", (event) => {
    ga('send', 'event', {
        eventCategory: 'engagement',
        eventAction: 'click',
        eventLabel: event.detail.trackingId,
        eventValue: event.detail.href
    });
});

このようにFramerのイベントシステムを外部ツールと組み合わせることで、サイト内のユーザーの行動を精密に分析し、コンバージョン率の改善に直接利用できるデータを集めることができます。

どのプロジェクトのクリックイベントを最初に追跡してみたいですか？このガイドを通してユーザーの動作データを分析し、あなたのサイトを開発されることをお勧めします。

この記事はFramer公式ブログの「How to track links and forms in Framer」を翻訳・アレンジした内容です。