Installing the tracking

How the Oltre tracker goes on a site, across seven platforms, plus the JavaScript API.

The tracker recognises visitors arriving from an AI platform. Our team installs it during onboarding, on whichever platform you run. This page is the reference: read it to check what goes on your site, or hand it to your developer if you would rather do it yourself.

HTML and static websites

On any HTML site the tracker is two script tags pasted before the closing head tag.

Installation

This block goes in the HTML file, just before the closing head tag.

html

<script>
  window.oltreConfig = { brandId: "your-brand-id" };
</script>
<script async src="https://cdn.oltreai.com/tracker.prod.min.js"></script>

Verify the installation
Open the browser's developer console and type this. It returns true when the visitor arrived from an AI platform.
javascript
```
Oltre.isLLM()  // Returns true if visitor came from an AI platform
```

React

For Create React App, Vite, or any React project. Either option works: pick the one that matches how the rest of your third-party scripts are loaded.

Option 1: a script in index.html

This goes in public/index.html, before the closing head tag.

html

<script>
  window.oltreConfig = { brandId: "your-brand-id" };
</script>
<script async src="https://cdn.oltreai.com/tracker.prod.min.js"></script>

Option 2: a useEffect hook

The tracker loads from the App component instead, if you would rather keep every script in the bundle.

jsx

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.oltreConfig = { brandId: "your-brand-id" };

    const script = document.createElement('script');
    script.src = 'https://cdn.oltreai.com/tracker.prod.min.js';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return <div>Your app</div>;
}

Next.js

Works with both the App Router and the Pages Router. Use the framework's own Script component rather than a raw tag, so the two scripts keep their loading order.

App Router (app/layout.tsx)

Both scripts mount in the root layout. The config has to run before the tracker, which is what the two strategies express.

tsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script id="oltre-config" strategy="beforeInteractive">
          {`window.oltreConfig = { brandId: "your-brand-id" };`}
        </Script>
        <Script
          src="https://cdn.oltreai.com/tracker.prod.min.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Pages Router (_app.tsx)

The same two scripts, mounted from the custom App component instead.

tsx

import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script id="oltre-config" strategy="beforeInteractive">
        {`window.oltreConfig = { brandId: "your-brand-id" };`}
      </Script>
      <Script
        src="https://cdn.oltreai.com/tracker.prod.min.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

WordPress

Two ways in. The plugin route survives a theme update, the functions.php route does not.

Option 1: using a plugin (recommended)
Install a header-injection plugin such as Insert Headers and Footers or WPCode, then paste the snippet into its Header field.
html
```
<script>
  window.oltreConfig = { brandId: "your-brand-id" };
</script>
<script async src="https://cdn.oltreai.com/tracker.prod.min.js"></script>
```

Option 2: edit the theme (functions.php)

This goes in the theme's functions.php. Use a child theme, or the next theme update removes it.

php

function add_oltre_tracking() {
  ?>
  <script>
    window.oltreConfig = { brandId: "your-brand-id" };
  </script>
  <script async src="https://cdn.oltreai.com/tracker.prod.min.js"></script>
  <?php
}
add_action('wp_head', 'add_oltre_tracking');

Shopify

On a Shopify store the tracker goes in through the theme editor.

Where it goes
Online Store, then Themes, then Actions and Edit code. Open theme.liquid and find the closing head tag.

The snippet

This block goes in unchanged, immediately before that tag.

liquid

<script>
  window.oltreConfig = { brandId: "your-brand-id" };
</script>
<script async src="https://cdn.oltreai.com/tracker.prod.min.js"></script>

Vue.js

For Vue 3, Nuxt 3, or any Vue project.

Vue 3 (main.js)

The config is set and the script appended before the app mounts.

javascript

import { createApp } from 'vue';
import App from './App.vue';

// Add Oltre tracking
window.oltreConfig = { brandId: "your-brand-id" };
const script = document.createElement('script');
script.src = 'https://cdn.oltreai.com/tracker.prod.min.js';
script.async = true;
document.head.appendChild(script);

createApp(App).mount('#app');

Nuxt 3 (nuxt.config.ts)

Both scripts are declared in the app head instead, so they render server-side.

typescript

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML: 'window.oltreConfig = { brandId: "your-brand-id" };',
        },
        {
          src: 'https://cdn.oltreai.com/tracker.prod.min.js',
          async: true,
        },
      ],
    },
  },
});

Google Tag Manager

The tracker can go in through an existing GTM container, with no change to the site itself.

Create the tag
In Google Tag Manager: Tags, then New, then Custom HTML. Set the trigger to All Pages, then save and publish.

Tag code

This is the block that goes in the Custom HTML field.

html

<script>
  window.oltreConfig = { brandId: "your-brand-id" };
</script>
<script async src="https://cdn.oltreai.com/tracker.prod.min.js"></script>

JavaScript API

Once installed, the tracker exposes a global Oltre object. Everything below is optional: detection works without any of it.

Detection

Ask whether the current visitor arrived from an AI platform, and what the detection was based on.

javascript

// Check if visitor came from an LLM
Oltre.isLLM()  // Returns: true | false

// Get detection details
Oltre.getSource()
// Returns: { detected: true, source: "chatgpt", method: "referrer", confidence: 95 }

Tracking conversions

Record when a visitor converts. The call only fires if that visitor was detected as coming from an AI platform, so it is safe to leave in place for everyone.

javascript

// Oltre.conversion(type, value, metadata)

// Track a signup
Oltre.conversion("signup", 0, { plan: "free" })

// Track a purchase
Oltre.conversion("purchase", 299.00, {
  product: "enterprise",
  currency: "USD"
})

// Track a demo request
Oltre.conversion("demo_request", 0, {
  company: "Acme Corp",
  employees: "50-100"
})

Tracking custom events

Record an interaction that is not a conversion. Useful for measuring engagement before the conversion happens.

javascript

// Oltre.event(name, data)

// Track pricing page view
Oltre.event("viewed_pricing", { source: "nav" })

// Track feature interaction
Oltre.event("feature_explored", {
  feature: "ai_analytics",
  duration: 45
})

// Track content engagement
Oltre.event("blog_read", {
  article: "geo-vs-seo",
  scroll_depth: 80
})

Example: a React form

Call it from the submit handler, after your own logic has run.

jsx

function SignupForm() {
  const handleSubmit = async (e) => {
    e.preventDefault()

    // Your signup logic
    await createAccount(formData)

    // Track conversion (only fires if from LLM)
    Oltre.conversion("signup", 0, {
      plan: formData.plan
    })
  }

  return <form onSubmit={handleSubmit}>...</form>
}

The other documents

The rest of the documentation, in the same place.

Setting up IndexNow
How the key is generated, hosted and connected, across six platforms.
Open the document

We do the installing

Thirty minutes, your site open: what's holding you back and where we'd start. You talk to a founder, and if organic isn't your problem, we say so.

Book a call

Installing the tracking

HTML and static websites

Installation

Verify the installation

React

Option 1: a script in index.html

Option 2: a useEffect hook

Next.js

App Router (app/layout.tsx)

Pages Router (_app.tsx)

WordPress

Option 1: using a plugin (recommended)

Option 2: edit the theme (functions.php)

Shopify

Where it goes

The snippet

Vue.js

Vue 3 (main.js)

Nuxt 3 (nuxt.config.ts)

Google Tag Manager

Create the tag

Tag code

JavaScript API

Detection

Tracking conversions

Tracking custom events

Example: a React form

The other documents

Setting up IndexNow

We do the installing