Rules Hub
Coding Rules Library
Decouple analytics context from reusable components
Avoid hardcoding specific tracking values inside reusable UI components to ensure they remain context-agnostic.
Bad example
| 1 | export const InfoPopup = () => { |
| 2 | useEffect(() => { |
| 3 | // Bad: Hardcoded 'offers' limits reuse to only Offer pages |
| 4 | // If used on an article page, metrics will be wrong. |
| 5 | trackPageview({ type: 'offers' }); |
| 6 | }, []); |
| 7 |
|
| 8 | return <div className="popup">...</div>; |
| 9 | }; |
Explanation (EN)
The component hardcodes the tracking type to 'offers', assuming it will only ever be used in that context. If this popup is later used on a 'profile' or 'article' page, the analytics data will be incorrect.
Objašnjenje (HR)
Komponenta hardkodira tip praćenja na 'offers', pretpostavljajući da će se uvijek koristiti u tom kontekstu. Ako se ovaj prozor kasnije koristi na stranici 'profil' ili 'članak', analitički podaci bit će netočni.
Good example
| 1 | interface InfoPopupProps { |
| 2 | analyticsType: 'offers' | 'article' | 'general'; |
| 3 | } |
| 4 |
|
| 5 | export const InfoPopup = ({ analyticsType }: InfoPopupProps) => { |
| 6 | useEffect(() => { |
| 7 | // Good: Context is passed in, allowing reuse anywhere |
| 8 | trackPageview({ type: analyticsType }); |
| 9 | }, [analyticsType]); |
| 10 |
|
| 11 | return <div className="popup">...</div>; |
| 12 | }; |
Explanation (EN)
The tracking context is passed via props (or handled by the parent component). This allows the component to be reused across different parts of the application while ensuring the analytics events accurately reflect the current context.
Objašnjenje (HR)
Kontekst praćenja prosljeđuje se putem propsa (ili ga rješava roditeljska komponenta). To omogućuje ponovnu upotrebu komponente u različitim dijelovima aplikacije, dok analitički događaji ostaju točni za trenutni kontekst.