Instalación en HTML personalizado

Esta guía cubre cómo añadir el seguimiento de AdTarget a cualquier sitio web usando HTML simple. Funciona con cualquier plataforma que permita JavaScript personalizado.

Instalación básica

Añade la etiqueta Script

Añade este código en el <head> de tu página:


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

Reemplaza tu Website ID

Reemplaza YOUR_WEBSITE_ID con tu ID de sitio web real del panel de AdTarget .

Guarda y despliega

Guarda tu archivo HTML y despliega tus cambios.

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

Configuración avanzada

Carga diferida (Recomendado)

Carga el script con defer para asegurar que se ejecute después de que se analice el HTML. Colócalo en el <head>:


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

Inicialización programática

Para aplicaciones de una sola página o páginas dinámicas:


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

Aplicaciones de una sola página (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"
            />
        </>
    );
}

Mejores prácticas de ubicación

Mejor ubicación: En la sección <head> con defer. Esto asegura que el script se descargue temprano pero se ejecute después de que se analice el HTML.

Dónde colocar el código:

Preferido: En la sección <head> con defer
SPAs: Cárgalo en el componente raíz de tu aplicación

Verificar la instalación

Visita tu sitio web, luego abre tu panel de AdTarget — deberías ver actividad de seguimiento en pocos segundos.

Consejo para desarrolladores: También puedes verificar que el script se está cargando abriendo la pestaña Red en las DevTools, recargando la página y buscando track. Deberías ver track.js cargarse con un estado 200.

Múltiples embudos en el mismo dominio

¿Necesitas diferentes canales de Telegram para diferentes secciones de tu sitio? Por ejemplo, yoursite.com y yoursite.com/uk cada uno dirigiendo a canales separados.

Cómo funciona: Crea un sitio separado en AdTarget para cada embudo. Cada sitio obtiene su propio código de seguimiento y canal de Telegram.

Configuración

Crea múltiples sitios en AdTarget

En tu panel de AdTarget , crea un sitio por embudo:

Sitio 1: yoursite.com → conecta a tu canal principal
Sitio 2: yoursite.com/uk → conecta a tu canal UK

Añade carga condicional

Usa JavaScript para cargar el código de seguimiento correcto según la 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>

Ejemplo con 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: Cada página solo debe cargar un script de seguimiento. La lógica condicional asegura que el script correcto se ejecute según la ruta de la URL.

Content Security Policy (CSP)

Si tu sitio usa cabeceras CSP, añade AdTarget a tus fuentes permitidas:


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

La directiva connect-src es necesaria porque el tracker envía datos a https://adtarget.io mediante solicitudes fetch y sendBeacon.

Solución de problemas

Problemas comunes:

¿El script no carga? Revisa la pestaña Red del navegador en busca de errores
¿El tracker no se inicializa? Confirma que tu Site ID sea correcto
¿No hay sesiones en el panel? Verifica si los bloqueadores de anuncios están interfiriendo

¿El script no carga?

Revisa la pestaña Red del navegador en busca de errores
Verifica que la URL sea correcta
Asegúrate de que no haya violaciones de CSP

¿El tracker no se inicializa?

Confirma que tu Site ID sea correcto
Busca errores de JavaScript en la consola
Verifica la sintaxis de la etiqueta script

¿No ves sesiones en el panel?

Asegúrate de que estás visitando la página con el tracker instalado
Espera 30 segundos para que los datos aparezcan
Verifica si los bloqueadores de anuncios están interfiriendo

¿Necesitas ayuda?

¿Tienes problemas? Contacta con soporte con:

La URL de tu sitio web
Captura de pantalla de tu código HTML
Errores de la consola del navegador
Captura de pantalla de la pestaña Red mostrando la solicitud del script