JS Critical Manager

JS Critical protege tu plantilla Blogger de errores críticos

En este tutorial vamos a conocer a fondo el JS Critical Manager, una función exclusiva de la plantilla NichoClean v2.0 diseñada para mantener el blog seguro y funcional. Si alguna vez has editado tu plantilla y notaste que el blog dejó de cargar correctamente, este artículo es para ti.

¿Qué es JS Critical Manager?

El JS Critical Manager es un script integrado que supervisa la presencia de los gadgets críticos en tu plantilla. Estos gadgets son módulos esenciales como el buscador, los shortcodes de AdSense, la tabla de contenido o el sistema de comentarios. Si alguno se elimina, queda vacío o no se carga, el administrador muestra una alerta de error crítico para que sepas exactamente qué corregir.

Beneficios principales

  • Prevención de fallos: evita que el blog quede inservible por falta de un gadget esencial.
  • Guía visual clara: muestra un mensaje explicando qué gadget falta y dónde restaurarlo.
  • Mayor control: sabes en todo momento si tu plantilla está completa y funcionando.
  • Soporte SEO: al mantener la estructura intacta, tu blog no pierde indexación ni compatibilidad con AdSense.

¿Qué gadgets supervisa?

El administrador revisa automáticamente una lista de gadgets críticos como:

  • Administrador de Cache (config-cache)
  • AdSense Shortcodes (config-adsense-shortcodes)
  • AdSense en Párrafo (config-adsense-parrafo)
  • Buscador Ajax (config-search)
  • Tabla de Contenido (config-toc)
  • Autores (config-autores)
  • Sistema de Comentarios (comentarios-config)
  • Últimos Comentarios (config-recent-comments)
  • Tienda / Carrito (config-store)
  • Contador Carrito Flotante (cart-count)

Si alguno falta o está vacío, el blog mostrará un aviso a pantalla completa con la lista de gadgets que debes restaurar.

Instalación y configuración

En NichoClean v2.0 este script ya viene integrado. Sin embargo, si quieres personalizarlo o volver a insertarlo en caso de eliminarlo por error, sigue estos pasos:

1. Copiar el código

Inserta el siguiente código en tu plantilla, justo antes de la etiqueta </body>. Recuerda pegarlo en modo HTML y con etiquetas parseadas para Blogger.

<!-- 1. JS Critical Manager (config-plugins)  -->
<script>
//<![CDATA[
(function () {
  const NichoCleanError = {
    criticalGadgets: [
      { id: "config-cache", nombre: "Administrador de Cache" },
      { id: "config-adsense-shortcodes", nombre: "AdSense Shortcodes" },
      { id: "config-adsense-parrafo", nombre: "AdSense Párrafo" },
      { id: "config-search", nombre: "Buscador Ajax" },
      { id: "config-toc", nombre: "Tabla de Contenido (TOC)" },
      { id: "config-autores", nombre: "Autores" },
      { id: "comentarios-config", nombre: "Sistema de Comentarios" },
      { id: "config-recent-comments", nombre: "Últimos Comentarios" },
      { id: "config-store", nombre: "Tienda / Carrito" },
      { id: "cart-count", nombre: "Contador Carrito Flotante" }
    ],

    checkAllCriticalGadgets: function () {
      // Array para almacenar todos los gadgets con problemas
      const missingGadgets = [];

      for (const { id, nombre } of this.criticalGadgets) {
        const gadget = document.getElementById(id);

        if (!gadget || (gadget.children.length === 0 && !gadget.hasAttributes() && !gadget.textContent.trim())) {
          missingGadgets.push({ id, nombre });
        }
      }

      if (missingGadgets.length > 0) {
        this.showCriticalError(missingGadgets);
        return false;
      }

      return true;
    },

    showCriticalError: function (missingGadgets) {
      const listItems = missingGadgets
        .map(g => `<li><code>${g.nombre}</code> (id="${g.id}")</li>`)
        .join("");

      document.body.innerHTML = `
        <div style="
          font-family: system-ui, sans-serif;
          background: #fee2e2;
          color: #991b1b;
          padding: 2rem;
          text-align: center;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        ">
          <h1>⚠️ Error crítico</h1>
          <p>Los siguientes gadgets faltan o están vacíos:</p>
          <ul style="list-style: disc; margin: 1rem 0 1rem 2rem; text-align: left;">
            ${listItems}
          </ul>
          <p>Restaura estos gadgets en la plantilla para que el blog funcione.</p>
          <button onclick="location.reload()" style="
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            font-size: 1rem;
            cursor: pointer;
            border: none;
            background: #991b1b;
            color: #fff;
            border-radius: 0.25rem;
          ">Recargar</button>
        </div>
      `;
      throw new Error(`NichoClean: falla crítica en ${missingGadgets.length} gadgets.`);
    }
  };

  window.NichoCleanError = NichoCleanError;

  document.addEventListener("DOMContentLoaded", () => {
    NichoCleanError.checkAllCriticalGadgets();
  });
})();
//]]>
</script>

2. Guardar cambios

Haz clic en Guardar plantilla y actualiza tu blog. Si todo está bien, el blog cargará con normalidad. Si falta algún gadget, verás el mensaje de error crítico con la lista de elementos a restaurar.

Recomendaciones prácticas

  • No elimines gadgets con ID config-... a menos que sepas exactamente lo que haces.
  • Si personalizas la plantilla, respeta la lista de gadgets críticos para no romper el diseño.
  • En caso de error, restaura la plantilla base de NichoClean v2.0 y vuelve a cargar el JS Critical Manager.

Conclusión

El JS Critical Manager es una de esas funciones invisibles pero vitales en NichoClean v2.0. Su trabajo es garantizar que el blog siempre esté completo y funcional, incluso si por accidente eliminas un gadget importante. Así, tu sitio mantiene un diseño profesional, rendimiento óptimo y estabilidad, algo esencial para SEO y monetización.

Ahora que conoces cómo funciona, úsalo a tu favor y recuerda: una plantilla segura es la base de un blog exitoso. 🚀