技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

元のアドレス

埋葬ポイントとは何ですか？

学名は Event Tracking で、主にユーザーの行動やビジネス プロセスの関連テクノロジと実装プロセスをキャプチャ、処理、送信することに重点を置いています。
ポイントの埋め込みはデータ分野の専門用語であり、インターネット分野の通称でもあります。

埋没ポイントは製品データ分析の基礎であり、一般的にレコメンドシステムからのフィードバック、ユーザー行動の監視と分析、新機能や運用活動の効果の統計分析などに使用されます。

埋め込みポイントには、イベント (event) と属性 (param) という 2 つの重要な概念が含まれます。

• イベント: ユーザーアクション、システムイベント、システムエラーなど、アプリケーションで発生すること。たとえば、製品を撮影する場合、それには次のイベントが含まれます: enter_page (ページに入る)、leave_page (ページを離れる)。
• Param: 言語設定や地理的位置など、ユーザー セグメントを記述するために定義された属性。 「授業後の演習に入る」イベントを例に挙げます。これには、enter_from (どのページから)、class_id (コース ID) などのイベント属性が含まれます。
• 属性値 (値): 属性の次元、つまり、動作がトリガーされたときの特定の次元。例: enter_from: home (ホームページ)、system (システム) など。

主流プラン

トレースレス埋め込み（完全埋め込み）は、ブラウザまたはアプリの組み込み監視方法を使用して、ユーザーの閲覧ページ、クリック、およびその他の動作を監視します。一般に、企業のスラーダーなどの粗粒度のデータ分析に使用されます。
欠点:

• データにはノイズが多く、有用かどうかに関係なく収集されます。
• 埋め込まれたポイントをカスタマイズできない、指定されたイベントとビジネス属性を収集できない
• DA が利用できる情報が少なくなる
  アドバンテージ：
• シンプルなアクセス、侵入はほとんどなく、追加の開発コストは不要
• ユーザーの操作行動の収集が非常に充実しており、漏れがほとんどありません。

コード埋め込みポイント、フロントエンド開発者がコード内の監視と収集をカスタマイズ
欠点:

• 作業負荷が高く、コードが煩雑で、後のメンテナンスが不便です。
  アドバンテージ：
• ポイントを正確に埋め込み、明確なイベント識別が可能
• 営業マンの属性が非常に豊富
• 埋め込みポイントのトリガー方法を柔軟に定義可能
• DA はより便利で正確に使用できます

埋没ポイント SDK、SDK は埋没ポイントを報告するためのインターフェイスを公開しており、開発者は会社のお茶などの監視と収集のプロセスを認識していません。
短所: NA
アドバンテージ：

• ビジネス開発では、イベントの特定、ビジネスの属性などにのみ注意を払う必要があります。
• トレースレス埋め込み点とコード埋め込み点の利点を考慮して

共通の隠し属性

通常、フロントエンドはページの寸法に従って埋め込みポイントをカウントします。一般的なイベント属性は次のとおりです。

よくある埋もれたイベント

パフォーマンスデータ収集ソリューション

現在、パフォーマンス インジケーター データのほとんどは window.performance API から取得されます。

一般的なパフォーマンス指標

FP

FP (FIrst Paint) インジケーターは、通常、ページの白い画面時間を反映し、ユーザーがコンテンツを待機する時間が短いほど、Web ページの読み込みパフォーマンスを反映します。は非常に良好です。白い画面です。時間が短いほど、ユーザーの離脱の可能性は低くなります。

このインジケーターは、preformance.getEntriesByType('paint') メソッドを通じて PerformancePaintTming API によって提供されるポイント情報を取得できます。first-paint という名前のオブジェクトを見つけます。説明は FP インジケーター データです。

FCCPについて

FCP (First Contentful Paint) とは、パフォーマンス統計指標において、ユーザーが Web ページにアクセスし始めてから FCP までの時間をコンテンツのない時間とみなします。 、FCP >= FP

インジケーターは、performance.getEntriesByType('paint') メソッドを通じて、PerformancePaintTiming API によって提供されるポイント情報を取得できます。次の図に示すように、FCP インジケーター データを記述する first-contentful-paint という名前のオブジェクトを見つけます。

ＦＭＰ

FMP (First Meaningful Paint) は、意味のあるコンテンツが初めて描画されるときであり、ページ全体のレイアウトとテキスト コンテンツが完全にレンダリングされたとき、意味のあるコンテンツの最初の意味のある描画が完了したと見なされます。そのため、FMPはユーザーがWebページのメインコンテンツを閲覧するまでの時間を計測するものであり、ユーザーエクスペリエンスの観点から重要な計測指標となります。

現在、フロントエンド業界で認知されている FMP の計算方法は、「読み込みおよびレンダリング中にページのレイアウトが最大変更された後の描画時間」です。 MutationObserver を使用すると、ページ全体の DOM 変更を監視し、MutationObserver のコールバックをトリガーし、コールバック中に現在の DOM ツリーの変更スコアを計算できます。その瞬間が FMP 時点です。

翻訳

TTI (Time To Interactive)。ページの読み込みが開始されてからページが完全にインタラクティブな状態になるまでにかかる時間です。ページが完全にインタラクティブな状態にある場合、次の 3 つの条件が満たされます。

このページにはすでに役立つコンテンツが表示されています。
ページ上の表示要素に関連付けられたイベント応答関数が登録されました。
イベント応答機能は、イベント発生後 50ms 以内に実行を開始できます。

リソース読み込みインジケーター

window.performance.getEntriesByType('resource') は、現在のページにロードされているすべてのリソース (js、css、img...) のさまざまなパフォーマンス インジケーターを返します。これは、静的なリソース パフォーマンス データの収集に使用できます。

主なタイプは、script、link、img、css、xmlhttprequest、beacon、fetch、その他です。
パフォーマンスリソースタイミング - Web API | MDN

その他の指標計算方法

エラーデータ収集ソリューション

3種類あります

• リソース読み込みエラー。キャプチャ フェーズで addEventListener('error', callback, true) を通じてリソース読み込み失敗エラーをキャプチャします。
• js 実行エラー。window.onerror を通じて js エラーをキャプチャします。
  • クロスドメイン スクリプトでは、「スクリプト エラー」というプロンプトが表示され、具体的なエラー情報やスタック情報は取得できません。現時点では、crossorigin="anonymous" 属性をスクリプト タグに追加する必要があり、リソース サーバーは Access-Control-Allow-Origin などの CORS 関連の構成を追加する必要があります。
• Promise エラー。addEventListener('unhandledrejection', callback) を通じて Promise エラーをキャプチャしますが、エラーが発生した行数や列数などの情報がないため、関連するエラー情報を手動でスローすることしかできません。

// 在捕获阶段，捕获资源加载失败错误
Element.addEventListener('error', e => {
const target = e.target
    if (target != window) {
        monitor.errors.push({
            type: target.localName,
            url: target.src || target.href,
            msg: (target.src || target.href) + ' is load error',
            time: Date.now()
        })
    }
})

// 监听 js 错误
window.onerror = function(msg, url, row, col, error) {
    monitor.errors.push({
        type: 'javascript',
        row: row,
        col: col,
        msg: error && error.stack? error.stack : msg,
        url: url,
        time: Date.now()
    })
}
// 监听 promise 错误 缺点是获取不到行数数据
addEventListener('unhandledrejection', e => {
    monitor.errors.push({
        type: 'promise',
        msg: (e.reason && e.reason.msg) || e.reason || '',
        time: Date.now()
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

データレポート計画

このシナリオでは、考慮すべき問題が 2 つあります。

データレポートインターフェイスとビジネスシステムが同じドメイン名を使用している場合、ブラウザには同時リクエスト数に制限があるため、ネットワークリソースの競合が発生する可能性があります。
通常、ブラウザはページのアンロード時に非同期 Ajax リクエストを無視します。データ リクエストが必要な場合は、ページのアンロードを遅らせるために、アンロード イベントまたはアンロード前に同期 Ajax リクエストが作成されます。ユーザーの観点から見ると、ページジャンプが遅くなります。

ナビゲーター.sendBeacon

アドバンテージ：
ページのアンロード時に、ページの終了を妨げることなく、確実にデータを送信します。
バックグラウンドでのデータ送信をサポートします。

欠点:
送信できるのはPOSTリクエストのみであり、レスポンス結果は取得できません。

Internet Explorer に加えて、現在主流の最新ブラウザーはビーコンのサポート率が非常に高いです。 ビーコン - MDN ドキュメント

Beacon インターフェイスは、Web サーバーへの非同期のノンブロッキング要求をスケジュールするために使用されます。

• ビーコン要求は HTTP POST メソッドを使用するため、応答は必要ありません。
• ビーコン要求により、ページがアンロードをトリガーする前に初期化が完了することが保証されます。

平たく言えば、Beacon はデータをサーバーに非同期に送信でき、ページのアンロードが完了する前にリクエストを確実に送信できます (ajax ページのアンロードによってリクエストが終了するという問題を解決します)。それの使い方：

navigator.sendBeacon(url, data);
1

data パラメーターはオプションであり、その型は ArrayBufferView、Blob、DOMString、または FormData です。ブラウザがビーコン要求を送信キューに正常に追加した場合、このメソッドは true を返し、それ以外の場合は false を返します。

ビーコンを使用する場合、バックエンドはポスト メソッドを使用してパラメーターを受信する必要があり、クロスドメインの問題を考慮して、インターフェイスを変更し、CORS を構成する必要もあります。同時に、リクエスト ヘッダーは CORS セーフリストのリクエスト ヘッダーを満たす必要があり、コンテンツ タイプは application/x-www-form-urlencoded、multipart/form-data、または text/plain である必要があります。

type ContentType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';

const serilizeParams = (params: object) => {
    return window.btoa(JSON.stringify(params))
}

function sendBeacon(url: string, params: object) {
  const formData = new FormData()
  formData.append('params', serilizeParams(params))
  navigator.sendBeacon(url, formData)
}

1
2
3
4
5
6
7
8
9
10
11
12

画像

アドバンテージ：
使いやすく、互換性が高く、ドメイン間でレポートできます。
ページの読み込みと終了をブロックしません。

欠点:
送信できるリクエストはGETリクエストのみであり、レスポンス結果は取得できません。
非同期操作はサポートされていません。

sendBeacon の互換性の問題は避けられませんが、ほとんどのブラウザはページがアンロードされる前に画像の読み込みが完了し、ページに img を追加することでデータをレポートするという機能を最大限に活用できます。

function sendImage(url: string, params: object) {
  const img = new Image()

  img.style.display = 'none'

  const removeImage = function() {
    img.parentNode.removeChild(img)
  }

  img.onload = removeImage
  img.onerror = removeImage

  img.src = `${url}?params=${serilizeParams(params)}`

  document.body.appendChild(img)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

img イメージは取得リクエストであるため、サーバーごとに URI の長さに制限があるため、長さが制限を超えると HTTP 414 エラーが発生するため、属性を減らしすぎるとレポートの頻度にも注意する必要があります。一気にアップロードされました。

互換性のあるソリューション

sendBeacon メソッドが優先され、Image メソッドがフォールバックとして使用されます。

function sendLog(url: string, params: object) {
    if（navigator.sendBeacon) {
        sendBeacon(url, params)
    } else {
        sendImage(url, params)
    }
}
1
2
3
4
5
6
7
8

実際、ポイントを埋めるためにGIFを使用している人も多いのではないでしょうか？
サーバーへのデータのレポートは、インターフェイスのリクエスト、通常のファイルのリクエスト、または画像リソースのリクエストを通じて行うことができます。データがレポートできる限り、GIF ファイルのリクエスト、js ファイルのリクエスト、ページ インターフェイスの呼び出しのいずれであっても、サーバーは実際には特定のレポート方法を気にしません。では、なぜすべてのシステムがデータをレポートするために GIF 画像をリクエストする方法を一律に使用するのでしょうか?
●クロスドメインの防止
一般に、ドット付きのドメイン名は現在のドメイン名ではないため、すべてのインターフェイス要求はクロスドメイン要求になります。クロスドメインリクエストは、不適切な設定やレポートエラーによりブラウザによって簡単に傍受される可能性があり、これは容認できません。ただし、イメージの src 属性はドメインを越えず、リクエストを開始することもできます。 (インターフェースレポートを除く)
●ページの読み込みをブロックしてユーザーエクスペリエンスに影響を与えるのを防ぎます
通常、リソース ノードを作成した後、オブジェクトがブラウザ DOM ツリーに挿入されるまで、ブラウザは実際にリソース リクエストを送信しません。 DOM を繰り返し操作すると、パフォーマンスの問題が発生するだけでなく、js/css リソースを読み込むとページのレンダリングがブロックされ、ユーザー エクスペリエンスに影響します。
例外は画像リクエストです。イメージの構築時に DOM に挿入する必要がないだけでなく、新しい Image オブジェクトが js で作成されていればリクエストを開始でき、js のないブラウザ環境ではブロックの問題が発生しません。また、別のタイプのリソース要求である img タグを介して通常に管理することもできません。 (除外ファイル方式)
●GIFはPNG/JPGに比べてサイズが最小です。
最小の BMP ファイルには 74 バイトが必要で、PNG には 67 バイトが必要ですが、正規の GIF には 43 バイトしか必要ありません。
同じ応答の場合、GIF は BMP よりも 41%、PNG よりも 35% のトラフィックを節約できます。
そして、そのほとんどは 1*1 ピクセルの透明 GIF を使用してレポートします。
1x1 ピクセルが法定の最小画像です。さらに、これは画像を通じて行われるため、ページ自体の表示効果に影響を与えないように、画像を透明にすることが最善です。画像が透明であることを示すには、バイナリ ビットを使用してマークするだけで済みます。画像を透明色として保存するため、色空間データを保存する必要がなく、容量を節約できます。

XMLHttpRequest または Fetch API

アドバンテージ：

非同期リクエストを送信でき、GET や POST などの複数の HTTP メソッドがサポートされます。
応答結果を取得して、さらに処理することができます。
欠点:

リクエストとレスポンスのロジックは手動で処理する必要があります。
クロスドメイン要求の問題 (CORS の設定など) を処理する必要があります。

XMLHttpRequest または Fetch API を使用して、レポート データへの非同期リクエストを送信します。 GET メソッドまたは POST メソッドの使用を選択し、リクエスト本文または URL パラメータとしてデータを送信できます。

ウェブソケット

アドバンテージ：

優れたリアルタイム パフォーマンスと双方向通信をサポートします。
リアルタイムの監視や大規模なデータのレポートに適しています。
欠点:

サーバーは WebSocket プロトコルをサポートする必要があります。
より複雑で、単純な埋め込みポイントの要件には適していません。

レポートプラットフォーム

一般的なフロントエンド データ埋め込みツールには、Google Analytics、Baidu Statistics、Umeng Statistics などが含まれます。もちろん、レポート作成に会社の内部インターフェイスやプラットフォームを使用することもできます。

Google アナリティクスを例に挙げます。
Google Analytics は、Web サイトのトラフィックを追跡およびレポートするために Google によって開発された Web サイト分析ツールです。これは、Web サイトの所有者が、訪問者が誰なのか、どこから来たのか、サイトで何をしているのかなど、訪問者の行動を理解するのに役立ちます。 Google Analytics を通じて、Web サイト所有者は視聴者をより深く理解し、Web サイトのコンテンツとマーケティング戦略を最適化し、Web サイトのパフォーマンスとユーザー エクスペリエンスを向上させることができます。 Google Analyticsは、リアルタイムデータ、ユーザー行動分析、コンバージョントラッキング、トラフィックソース分析など、豊富なデータ分析機能を提供します。これは、さまざまな Web サイトやオンライン マーケティング キャンペーンで広く使用されている強力なツールです。

Googleアナリティクスの使い方

Google Analytics を使用しているため、まず Google アカウントを取得する必要があります。これは自分で作成する必要があります。 次に、Google Analytics への入り口を知る必要があります。使用される 2 つのアドレスは次のとおりです。

Google タグ マネージャー：tagmanager.google.com/

アナリティクス：analytics.google.com/

Google タグ マネージャー
Google タグマネージャー (GTM) は、Google が開発・提供するタグ管理システムです。これにより、Web サイト管理者は、Web サイトのコードを変更せずに、さまざまなトラッキング コード、分析コード、マーケティング タグを管理および展開できます。 GTM を使用すると、ユーザーは開発者に頼らずにタグを簡単に追加、更新、削除できます。

GTM の主な機能は次のとおりです。
簡単に言うと、このプラットフォームはフロントエンドによってトリガーされた非表示のイベントを収集するために使用され、トリガー条件とトリガー イベント コールバックをカスタマイズすることでデータ レポートを実現できます。ここでは、データを収集して Google Analytics にレポートするために使用されます。

グーグルアナリティクス
名前が示すように、データを収集、表示、表示するために使用される Web サイトです。