Benutzerdefinierte HTML-Installation

Diese Anleitung beschreibt, wie du AdTarget-Tracking mit einfachem HTML zu jeder Website hinzufügst. Funktioniert mit jeder Plattform, die benutzerdefiniertes JavaScript erlaubt.

Grundinstallation

Script-Tag hinzufügen

Füge diesen Code in den <head> deiner Seite ein:


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

Deine Website-ID ersetzen

Ersetze YOUR_WEBSITE_ID durch deine tatsächliche Website-ID aus dem AdTarget-Dashboard .

Speichern und deployen

Speichere deine HTML-Datei und deploye deine Änderungen.

Vollständiges Beispiel


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

Erweiterte Konfiguration

Verzögertes Laden (Empfohlen)

Lade das Script mit defer, damit es nach dem Parsen des HTML ausgeführt wird. Platziere es im <head>:


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

Programmatische Initialisierung

Für Single-Page-Anwendungen oder dynamische Seiten:


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

Single-Page-Anwendungen (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"
            />
        </>
    );
}

Best Practices für die Platzierung

Beste Platzierung: Im <head>-Bereich mit defer. So wird das Script früh abgerufen, aber erst nach dem Parsen des HTML ausgeführt.

Wo den Code platzieren:

Bevorzugt: Im <head>-Bereich mit defer
SPAs: In der Root-Komponente deiner App laden

Installation überprüfen

Besuche deine Website und öffne dann dein AdTarget-Dashboard — du solltest innerhalb weniger Sekunden Tracking-Aktivität sehen.

Entwickler-Tipp: Du kannst auch überprüfen, ob das Script geladen wird, indem du den Netzwerk-Tab in den DevTools öffnest, die Seite neu lädst und nach track suchst. Du solltest sehen, dass track.js mit einem 200-Status geladen wird.

Mehrere Funnels auf derselben Domain

Brauchst du verschiedene Telegram-Kanäle für verschiedene Bereiche deiner Website? Zum Beispiel yoursite.com und yoursite.com/uk, die jeweils zu separaten Kanälen führen.

So funktioniert es: Erstelle für jeden Funnel eine separate Website in AdTarget. Jede Website bekommt ihren eigenen Tracking-Code und Telegram-Kanal.

Einrichtung

Erstelle mehrere Websites in AdTarget

Erstelle in deinem AdTarget-Dashboard eine Website pro Funnel:

Website 1: yoursite.com → verbindet sich mit deinem Hauptkanal
Website 2: yoursite.com/uk → verbindet sich mit deinem UK-Kanal

Bedingtes Laden hinzufügen

Verwende JavaScript, um den richtigen Tracking-Code basierend auf der URL zu laden:


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

React / Next.js Beispiel


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

Wichtig: Jede Seite sollte nur ein Tracking-Script laden. Die bedingte Logik stellt sicher, dass das richtige Script basierend auf dem URL-Pfad ausgeführt wird.

Content Security Policy (CSP)

Wenn deine Website CSP-Header verwendet, füge AdTarget zu deinen erlaubten Quellen hinzu:


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

Die connect-src-Direktive ist erforderlich, weil der Tracker Daten über fetch- und sendBeacon-Anfragen an https://adtarget.io sendet.

Fehlerbehebung

Häufige Probleme:

Script lädt nicht? Prüfe den Netzwerk-Tab des Browsers auf Fehler
Tracker initialisiert nicht? Stelle sicher, dass deine Website-ID korrekt ist
Keine Sitzungen im Dashboard? Prüfe, ob Werbeblocker stören

Script lädt nicht?

Prüfe den Netzwerk-Tab des Browsers auf Fehler
Stelle sicher, dass die URL korrekt ist
Prüfe auf CSP-Verletzungen

Tracker initialisiert nicht?

Stelle sicher, dass deine Website-ID korrekt ist
Prüfe auf JavaScript-Fehler in der Konsole
Überprüfe die Script-Tag-Syntax

Keine Sitzungen im Dashboard?

Stelle sicher, dass du die Seite mit dem installierten Tracker besuchst
Warte 30 Sekunden, bis die Daten erscheinen
Prüfe, ob Werbeblocker stören

Brauchst du Hilfe?

Probleme? Kontaktiere den Support mit:

Deiner Website-URL
Einem Screenshot deines HTML-Codes
Browser-Konsolenfehlern
Einem Netzwerk-Tab-Screenshot mit der Script-Anfrage