1---
2title: Screen tracking for analytics
3---
4
5import { FileTree } from '~/ui/components/FileTree';
6
7Unlike React Navigation, Expo Router always has access to a URL. This means screen tracking is as easy as the web.
8
91. Create a higher-order component that observes the currently selected URL
102. Track the URL in your analytics provider
11
12<FileTree files={['app/_layout.js']} />
13
14```js app/_layout.js
15import { useEffect } from 'react';
16import { usePathname, useGlobalSearchParams, Slot } from 'expo-router';
17
18export default function Layout() {
19  const pathname = usePathname();
20  const params = useGlobalSearchParams();
21
22  // Track the location in your analytics provider here.
23  useEffect(() => {
24    analytics.track({ pathname, params });
25  }, [pathname, params]);
26
27  // Export all the children routes in the most basic way.
28  return <Slot />;
29}
30```
31
32Now when the user changes routes, the analytics provider will be notified.
33
34## Migrating from React Navigation
35
36React 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.
37