ウェブから収集する

ウェブプラットフォーム上で、Flipで分析するために必要なデータを収集する方法を紹介します。

1. インストールして初期化する

下のコードを追加することで、ブラウザ上でユーザーが特定の操作(例. ページ遷移)をする度に、匿名の行動データがイベントとして収集されます。自動で収集されるイベントに関しては、こちらのページをご覧下さい。

  • 次のコードをコピーして、HTMLファイル内の<head>と書かれた行の下にこのままペーストして下さい。分析対象となる全てのページに追加することをおすすめします。
<script>
  (function(){var w=window,d=document;if(w.Flip)return w.console&&console.error&&console.error("[Flip] Tag included twice");var F=function(){F.q.push(arguments)};function l(){var e=d.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://tag.flip.inc/js";var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(e,s)}F.q=[],F.version="1.0.0",w.Flip=F,"complete"===d.readyState?l():w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)})();
  Flip("init", "プロジェクトの収集キー", { // 第2引数の収集キーはプロジェクトの設定画面に表示されている値に変更して下さい
    autoTrackingOptions: {
      page_viewed: {
        enabled: true,
      },
      page_stayed: {
        enabled: true,
      },
      session_started: {
        enabled: true,
      },
    },
  });
</script>

2. 独自のイベントを収集する

独自のイベントを収集することで、1で自動で収集されるイベント以外の、ボタンのクリックなどの操作を記録できるようになります。独自で収集するイベントがない場合は、このステップは省略して下さい。

  • ユーザーが特定の行動をした直後(例. 機能を利用)に、次のコードが呼ばれるようにペーストして下さい。
Flip("track", "message_sent", {  // 第2引数のイベント名は自由に変更して下さい。アルファベットとアンダースコア(_)のみ使用可能です。
  message_type: "画像付きテキスト", // 2~3行目のように任意でイベントプロパティーを追加できます。追加するプロパティーがない場合は、2~3行目を削除して下さい。
  character_count: 32,
});

3. ユーザー情報を更新する

下のコードを追加することで、匿名ユーザーの情報が更新され、誰がイベントを発火したのかを特定できます。既に特定されたユーザーに対してこのコードを実行した場合は、ユーザーの情報が更新されます。ユーザー情報を更新する必要がない場合は、このステップは省略して下さい。

  • 次のコードをコピーし、1で追加したコードの下にペーストして下さい。ユーザーの情報が分かるページ(例. ログイン後にアクセスできるページ)に追加して下さい。SPAを採用している場合は、ユーザーの情報を取得した後に、<script>で囲まれた2~5行目のコードをペーストして下さい。
<script>
  Flip("identify", "usr_GXfryD0JQivyGa97TgGsT", { // 第2引数のユーザーIDは自由に変更して下さい。
    email: "[email protected]", // 3~5行目のように任意でユーザープロパティーを追加できます。追加するプロパティーがない場合は、3~5行目を削除して下さい。
    name: "Tanaka Masaki",
    position: "プロダクトマネージャー",
  });
</script>