Liltag - Простой Менеджер Тегов Для Вашего Сайта

Я продолжаю пилить свой open-source проект Econumo и в какой-то момент мне потребовалось добавлять скрипты аналитики на публичную версию сайта, но при этом не сохраняя их в репозитории.

Можно было бы использовать отдельный шаблон для своего продакшена, но проблема в том, что я распространяю единый образ с уже собранной, минифицированной статикой, что делает подмену шаблона неудобной. Другой вариант - это использовать Google Tag Manager или его альтернативы. Однако они представляют из себя более сложные системы и могут быть GDPR не совместимы. Это может не подходить для некоторых пользователей open-source версии.

В общем, я подумал, что проще сделать свою облегченную версию Tag Manager’а, которую можно гибко настраивать через JSON-конфиг. Что подходит как и для моих нужд, так и для open-source версии.

Так появился Liltag.

Успеть за 20 минут

Осознание, что мне нужен такой инструмент, пришло мне в голову по дороге из офиса на поезд. Поезд из даунтауна до дома едет примерно 20 минут. С учетом того, что у меня с собой был только телефон, программирование казалось проблематичным. Однако я подумал, что можно же попросить помощи у ChatGPT. И за несколько запросов я получил код, содержимое репозитория и документацию. Магия!

Первая версия библиотеки была готова за первую поездку и даже начала работать к моему возвращению домой. За следующие пару дней мы с ChatGPT брейнштормили и дорабатывали либу: улучшили програмный интерфейс, сделали небольшой рефакторинг, добавили автоматическую сборку на Github Actions и обновили документацию.

Примерно после трех поездок на поезде и финальной обкатки, я выложил библиотеку в open-source.

Самое сложное оказалось - определиться с набором функционала, так как хотелось сделать простое, но в тоже время гибкое решение. И мне кажется, что мне это удалось. А что касается качества полученного кода - над этим точно можно еще поработать, но даже сейчас это уже достойный уровень.

Что умеет Liltag

  • Может загружать скрипты, стили и HTML-компоненты на ваш сайт по похожему принципу, что и Google Tag Manager.
  • В конфиге можно указать, в какую часть страницы будет вставлен тег (head, body top, or body bottom).
  • Тег инициализируется, как реакция на выбранное событие (об этом чуть ниже).

Установка Liltag

Простое подключение Liltag

<script src="//deeravenger.github.io/liltag/dist/liltag.min.js" defer></script>
<script>
  const lilTag = new LilTag("path_or_url/to/liltag_config.json");
  lilTag.init();
</script>

Вы можете скачать liltag.min.js и подключить его локально.

Асинхронное подключение Liltag

<script>
  (function () {
    const script = document.createElement("script");
    script.src = "//deeravenger.github.io/liltag/dist/liltag.min.js";
    script.async = true;
    script.onload = function () {
      const lilTag = new LilTag("path_or_url/to/liltag_config.json");
      lilTag.init();
    };
    document.head.appendChild(script);
  })();
</script>

Конфигурация Liltag

Загрузка конфига по URL

При установке Liltag, вы можете указать URL конфига, который будет загружен и использован для инициализации тегов.

<script src="//deeravenger.github.io/liltag/dist/liltag.min.js" defer></script>
<script>
  const lilTag = new LilTag("path_or_url/to/liltag_config.json");
  lilTag.init();
</script>

Пример конфига:

{
  "tags": [
    {
      "id": "analytics",
      "trigger": "pageLoad",
      "content": "<script type=\"text/javascript\">console.log('Analytics script loaded.');</script>",
      "location": "head"
    }
  ]
}

Конфигурация Liltag в коде

const lilTag = new LilTag({
  "tags": [
    {
      "id": "analytics",
      "trigger": "pageLoad",
      "content": "<script type=\"text/javascript\">console.log('Analytics script loaded.');</script>",
      "location": "head"
    }
  ]
});
lilTag.init();

Кэширование конфига

Liltag может кэшировать конфигурацию, что позволяет избежать лишних запросов к серверу и улучшает производительность.

const lilTag = new LilTag('path_or_url/to/liltag_config.json');
lilTag.enableCache(7200); // Enable caching with a TTL of 2 hours (7200 seconds)
lilTag.init();

Полный конфиг

Каждый тег в конфиге может содержать следующие поля:

  • id: Уникальный идентификатор тега.
  • trigger: Событие, на которое будет инициализироваться тег. Доступны следущие события:
    • pageLoad: Инициализация по загрузке страницы.
    • domReady: Инициализация по готовности DOM.
    • timeDelay: Инициализация с задержкой в секундах.
    • elementVisible: Инициализация по видимости элемента на странице.
    • customEvent: Инициализация по произвольному событию.
  • content: HTML-компонент, который будет вставлен на страницу.
  • location: Позиция, в которую будет вставлен тег:
    • head: В head.
    • bodyTop: В body top.
    • bodyBottom: В body bottom.
  • delay (optional): Задержка инициализации в секундах. Используется только если trigger - timeDelay.
  • selector (optional): Селектор элемента, по которому будет происходить инициализация. Используется только если trigger - elementVisible.
  • eventName (optional): Имя события, по которому будет происходить инициализация. Используется только если trigger - customEvent.

Заключение

За последний год ChatGPT (да и другие нейросети) стали ощутимо лучше держать контекст и понимать, что от них требуется. Я постепенно вижу, как начинает трансформироваться и мой процесс разработки, адаптируя разные инструменты. На данный момент это ощущается как работа с джуном, который может очень быстро искать и предлагать разные способы решения, но при этом пока не может самостоятельно придумывать и реализовывать что-то новое.

open-sourcetools