Skip to Content
Suivez vos conversions Telegram avec Meta Ads — commencez en quelques minutes !
Guides d'installationHTML personnalisé

Installation HTML personnalisée

Ce guide explique comment ajouter le suivi AdTarget à n’importe quel site web en utilisant du HTML simple. Fonctionne avec toute plateforme qui autorise le JavaScript personnalisé.

Installation de base

Ajoutez la balise script

Ajoutez ce code dans le <head> de votre page :

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

Remplacez votre Website ID

Remplacez YOUR_WEBSITE_ID par votre identifiant de site réel depuis le tableau de bord AdTarget .

Enregistrez et déployez

Enregistrez votre fichier HTML et déployez vos modifications.

Exemple complet

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

Configuration avancée

Chargement différé (Recommandé)

Chargez le script avec defer pour vous assurer qu’il s’exécute après l’analyse du HTML. Placez-le dans le <head> :

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

Initialisation programmatique

Pour les applications monopage ou les pages dynamiques :

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

Applications monopage (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"
            />
        </>
    );
}

Bonnes pratiques de placement

Meilleur placement : Dans la section <head> avec defer. Cela garantit que le script est récupéré tôt mais s’exécute après l’analyse du HTML.

Où placer le code :

  1. Préféré : Dans la section <head> avec defer
  2. SPA : Chargez dans le composant racine de votre application

Vérifier l’installation

Visitez votre site web, puis ouvrez votre tableau de bord AdTarget  — vous devriez voir l’activité de suivi apparaître en quelques secondes.

Astuce développeur : Vous pouvez aussi vérifier que le script se charge en ouvrant l’onglet Réseau dans les DevTools, en rechargeant la page et en recherchant track. Vous devriez voir track.js se charger avec un statut 200.

Plusieurs funnels sur le même domaine

Besoin de channels Telegram différents pour différentes sections de votre site ? Par exemple, yoursite.com et yoursite.com/uk menant chacun à des channels séparés.

Comment ça fonctionne : Créez un site séparé dans AdTarget pour chaque funnel. Chaque site obtient son propre code de suivi et channel Telegram.

Configuration

Créez plusieurs sites dans AdTarget

Dans votre tableau de bord AdTarget , créez un site par funnel :

  • Site 1 : yoursite.com → connecté à votre channel principal
  • Site 2 : yoursite.com/uk → connecté à votre channel UK

Ajoutez un chargement conditionnel

Utilisez du JavaScript pour charger le bon code de suivi en fonction de l’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>

Exemple 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"
    />
  );
}

Important : Chaque page ne doit charger qu’un seul script de suivi. La logique conditionnelle garantit que le bon script s’exécute en fonction du chemin de l’URL.

Content Security Policy (CSP)

Si votre site utilise des en-têtes CSP, ajoutez AdTarget à vos sources autorisées :

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

La directive connect-src est nécessaire car le tracker envoie des données à https://adtarget.io via des requêtes fetch et sendBeacon.

Dépannage

Problèmes courants :

  • Le script ne se charge pas ? Vérifiez l’onglet Réseau du navigateur pour les erreurs
  • Le tracker ne s’initialise pas ? Confirmez que votre Site ID est correct
  • Pas de sessions dans le tableau de bord ? Vérifiez si des bloqueurs de publicités interfèrent

Le script ne se charge pas ?

  • Vérifiez l’onglet Réseau du navigateur pour les erreurs
  • Vérifiez que l’URL est correcte
  • Assurez-vous qu’il n’y a pas de violations CSP

Le tracker ne s’initialise pas ?

  • Confirmez que votre Site ID est correct
  • Vérifiez les erreurs JavaScript dans la console
  • Vérifiez la syntaxe de la balise script

Pas de sessions dans le tableau de bord ?

  • Assurez-vous de visiter la page avec le tracker installé
  • Attendez 30 secondes pour que les données apparaissent
  • Vérifiez si des bloqueurs de publicités interfèrent

Besoin d’aide ?

Des problèmes ? Contactez le support avec :

  • L’URL de votre site web
  • Une capture d’écran de votre code HTML
  • Les erreurs de la console du navigateur
  • Une capture d’écran de l’onglet Réseau montrant la requête du script
Last updated on
FramerAperçu
Installation HTML personnalisée | AdTarget Docs