1---
2title: Screen tracking for analytics
3hideTOC: true
4---
5
6import { FileTree } from '~/ui/components/FileTree';
7
8Unlike React Navigation, Expo Router always has access to a URL. This means screen tracking is as easy as the web.
9
101. Create a higher-order component that observes the currently selected URL
112. Track the URL in your analytics provider
12
13<FileTree files={['app/_layout.js']} />
14
15```jsx app/_layout.js
16import { useEffect } from 'react';
17import { usePathname, useGlobalSearchParams, Slot } from 'expo-router';
18
19export default function Layout() {
20  const pathname = usePathname();
21  const params = useGlobalSearchParams();
22
23  // Track the location in your analytics provider here.
24  useEffect(() => {
25    analytics.track({ pathname, params });
26  }, [pathname, params]);
27
28  // Export all the children routes in the most basic way.
29  return <Slot />;
30}
31```
32
33Now when the user changes routes, the analytics provider will be notified.
34
35## Migrating from React Navigation
36
37React Navigation's [screen tracking guide](https://reactnavigation.org/docs/screen-tracking/) cannot make the same assumptions about the navigation state that Expo Router can. As a result, the implementation requires the use of `onReady` and `onStateChange` callbacks. Avoid using these methods if possible as the root `<NavigationContainer />` is not directly exposed and allows cascading in Expo Router.
38