Skip to Content
Отслеживайте конверсии Telegram из Meta Ads — начните за несколько минут!
Руководства по установкеПроизвольный HTML

Установка на произвольный HTML-сайт

Это руководство описывает, как добавить отслеживание AdTarget на любой сайт с помощью обычного HTML. Работает с любой платформой, которая поддерживает пользовательский JavaScript.

Базовая установка

Добавьте тег script

Добавьте этот код в <head> вашей страницы:

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

Замените идентификатор сайта

Замените YOUR_WEBSITE_ID на ваш реальный идентификатор сайта из панели управления AdTarget .

Сохраните и разверните

Сохраните HTML-файл и разверните изменения.

Полный пример

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

Расширенная настройка

Отложенная загрузка (Рекомендуется)

Загружайте скрипт с defer, чтобы он выполнялся после разбора HTML. Размещайте его в <head>:

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

Программная инициализация

Для одностраничных приложений или динамических страниц:

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

Одностраничные приложения (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"
            />
        </>
    );
}

Лучшие практики размещения

Оптимальное размещение: В секции <head> с атрибутом defer. Это гарантирует, что скрипт загружается заранее, но выполняется после разбора HTML.

Где размещать код:

  1. Предпочтительно: В секции <head> с defer
  2. SPA: Загружайте в корневом компоненте приложения

Проверка установки

Посетите ваш сайт, затем откройте панель управления AdTarget  — вы должны увидеть активность отслеживания в течение нескольких секунд.

Совет для разработчиков: Вы также можете проверить загрузку скрипта, открыв вкладку Network в DevTools, перезагрузив страницу и выполнив поиск по track. Вы должны увидеть загрузку track.js со статусом 200.

Несколько воронок на одном домене

Нужны разные Telegram-каналы для разных разделов сайта? Например, yoursite.com и yoursite.com/uk, каждый ведущий в отдельный канал.

Как это работает: Создайте отдельный сайт в AdTarget для каждой воронки. Каждый сайт получает свой код отслеживания и Telegram-канал.

Настройка

Создайте несколько сайтов в AdTarget

В панели управления AdTarget  создайте по одному сайту на каждую воронку:

  • Сайт 1: yoursite.com -> подключается к основному каналу
  • Сайт 2: yoursite.com/uk -> подключается к UK-каналу

Добавьте условную загрузку

Используйте JavaScript для загрузки нужного кода отслеживания в зависимости от 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

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

Важно: Каждая страница должна загружать только один скрипт отслеживания. Условная логика обеспечивает выполнение нужного скрипта в зависимости от URL-пути.

Content Security Policy (CSP)

Если ваш сайт использует CSP-заголовки, добавьте AdTarget в список разрешённых источников:

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

Директива connect-src необходима, потому что трекер отправляет данные на https://adtarget.io через запросы fetch и sendBeacon.

Устранение неполадок

Частые проблемы:

  • Скрипт не загружается? Проверьте вкладку Network браузера на наличие ошибок
  • Трекер не инициализируется? Убедитесь, что идентификатор сайта указан правильно
  • Нет сессий в панели управления? Проверьте, не блокирует ли скрипт блокировщик рекламы

Скрипт не загружается?

  • Проверьте вкладку Network браузера на наличие ошибок
  • Убедитесь, что URL указан правильно
  • Проверьте отсутствие нарушений CSP

Трекер не инициализируется?

  • Убедитесь, что идентификатор сайта указан правильно
  • Проверьте наличие ошибок JavaScript в консоли
  • Проверьте синтаксис тега script

Не видите сессии в панели управления?

  • Убедитесь, что вы посещаете страницу с установленным трекером
  • Подождите 30 секунд для отображения данных
  • Проверьте, не блокирует ли скрипт блокировщик рекламы

Нужна помощь?

Возникли проблемы? Обратитесь в поддержку с указанием:

  • URL вашего сайта
  • Скриншот вашего HTML-кода
  • Ошибки из консоли браузера
  • Скриншот вкладки Network с запросом скрипта
Last updated on
FramerОбзор
Установка на произвольный HTML-сайт | AdTarget Docs