Estoy trabajando en un sitio web donde tenemos miles de productos. Tengo que capturar la impresión de todos los productos que los usuarios pueden ver en su ventana gráfica. Así que creé un directory y usé IntersectionObserver , y me refiero a él dentro del código HTML de ese producto. El problema es que está causando un impacto en el rendimiento del sitio móvil tan pronto como el usuario se desplaza. ¿Cómo puedo capturar impresiones sin ralentizar mi sitio web?
export class IntersectionObserverDirective implements OnDestroy, OnInit, AfterViewInit { @Input() debounceTime = 0; @Input() threshold = 1; @Output() visible = new EventEmitter<HTMLElement>(); isSSR: boolean = typeof window === 'undefined'; private observer: IntersectionObserver | undefined; private subject$ = new Subject<{ entry: IntersectionObserverEntry; observer: IntersectionObserver; }>(); constructor(private element: ElementRef) {} ngOnInit() { this.createObserver(); } ngAfterViewInit() { this.startObservingElements(); } ngOnDestroy() { if (this.observer) { this.observer.disconnect(); this.observer = undefined; } this.subject$.next(); this.subject$.complete(); } private isVisible(element: HTMLElement) { return new Promise(resolve => { const observer = new IntersectionObserver(([entry]) => { resolve(entry.intersectionRatio === 1); observer.disconnect(); }); observer.observe(element); }); } private createObserver() { const options = { rootMargin: '0px', threshold: this.threshold, }; const isIntersecting = (entry: IntersectionObserverEntry) => entry.isIntersecting || entry.intersectionRatio > 0; this.observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (isIntersecting(entry)) { this.subject$.next({ entry, observer }); } }); }, options); } private startObservingElements() { if (!this.observer) { return; } this.observer.observe(this.element.nativeElement); this.subject$ .pipe(delay(this.debounceTime), filter(Boolean)) .subscribe(async ({ entry, observer }) => { const target = entry.target as HTMLElement; const isStillVisible = await this.isVisible(target); if (isStillVisible) { this.visible.emit(target); observer.unobserve(target); } }); } }Google Analytics tiene disparadores de desplazamiento robustos, entre una serie de otras herramientas. Debe delegar el seguimiento a una parte que tenga experiencia. GA es más estándar, tiene más valor para un cliente y aprenderá más sobre los usuarios.
Si odias a Google y debes inventar tu propia herramienta desde cero, adelante, no lo hagas. El desplazamiento y el cursor disparan miles de eventos por segundo y se expanden a múltiples elementos. ¡Use GA para sus clics y mapas de calor!
Simplemente agregue un tiempo de espera en createObserver() . Algo como esto.
private createObserver() { const options = { rootMargin: '0px', threshold: this.threshold, }; let timeouts = {}; const isIntersecting = (entry: IntersectionObserverEntry) => entry.isIntersecting || entry.intersectionRatio > 0; this.observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (isIntersecting(entry)) { timeouts[entry.target.id] = setTimeout(() => { this.subject.next({ entry, observer }); }, 500); } else { clearTimeout(timeouts[entry.target.id]) } }); }, options); }