Clever Geek Handbook

DIY。 訪問者のスパイ

挑戦する



サービス所有者、プロジェクトマネージャー、SEOスペシャリストは、ユーザー、ボタンの押し方、額を壊すことを望んでいる場合があります。 このような覗き見により、インターフェイスの問題を特定でき、サービスの効率や利益に間接的に影響を与える可能性があります。







この問題を解決するいくつかの方法を知っています。







  1. ユーザビリティテストのために実験被験者のグループを募集します。
  2. サイトでのユーザーアクションを記録するサードパーティサービスを統合します。
  3. あなたの決定を書きます。


テストグループ



これはかなりの選択肢ですが、それでも多くの問題の解決が必要です。







  1. テストチームの構成を慎重に選択して、できるだけ多くの年齢層のユーザー（もちろん、対象ユーザーから）、さまざまな資格、使用経験を含める必要があります。 同時に、チームの規模も役割を果たします。数字が大きいほど、分析用のデータを多く取得できますが、コストもかかります。
  2. 研究のための場所を準備する必要があります。 少なくともオフィススペース、コンピューター機器、オーディオおよびビデオ録画ツール。
  3. メインプロセスから従業員の注意をそらすか、プロセスを整理して結果を分析するために追加の従業員を引き付ける必要があります。


上記の問題の解決策が成功したとしても、多少なりとも信頼性の高い結果が保証されるわけではなく、プロセスを編成するコストはすでに恐ろしいものです。 さらに、バトルで使用される場合、それほどまれではない境界ケースが失われるリスクがあります。







おそらく今回ではない。







サードパーティの分析サービス



ほとんどのサービスは、クリックとスクロール状態のヒートマップを提供します。これにより、ユーザーがサイトで見たものと注意を払ったものをほぼ確実に判断できます。







フォーム分析、キーロギング、割り当てとコピーの追跡を提供するものもあります。これにより、複雑な人間と機械の相互作用パターンも追跡できます。







すぐにいくつかのサービスがありました：







  1. YandexのWebVisor。
  2. HotJar。


経済的に実行可能な目標がないため、WebVisorを採用しています。 このサービスは、ユーザーセッション全体を記憶し、失うことを約束しました。 リソースに対するユーザーの動作を最初から最後まで繰り返します。 主要な統合は簡単で、ページにコードを追加するだけです。







セッション状態に対する意図的に破壊的な要求（つまり、GETを除くすべて）は無視されることに注意してください。







2つのバージョンがあります。 彼らの仕事の原理はほぼ同じです。 まず、ユーザー認証パラメーターを取得し、サーバーに転送します。サーバーは現在のページをダウンロードして保存します。 クライアント側では、マウスの動き、クリック、データ入力などのユーザーアクションを収集します。 実装されたコードは、タイムスタンプ付きのサーバーへのアクションを変換します（最初または日付/時刻からの差分、見つかりませんでした）。







後で、Yandex.Metricaサービスのユーザーのセッションページに移動して、ユーザーアクションを再生できます。 すべてがうまくいくように見えますが、いくつかの問題があります。







バージョン1：







  1. 複雑で変更可能なインターフェースをクリックするイベントを誤って変換します。 特定のケースでは、モーダルウィンドウの「クロス」アイコンをクリックしても、このモーダルウィンドウは閉じません。
  2. GETを除くAJAXリクエストにつながるアクションは中断し、インターフェイスの動作は正しく再生されず、ユーザーが見たものを理解できなくなります。
  3. ユーザーのアクションを勝手に失います。


2番目のバージョンはベータテストであり、同じ欠点がありますが、まともなベータとして、「完全に」という言葉では機能しない場合もあります。







手がHotJarに到達しませんでした。 SPAとの統合の経験がある場合は、それを共有してください。しかし、同じ苦しみがそこにあるのではないかと疑っています。







あなたの決定をまとめることを試みる



そして、「ああ、やってみよう！」という瞬間にスムーズに近づきます。







実装する必要があるもの：







  1. ページの初期状態を取得します。 ユーザーコンテキストを失わないでください（異なるユーザーの場合、ページは大幅に異なる場合があります）。
  2. ウィンドウオブジェクトのサイズの追跡。
  3. ドキュメント自体を含むページ要素のスクロールの追跡。
  4. ユーザーアクティビティの登録。 フォームフィールドでのマウスの動き、クリック、データ入力を監視します。
  5. サーバーとのコンパクトな交換プロトコル。


分析コレクションは、ネットワーク接続の品質に関する2つのオプション、低速で不安定なチャネル、およびより有利なケースについて検討する必要があります。







初期状態



初期状態は、次の2つの方法で取得できます。







  1. window.loadイベントのHTMLとスタイルを取得します。 これにより、ネットワークに負荷がかかるため、ネットワークの品質が低い場合は、このオプションを放棄する必要があります。
  2. サーバーサイドページをリクエストします。 ユーザーコンテキストを渡す必要があります。 ライブラリの初期化時に、暗黙的にCookieを盗むか、URLと承認パラメーターを明示的に渡すように要求できます。


どちらの場合も、ユーザーアクションレコードに基づいてユーザーアクションへのインターフェイスの応答を行うため、保存されたページからすべてのスクリプトを無効にする必要があります。







問題は、スタイルと静的データにあります。 一般的な場合、それらはそのままにしておくことができますが、初期状態を受信して​​から記録されたアクティビティを表示する瞬間までの間に静力学が変化した場合、特殊効果が可能です。







ページのロード時に、ウィンドウオブジェクトの現在のサイズを保存します。







イベント追跡



stopImmediatePropagation（）/ stopPropagation（）の使用に関係なく、DOMサブツリーのすべてのイベントを追跡する必要があります。 これを行うには、useCapture = trueパラメーターを指定してaddEventListener（）を使用します。







ドキュメントと属性の構造の変更を追跡するには、MutationObserverメカニズムを使用できます。 デフォルトでは、初期化パラメーターにハンドラーを登録するためのDOMノード-documentを受け入れます。







また、document.scrollウィンドウのスクロール位置とwindow.resizeウィンドウのサイズを監視する必要があります。







イベントオブジェクトを識別するために、CSSセレクターを作成します。







交換プロトコル



実用的なデータがないため、交換にはJSON形式を使用します。 広告ブロッカーとその他すべての要素と戦うには、GETリクエストを使用して、GIF形式などの小さな画像を返す必要があります。 たとえば、URL / path / to / api / [JSON string] .gif。







URLはゴムではなく、2000文字の制限があることを覚えておく価値があります。 ドキュメントの構造の変更に関する情報の送信を考慮に入れた非常に小さな値。したがって、たとえばJavaScript実装が存在するGZIPアルゴリズムを使用して、データ圧縮をすぐに処理する必要があります。 圧縮されたデータを転送するには、BASE64でさらにエンコードする必要があります。また、部分的に転送を提供する必要がありますが、この段階ではコンセプトを検証する必要はありません。







ボトムライン



プロトタイプクライアントライブラリのソースコードはこちらです。







実験のために、実際のプロジェクトが選択されました：







  1. アダプティブレイアウト（HTML5、CSS3）;
  2. ニレ ウィジェット（登録/承認フォーム、カスタムコンテンツを作成するためのマルチステップフォーム）およびユーザープロファイル（SPA）;
  3. 組み込みのGoogleマップ。


問題の統合により、視覚的に観察されないブラウザのパフォーマンスの低下は発生しませんでした。







生成されたトラフィックは予想したほど大きくありませんでした。 制限がある場合は、10秒ごとに保存するか、100イベントの累積に応じて、データが4キロバイトを超えないようにしました。 圧縮率は単位から数十まで大きく異なりますが、十分に大きいボリューム（数十キロバイト）の場合、数十の領域にあります。 テキストデータであり、多くの繰り返し部分文字列があります。







乾燥残留物中



プロトタイプは実行可能性を示しました。 完全に明確にするために、プレーヤーとサーバー側を実装する必要があります。多くの問題が予想されます。







  1. 初期状態の取得、重複データとの戦い。 関連データをキャッシュする必要がある場合があります。 静的な要素を決定するために、ユーザーアクティビティの最初の再生にヘッドレスブラウザを使用する必要があるという疑いがあります。
  2. クロスブラウザプレーヤーのサポート。 動物園と変換の種類はキャンセルされていません。


属性を変更するときの機能を忘れないでください。 たとえば、スタイル属性を単純に属性のコレクション（Element.attributes）から取得することはできません; HTMLElement.style.cssTextプロパティを使用する必要があります。 現在、このようなニュアンスの数は測定できません。







ユーザーアクティビティの予備再生でヘッドレスブラウザーを使用する場合は、ビデオを録画するオプションを検討する価値があります。 この場合、プレーヤーは必要ありませんが、必要なコンピューティングリソースの量と結果のデータのストレージのサイズが増加しますが、これは常に合理的ではありません。







More articles:


All Articles