Docs
Начать бесплатно

Подключение Датрики к Next.js

Добавьте скрипт в корневой layout через компонент Script из next/script.

Замените YOUR_SITE_ID на ID сайта в Датрике. Скрипт с уже подставленным ID можно скопировать в настройках сайта на вкладке «Общее».

App Router

Добавьте компонент Script в корневой layout app/layout.tsx.

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.datrika.app/da.js"
          data-datrika
          data-site-id="YOUR_SITE_ID"
        />
      </body>
    </html>
  );
}

Pages Router

Страницы лежат в папке pages? Добавьте тот же компонент в pages/_app.tsx.

pages/_app.tsx

import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="https://cdn.datrika.app/da.js"
        data-datrika
        data-site-id="YOUR_SITE_ID"
      />
      <Component {...pageProps} />
    </>
  );
}

Обычные переходы между страницами приложения Датрика отслеживает сама. Не видит она только переходы через router.replace, которые заменяют адрес, а не добавляют новый, и роутинг через # в адресе.

Готово? Откройте сайт в браузере. Мастер в Датрике сам заметит первый визит и откроет дашборд.