EnaLog Docs

Next.js

Autotracking

The quickest way to start pushing events to EnaLog is to use autotrack. Which will automatically track page views, button clicks, and link clicks. You can read more about it here

Setting up Autotrack

You will need to add load the Autotrack script using the <Script /> component provided by Next.js. You will need to load the script on each page to make sure it tracks page views correctly.

import Script from "next/script";

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <p>Hello World</p>
      </main>
      <Script
        src="https://static.enalog.app/autotrack.min.js"
        data-name="enalog"
        data-enalog-token="<enalog-api-token-goes-here>"
        data-enalog-project="<enalog-project-name-goes-here>"
        onReady={() => {
            initAutotrack();
        }}
      />
    </>
  );
}

Refactor into a component

To make this simpler you could consolidate the <Script /> tag above into a reusable component like so:

import Script from "next/script";

export default function Autotrack() {
  return (
    <>
      <Script
        src="https://static.enalog.app/autotrack.min.js"
        data-name="enalog"
        data-enalog-token="<enalog-api-token-goes-here>"
        data-enalog-project="<enalog-project-name-goes-here>"
        onReady={() => {
            initAutotrack();
        }}
      />
    </>
  );
}

Which you could then import onto each page:

import Autotrack from "autotrack.js";
import Script from "next/script";

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <p>Hello World</p>
      </main>
      <Autotrack />
    </>
  );
}