# Add tracker to Next.js App
{% hint style="warning" %}
This guide is still quite new. If you encounter any issues, please [contact support](https://docs.uxwizz.com/guides/support).
{% endhint %}
To add an external analytics tracking snippet in your Next.js application:
1. [Include the tracking snippet in **\_document.tsx** or **app/layout.tsx.**](#id-1.-option-a-next.js-uxwizz-snippet-in-_document.tsx)
2. [Create the UXWizzPageview.tsx component.](#id-2.-creating-uxwizzpageview.tsx)
3. [Include the pageview component.](#id-3.-adding-the-pageview-component)
{% hint style="info" %}
Write this in your existing **\_document.tsx** file.\
Create it in your **pages directory** if it doesn't exist.
If you are using the new **app** routing, copy the \ section into /**app/layout.tsx.**
{% endhint %}
{% hint style="warning" %}
**Note!! - This was the tracking code as of version 6.4.0.**
Please update it to match the tracking code given to you in the UXWizz dashboard.
Set your own dashboard URL **dashboardURL** constant.
{% endhint %}
### 1. (Option A) Next.js UXWizz snippet in \_document.tsx
```jsx
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
const dashboardURL = 'https://your.uxwizz.com/server';
const trackedDomain = 'yourappdomain.com';
export default class MyDocument extends Document {
render() {
return (
{/* UXWIZZ SNIPPET START */}
{/* Global scope */}
{/* vvv -- Only include this part to enable A/B tests -- vvv*/}
{/* ^^^ -- Only include this part to enable A/B tests -- ^^^*/}
{/* Main UXWizz script */}
{/* UXWIZZ SNIPPET END */}
)
}
}
```
### 1. (Option B) Next.js UXWizz snippet in /app/layout.tsx
```jsx
const dashboardURL = 'https://your.uxwizz.com/server';
const trackedDomain = 'yourappdomain.com';
...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{/* UXWIZZ SNIPPET START */}
{/* Global scope */}
{/* vvv -- Only include this part to enable A/B tests -- vvv*/}
{/* ^^^ -- Only include this part to enable A/B tests -- ^^^*/}
{/* Main UXWizz script */}
{/* UXWIZZ SNIPPET END */}
{children}
);
}
...
```
This will only track the initial page as a pageview. To track all route changes, add this component:
### 2. Creating UXWizzPageview\.tsx
```jsx
'use client';
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect, useRef } from "react";
export default function UXWizzPageview() {
const pathname = usePathname();
const searchParams = useSearchParams();
const isInitialLoad = useRef(true);
useEffect(() => {
if (isInitialLoad.current) {
isInitialLoad.current = false
return;
};
if (typeof window === 'undefined') return;
const ust = (window as typeof window & { UST: { trackNewPage: () => void } })['UST'];
if (!ust || !ust.trackNewPage) return;
ust.trackNewPage(); // Call on route change, but not on initial load
}, [pathname, searchParams]);
return null;
}
```
### 3. Adding the pageview component.
You can then import **UXWizzPageview** in the body section of **layout.tsx**
```jsx
...
import dynamic from 'next/dynamic';
const UXWizzPageview = dynamic(() => import('./UXWizzPageview'), { ssr: false });
...
...
...
{children}
...
```
{% hint style="warning" %}
If you don't use TypeScript, you can simply remove the typings replace this line:
```javascript
const ust = (window as typeof window & { UST: { trackNewPage: () => void } })['UST'];
```
with
```javascript
const ust = window['UST'];
```
{% endhint %}