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 just before the closing body tag:


<script src="https://adtarget.io/tracker.min.js" data-site="YOUR_SITE_ID"></script>

Replace Your Site ID

Replace YOUR_SITE_ID with your actual site 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>
</head>
<body>
    <!-- Your page content here -->
    <h1>Join Our Telegram Channel</h1>
    <a href="https://t.me/yourchannel" class="telegram-link">
        Join Now
    </a>
 
    <!-- AdTarget Tracking (add just before </body>) -->
    <script src="https://adtarget.io/tracker.min.js" data-site="YOUR_SITE_ID"></script>
</body>
</html>

Advanced Configuration

Async Loading

For better page performance, load the script asynchronously:


<script
    src="https://adtarget.io/tracker.min.js"
    data-site="YOUR_SITE_ID"
    async
></script>

Deferred Loading

To ensure the script runs after page load:


<script
    src="https://adtarget.io/tracker.min.js"
    data-site="YOUR_SITE_ID"
    defer
></script>

Programmatic Initialization

For single-page applications or dynamic pages:


<script>
    // Load tracker dynamically
    function loadAdTarget() {
        const script = document.createElement('script');
        script.src = 'https://adtarget.io/tracker.min.js';
        script.setAttribute('data-site', 'YOUR_SITE_ID');
        document.body.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.src = 'https://adtarget.io/tracker.min.js';
        script.setAttribute('data-site', 'YOUR_SITE_ID');
        document.body.appendChild(script);
 
        return () => {
            document.body.removeChild(script);
        };
    }, []);
 
    return <div>Your app content</div>;
}

Vue


<script setup>
import { onMounted, onUnmounted } from 'vue';
 
let script;
 
onMounted(() => {
    script = document.createElement('script');
    script.src = 'https://adtarget.io/tracker.min.js';
    script.setAttribute('data-site', 'YOUR_SITE_ID');
    document.body.appendChild(script);
});
 
onUnmounted(() => {
    if (script) document.body.removeChild(script);
});
</script>

Next.js


// pages/_app.js or app/layout.js
import Script from 'next/script';
 
export default function App({ Component, pageProps }) {
    return (
        <>
            <Component {...pageProps} />
            <Script
                src="https://adtarget.io/tracker.min.js"
                data-site="YOUR_SITE_ID"
                strategy="afterInteractive"
            />
        </>
    );
}

Placement Best Practices

Best placement: Just before the closing </body> tag. This ensures your page content loads first for a better user experience.

Where to place the code:

Preferred: Just before the closing body tag
Alternative: In the head section with async or defer
SPAs: Load in your app’s root component

Verify Installation

Open DevTools

Open your page and press F12 to open browser DevTools.

Check the Console

Go to the Console tab and look for: AdTarget: initialized

Verify in Network Tab

Go to the Network tab, reload the page, search for tracker, and verify tracker.min.js loads with 200 status.

Check in AdTarget Dashboard

Visit your landing page, then within 30 seconds check your AdTarget dashboard — you should see a new session.

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/tracker.min.js';
  s.setAttribute('data-site', siteId);
  document.body.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/tracker.min.js"
      data-site={siteId}
      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;

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