Custom HTML Installation

This guide covers how to add AdTarget tracking to any website using plain HTML. Works with any platform that allows custom JavaScript.

Basic Installation

Add the Script Tag

Add this code in the <head> of your page:


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

Replace Your Website ID

Replace YOUR_WEBSITE_ID with your actual website ID from the AdTarget dashboard .

Save and Deploy

Save your HTML file and deploy your changes.

Full Example


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

Advanced Configuration

Deferred Loading (Recommended)

Load the script with defer to ensure it runs after the HTML is parsed. Place it in the <head>:


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

Programmatic Initialization

For single-page applications or dynamic pages:


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

Placement Best Practices

Best placement: In the <head> section with defer. This ensures the script is fetched early but executes after the HTML is parsed.

Where to place the code:

Preferred: In the <head> section with defer
SPAs: Load in your app’s root component

Verify Installation

Visit your website, then open your AdTarget dashboard — you should see tracking activity appear within a few seconds.

Developer tip: You can also verify the script is loading by opening the Network tab in DevTools, reloading the page, and searching for track. You should see track.js load with a 200 status.

Multiple Funnels on the Same Domain

Need different Telegram channels for different sections of your site? For example, yoursite.com and yoursite.com/uk each leading to separate channels.

How it works: Create a separate site in AdTarget for each funnel. Each site gets its own tracking code and Telegram channel.

Setup

Create Multiple Sites in AdTarget

In your AdTarget dashboard , create one site per funnel:

Site 1: yoursite.com → connects to your main channel
Site 2: yoursite.com/uk → connects to your UK channel

Add Conditional Loading

Use JavaScript to load the correct tracking code based on the 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>

React / Next.js Example


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: Each page should only load one tracking script. The conditional logic ensures the correct script runs based on the URL path.

Content Security Policy (CSP)

If your site uses CSP headers, add AdTarget to your allowed sources:


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

The connect-src directive is required because the tracker sends data to https://adtarget.io via fetch and sendBeacon requests.

Troubleshooting

Common issues:

Script not loading? Check the browser’s Network tab for errors
Tracker not initializing? Confirm your site ID is correct
No sessions in dashboard? Check if ad blockers are interfering

Script not loading?

Check the browser’s Network tab for errors
Verify the URL is correct
Ensure no CSP violations

Tracker not initializing?

Confirm your site ID is correct
Check for JavaScript errors in console
Verify the script tag syntax

Not seeing sessions in dashboard?

Make sure you’re visiting the page with the tracker installed
Allow 30 seconds for data to appear
Check if ad blockers are interfering

Need Help?

Having issues? Contact support with:

Your website URL
Screenshot of your HTML code
Browser console errors
Network tab screenshot showing the script request