Installare il tracking

Come il tracker di Oltre va su un sito, su sette piattaforme, più le API JavaScript.

Il tracker riconosce i visitatori che arrivano da una piattaforma AI. Lo installa il nostro team durante l'onboarding, sulla piattaforma che usi. Questa pagina è il riferimento: leggila per vedere cosa va sul tuo sito, o passala a chi sviluppa se preferisci farlo tu.

HTML e siti statici

Su un sito HTML il tracker è due tag script incollati prima della chiusura del tag head.

Installazione

Questo blocco va nel file HTML, subito prima della chiusura del tag head.

html

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

Verifica l'installazione
Apri la console per sviluppatori del browser e scrivi questo. Restituisce true quando il visitatore arriva da una piattaforma AI.
javascript
```
Oltre.isLLM()  // Returns true if visitor came from an AI platform
```

React

Per Create React App, Vite o qualsiasi progetto React. Vanno bene entrambe le opzioni: scegli quella che segue come carichi gli altri script di terze parti.

Opzione 1: uno script in index.html

Va in public/index.html, prima della chiusura del tag head.

html

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

Opzione 2: un hook useEffect

Il tracker si carica dal componente App, se preferisci tenere tutti gli script nel 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

Funziona sia con App Router sia con Pages Router. Usa il componente Script del framework invece di un tag grezzo, così i due script mantengono l'ordine di caricamento.

App Router (app/layout.tsx)

I due script si montano nel layout radice. La configurazione deve girare prima del tracker, ed è quello che dicono le due strategie.

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)

Gli stessi due script, montati dal componente App personalizzato.

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

Due strade. Quella del plugin sopravvive a un aggiornamento del tema, quella di functions.php no.

Opzione 1: con un plugin (consigliata)
Installa un plugin che inietta codice nell'header, come Insert Headers and Footers o WPCode, e incolla lo snippet nel campo Header.
html
```
<script>
  window.oltreConfig = { brandId: "your-brand-id" };
</script>
<script async src="https://cdn.oltreai.com/tracker.prod.min.js"></script>
```

Opzione 2: modificare il tema (functions.php)

Questo va nel functions.php del tema. Usa un tema figlio, altrimenti il prossimo aggiornamento lo cancella.

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

Su un negozio Shopify il tracker entra dall'editor del tema.

Dove va
Negozio online, poi Temi, poi Azioni e Modifica codice. Apri theme.liquid e trova la chiusura del tag head.

Lo snippet

Questo blocco va incollato così com'è, subito prima di quel tag.

liquid

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

Vue.js

Per Vue 3, Nuxt 3 o qualsiasi progetto Vue.

Vue 3 (main.js)

La configurazione viene impostata e lo script aggiunto prima che l'app venga montata.

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)

I due script si dichiarano nell'head dell'app, così vengono resi lato server.

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

Il tracker può entrare da un container GTM già esistente, senza toccare il sito.

Crea il tag
In Google Tag Manager: Tag, poi Nuovo, poi HTML personalizzato. Imposta l'attivatore su Tutte le pagine, poi salva e pubblica.

Codice del tag

È il blocco da mettere nel campo HTML personalizzato.

html

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

API JavaScript

Una volta installato, il tracker espone un oggetto globale Oltre. Tutto quello che segue è facoltativo: il riconoscimento funziona anche senza.

Riconoscimento

Chiedi se il visitatore corrente arriva da una piattaforma AI, e su cosa si basa il riconoscimento.

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 }

Tracciare le conversioni

Registra quando un visitatore converte. La chiamata parte solo se quel visitatore è stato riconosciuto come proveniente da una piattaforma AI, quindi puoi lasciarla per tutti.

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"
})

Tracciare eventi personalizzati

Registra un'interazione che non è una conversione. Utile per misurare l'ingaggio prima che la conversione avvenga.

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
})

Esempio: un form React

Si chiama dall'handler di submit, dopo che la tua logica ha girato.

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>
}

Gli altri documenti

Il resto della documentazione, nello stesso posto.

Configurare IndexNow
Come si genera, si ospita e si collega la chiave, su sei piattaforme.
Apri il documento

L'installazione la facciamo noi

Trenta minuti, con il tuo sito aperto: cosa ti frena e da dove partiremmo. Parli con un founder, e se l'organico non è il tuo problema, te lo diciamo.

Prenota una call

Installare il tracking

HTML e siti statici

Installazione

Verifica l'installazione

React

Opzione 1: uno script in index.html

Opzione 2: un hook useEffect

Next.js

App Router (app/layout.tsx)

Pages Router (_app.tsx)

WordPress

Opzione 1: con un plugin (consigliata)

Opzione 2: modificare il tema (functions.php)

Shopify

Dove va

Lo snippet

Vue.js

Vue 3 (main.js)

Nuxt 3 (nuxt.config.ts)

Google Tag Manager

Crea il tag

Codice del tag

API JavaScript

Riconoscimento

Tracciare le conversioni

Tracciare eventi personalizzati

Esempio: un form React

Gli altri documenti

Configurare IndexNow

L'installazione la facciamo noi