Liltag - Un Gestor De Etiquetas Sencillo Para Tu Sitio Web

Sigo trabajando en mi proyecto open-source Econumo y, en algún momento, necesitaba agregar scripts de análisis a la versión pública del sitio, pero sin almacenarlos en el repositorio.

Podría haber usado una plantilla separada para mi producción, pero el problema es que distribuyo una sola imagen con todo el contenido estático ya compilado y minimizado, lo cual hace que reemplazar la plantilla sea incómodo. Otra opción es usar Google Tag Manager o alguna de sus alternativas. Sin embargo, estas suelen ser sistemas más complejos y pueden no cumplir con GDPR. Esto puede no ser adecuado para algunos usuarios de la versión open-source.

En resumen, pensé que sería más fácil crear mi propia versión ligera de un Tag Manager que se pudiera configurar de manera flexible a través de un archivo JSON. Algo que sirviera tanto para mis necesidades como para la versión open-source.

Así nació Liltag.

Lograrlo en 20 minutos

La idea de que necesitaba esta herramienta se me ocurrió mientras iba en camino de la oficina al tren. El trayecto desde el centro hasta mi casa lleva aproximadamente 20 minutos. Dado que solo tenía mi teléfono conmigo, programar parecía problemático. Sin embargo, pensé que podía pedir ayuda a ChatGPT. Y tras unos pocos pedidos, obtuve el código, el contenido del repositorio y la documentación. ¡Magia!

La primera versión de la biblioteca estuvo lista durante el primer viaje y comenzó a funcionar para cuando llegué a casa. Durante los siguientes días, ChatGPT y yo hicimos brainstorming y mejoramos la librería: optimizamos la interfaz de programación, realizamos un pequeño refactor, agregamos compilación automática en Github Actions y actualizamos la documentación.

Después de unos tres viajes en tren y pruebas finales, publiqué la biblioteca en open-source.

Lo más difícil fue decidir el conjunto de funcionalidades, ya que quería algo simple pero a la vez flexible. Creo que lo logré. En cuanto a la calidad del código, todavía se puede mejorar, pero ya está en un nivel decente.

Qué puede hacer Liltag

  • Puede cargar scripts, estilos y componentes HTML en tu sitio de manera similar a Google Tag Manager.
  • En el archivo de configuración, puedes especificar en qué parte de la página insertar la etiqueta (head, body top, o body bottom).
  • La etiqueta se inicializa en respuesta a un evento seleccionado (más sobre esto a continuación).

Instalación de Liltag

Integración simple de 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>

Puedes descargar liltag.min.js e integrarlo localmente.

Integración asíncrona de 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>

Configuración de Liltag

Cargando la configuración por URL

Al instalar Liltag, puedes proporcionar una URL del archivo de configuración que se cargará y usará para inicializar las etiquetas.

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

Ejemplo de archivo de configuración:

{
  "tags": [
    {
      "id": "analytics",
      "trigger": "pageLoad",
      "content": "<script type=\"text/javascript\">console.log('Script de análisis cargado.');</script>",
      "location": "head"
    }
  ]
}

Configuración de Liltag en el código

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

Caché de configuración

Liltag puede cachear la configuración, evitando así solicitudes innecesarias al servidor y mejorando el rendimiento.

const lilTag = new LilTag('path_or_url/to/liltag_config.json');
lilTag.enableCache(7200); // Habilitar caché con un TTL de 2 horas (7200 segundos)
lilTag.init();

Configuración completa

Cada etiqueta en la configuración puede contener los siguientes campos:

  • id: Identificador único de la etiqueta.
  • trigger: Evento que inicializará la etiqueta. Los eventos disponibles son:
    • pageLoad: Inicialización al cargar la página.
    • domReady: Inicialización cuando el DOM esté listo.
    • timeDelay: Inicialización con un retraso en segundos.
    • elementVisible: Inicialización cuando un elemento sea visible en la página.
    • customEvent: Inicialización con un evento personalizado.
  • content: Componente HTML que se insertará en la página.
  • location: Posición en la que se insertará la etiqueta:
    • head: En el head.
    • bodyTop: En la parte superior del body.
    • bodyBottom: En la parte inferior del body.
  • delay (opcional): Retraso de la inicialización en segundos. Solo se usa si el trigger es timeDelay.
  • selector (opcional): Selector del elemento que activará la inicialización. Solo se usa si el trigger es elementVisible.
  • eventName (opcional): Nombre del evento que activará la inicialización. Solo se usa si el trigger es customEvent.

Conclusión

En el último año, ChatGPT (y otras redes neuronales) se han vuelto significativamente mejores para mantener el contexto y comprender lo que se les pide. Poco a poco, veo cómo mi proceso de desarrollo comienza a transformarse, adaptando diferentes herramientas. Actualmente, se siente como trabajar con un junior, que puede buscar y sugerir rápidamente diferentes soluciones, pero que aún no puede concebir e implementar algo nuevo por su cuenta.

open-sourcetools