JavaScriptまたはjQueryを使用して、実際のHTML要素のビューを追跡する（ページの読み込みのみ）

Question

現在のプロジェクトでは、（可能であれば）JavaScriptウィジェットの実際のビューを追跡する必要があります。これにより、このデータをアナリティクスソフトウェアによって報告されたページビューの総数と比較/制御できます（ Clicky および/またはGoogle Analytics）。

基本的に、私たちはこのウィジェットをクライアントに販売しており、顧客の関心を生み出すウィジェットの有効性を実証するための堅実なメトリックを提供できるようにしたいと考えています。

これを行うには、クリック率を page の合計ビューではなく、 widget の合計ビューの割合として報告できるようにします（多くの人々がウィジェットが表示されているページを表示しても、ページの下部近くにある記事テキストの長い列の下にあるため、実際には表示されない場合があります。

私の質問は-HTML要素（ウィジェットのコンテナ要素、またはその要素が存在する要素）がブラウザのビューポートに入ったときを確実に追跡する方法はありますか？ウィジェットがブラウザーのビューポート内に表示されたときに分析の統計情報を増やしたいが、ページにロードされたばかりでビューポートに入れられないときはそうではない。

差がある場合、ウィジェットにはjQueryがロードされます。助けてくれてありがとう！

Answer 1

このウィジェットがコンテナページにどのように挿入されるかわかりません。 iframeを使用して行われずに<script src="widget-generator-url">と答えた場合、あなたの質問は DOM要素が現在のビューポートに表示されているかどうかを確認する方法