🎯 JS Tracking Snippet Demo

Демонстрация трекинг-системы по типу Google Tag Manager

👀 Откройте консоль браузера (F12) чтобы увидеть все события трекинга!
Каждый клик на странице будет залогирован в консоль с подробной информацией:
• Selector - CSS селектор элемента
• CSS Path - полный путь до элемента
• XPath - для точной идентификации
• Data атрибуты - все data-* атрибуты
• Размеры и позиция - где расположен элемент
• И многое другое!

Как это работает?

1. Snippet (snippet.js) - минимальный код, который вы вставляете на сайт
2. Tracker (tracker.js) - основной скрипт, который загружается асинхронно
3. Tracker автоматически отслеживает клики, просмотры страниц и другие события

🖱️ Демо: Трекинг кликов

Нажмите на любую из этих кнопок и посмотрите в консоль:

🔗 Ссылки

Внешняя ссылка | Внутренняя ссылка | Другая страница

📊 Информация о трекинге

Tracking ID

-

User ID

-

Одинаковый во всех вкладках

Session ID

-

Уникальный для вкладки

Tab ID

-

Уникальный для вкладки

Первый визит

-

Returning User

-

⚙️ Ручной трекинг событий

Вы также можете вручную отправлять события:

📝 Пример кода для вставки

Вставьте этот код в <head> вашего сайта:

<script>
(function(w,d,s,url,n){
  w[n]=w[n]||{trackingId:null,config:{},queue:[]};
  var script=d.createElement(s);
  script.async=true;
  script.src=url;
  var firstScript=d.getElementsByTagName(s)[0];
  firstScript.parentNode.insertBefore(script,firstScript);
  w[n].init=function(id,cfg){w[n].trackingId=id;w[n].config=cfg||{}};
  w[n].track=function(e,d){w[n].queue.push({event:e,data:d,timestamp:Date.now()})};
})(window,document,'script','https://js-tracking-snippet-1760886854.s3.eu-central-1.amazonaws.com/tracker.js','Tracker');

Tracker.init('YOUR-TRACKING-ID', { debug: true });
</script>

📖 Дополнительная информация

Эта система трекинга работает аналогично Google Tag Manager или Google Analytics. Минимальный сниппет загружает основной скрипт асинхронно, не блокируя загрузку страницы.

Особенности:

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

Трекинг скролла будет логировать события при достижении 25%, 50%, 75% и 100% страницы

🎉 Вы прокрутили до конца!
Проверьте консоль для событий скролла