Skip to Content
Traccia le tue conversioni Telegram con Meta Ads — inizia in pochi minuti!
Guide all'InstallazioneHTML Personalizzato

Installazione HTML Personalizzata

Questa guida spiega come aggiungere il tracciamento AdTarget a qualsiasi sito web usando HTML semplice. Funziona con qualsiasi piattaforma che consente JavaScript personalizzato.

Installazione Base

Aggiungi il Tag Script

Aggiungi questo codice nel <head> della tua pagina:

<script defer src="https://adtarget.io/track.js" data-website-id="atid_YOUR_WEBSITE_ID" data-domain="yourdomain.com"></script>

Sostituisci il Tuo Website ID

Sostituisci YOUR_WEBSITE_ID con il tuo ID sito reale dalla dashboard AdTarget .

Salva e Pubblica

Salva il tuo file HTML e pubblica le modifiche.

Esempio Completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Landing Page</title>
    <!-- AdTarget Tracking (add in the <head>) -->
    <script defer src="https://adtarget.io/track.js" data-website-id="atid_YOUR_WEBSITE_ID" data-domain="yourdomain.com"></script>
</head>
<body>
    <!-- Your page content here -->
    <h1>Join Our Telegram Channel</h1>
    <a href="https://t.me/yourchannel" class="telegram-link">
        Join Now
    </a>
</body>
</html>

Configurazione Avanzata

Caricamento Differito (Consigliato)

Carica lo script con defer per assicurarti che venga eseguito dopo il parsing dell’HTML. Posizionalo nel <head>:

<script
    src="https://adtarget.io/track.js"
    data-website-id="atid_YOUR_WEBSITE_ID"
    data-domain="yourdomain.com"
    defer
></script>

Inizializzazione Programmatica

Per applicazioni single-page o pagine dinamiche:

<script>
    // Load tracker dynamically
    function loadAdTarget() {
        const script = document.createElement('script');
        script.defer = true;
        script.src = 'https://adtarget.io/track.js';
        script.setAttribute('data-website-id', 'atid_YOUR_WEBSITE_ID');
        script.setAttribute('data-domain', 'yourdomain.com');
        document.head.appendChild(script);
    }
 
    // Call when ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadAdTarget);
    } else {
        loadAdTarget();
    }
</script>

Applicazioni Single-Page (SPA)

React

import { useEffect } from 'react';
 
function App() {
    useEffect(() => {
        const script = document.createElement('script');
        script.defer = true;
        script.src = 'https://adtarget.io/track.js';
        script.setAttribute('data-website-id', 'atid_YOUR_WEBSITE_ID');
        script.setAttribute('data-domain', 'yourdomain.com');
        document.head.appendChild(script);
 
        return () => {
            document.head.removeChild(script);
        };
    }, []);
 
    return <div>Your app content</div>;
}

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';
 
let script;
 
onMounted(() => {
    script = document.createElement('script');
    script.defer = true;
    script.src = 'https://adtarget.io/track.js';
    script.setAttribute('data-website-id', 'atid_YOUR_WEBSITE_ID');
    script.setAttribute('data-domain', 'yourdomain.com');
    document.head.appendChild(script);
});
 
onUnmounted(() => {
    if (script) document.head.removeChild(script);
});
</script>

Next.js (App Router)

// app/layout.js
import Script from 'next/script'
 
export default function RootLayout({ children }) {
    return (
        <html>
            <head>
                <Script
                    src="https://adtarget.io/track.js"
                    data-website-id="atid_YOUR_WEBSITE_ID"
                    data-domain="yourdomain.com"
                    strategy="afterInteractive"
                />
            </head>
            <body>{children}</body>
        </html>
    )
}

Next.js (Pages Router)

// pages/_app.js
import Script from 'next/script';
 
export default function App({ Component, pageProps }) {
    return (
        <>
            <Component {...pageProps} />
            <Script
                src="https://adtarget.io/track.js"
                data-website-id="atid_YOUR_WEBSITE_ID"
                data-domain="yourdomain.com"
                strategy="afterInteractive"
            />
        </>
    );
}

Buone Pratiche per il Posizionamento

Posizionamento migliore: Nella sezione <head> con defer. Questo assicura che lo script venga scaricato presto ma eseguito dopo il parsing dell’HTML.

Dove posizionare il codice:

  1. Preferito: Nella sezione <head> con defer
  2. SPA: Caricalo nel componente root della tua app

Verifica l’Installazione

Visita il tuo sito web, poi apri la tua dashboard AdTarget  — dovresti vedere l’attività di tracciamento apparire entro pochi secondi.

Suggerimento per sviluppatori: Puoi anche verificare che lo script si stia caricando aprendo la scheda Network nei DevTools, ricaricando la pagina e cercando track. Dovresti vedere track.js caricarsi con stato 200.

Più Funnel sullo Stesso Dominio

Hai bisogno di canali Telegram diversi per sezioni diverse del tuo sito? Ad esempio, yoursite.com e yoursite.com/uk che portano ciascuno a canali separati.

Come funziona: Crea un sito separato in AdTarget per ogni funnel. Ogni sito ottiene il proprio codice di tracciamento e canale Telegram.

Configurazione

Crea Più Siti in AdTarget

Nella tua dashboard AdTarget , crea un sito per funnel:

  • Sito 1: yoursite.com → collegato al tuo canale principale
  • Sito 2: yoursite.com/uk → collegato al tuo canale UK

Aggiungi il Caricamento Condizionale

Usa JavaScript per caricare il codice di tracciamento corretto in base all’URL:

<script>
(function() {
  var path = window.location.pathname;
  var siteId;
 
  // Define your funnels
  if (path.indexOf('/uk') === 0) {
    siteId = 'atid_xyz789';  // UK funnel
  } else if (path.indexOf('/fr') === 0) {
    siteId = 'atid_def456';  // France funnel
  } else {
    siteId = 'atid_abc123';  // Main site
  }
 
  var s = document.createElement('script');
  s.defer = true;
  s.src = 'https://adtarget.io/track.js';
  s.setAttribute('data-website-id', siteId);
  s.setAttribute('data-domain', 'yourdomain.com');
  document.head.appendChild(s);
})();
</script>

Esempio React / Next.js

import Script from 'next/script';
import { usePathname } from 'next/navigation';
 
export default function AdTargetTracker() {
  const pathname = usePathname();
 
  // Determine site ID based on path
  const siteId = pathname.startsWith('/uk')
    ? 'atid_xyz789'
    : 'atid_abc123';
 
  return (
    <Script
      src="https://adtarget.io/track.js"
      data-website-id={siteId}
      data-domain="yourdomain.com"
      strategy="afterInteractive"
    />
  );
}

Importante: Ogni pagina dovrebbe caricare un solo script di tracciamento. La logica condizionale assicura che venga eseguito lo script corretto in base al percorso URL.

Content Security Policy (CSP)

Se il tuo sito usa header CSP, aggiungi AdTarget alle fonti consentite:

Content-Security-Policy: script-src 'self' https://adtarget.io; connect-src 'self' https://adtarget.io;

La direttiva connect-src è necessaria perché il tracker invia dati a https://adtarget.io tramite richieste fetch e sendBeacon.

Risoluzione dei Problemi

Problemi comuni:

  • Lo script non si carica? Controlla la scheda Network del browser per gli errori
  • Il tracker non si inizializza? Verifica che il tuo Site ID sia corretto
  • Nessuna sessione nella dashboard? Controlla se gli ad blocker stanno interferendo

Lo script non si carica?

  • Controlla la scheda Network del browser per gli errori
  • Verifica che l’URL sia corretto
  • Assicurati che non ci siano violazioni CSP

Il tracker non si inizializza?

  • Verifica che il tuo Site ID sia corretto
  • Controlla gli errori JavaScript nella console
  • Verifica la sintassi del tag script

Non vedi sessioni nella dashboard?

  • Assicurati di visitare la pagina dove il tracker è installato
  • Aspetta 30 secondi perché i dati appaiano
  • Controlla se gli ad blocker stanno interferendo

Hai Bisogno di Aiuto?

Hai problemi? Contatta il supporto con:

  • L’URL del tuo sito web
  • Uno screenshot del tuo codice HTML
  • Gli errori della console del browser
  • Uno screenshot della scheda Network che mostra la richiesta dello script
Last updated on
FramerPanoramica
Installazione HTML Personalizzata | AdTarget Docs