Crear un contador de visitas para tu Web / Blog Blogger (con JS + HTML)

¿Quieres mostrar cuántas visitas tiene cada entrada o publicación de tu blog Blogger sin usar servicios externos ni widgets lentos? En este tutorial te enseñaremos paso a paso cómo crear tu propio contador de visitas para Blogger usando Google Sheets y Google Apps Script. Todo quedará guardado automáticamente en tu hoja de cálculo de Google Drive.

---

1️⃣ Crea una hoja de cálculo en Google Sheets

1. Abre Google Sheets.
2. Crea una nueva hoja y nómbrala Contador Blogger.
3. En la primera fila escribe:
   • A1: PostId
   • B1: Views
4. Cambia el nombre de la hoja: "Hoja 1" por "Contador".
5. Guarda los cambios.

📘 Esta hoja será donde se registrarán las visitas de cada entrada de tu blog.

2️⃣ Abre Google Apps Script

1. Desde tu hoja, ve a Extensiones → Apps Script.
2. Se abrirá una nueva pestaña con el editor de código de Google Apps Script.

3️⃣ Pega el siguiente código

Copia el siguiente script dentro del editor, reemplazando cualquier otro contenido:

JavaScript

function doGet(e) {
  const callback = e.parameter.callback || "callback";
  const postId = e.parameter.postId;
  let views = 1;

  if (!postId) {
    return ContentService
      .createTextOutput(`${callback}(${JSON.stringify({ error: "Missing postId" })})`)
      .setMimeType(ContentService.MimeType.JAVASCRIPT);
  }

  const ss = SpreadsheetApp.openById("TU_ID_DE_HOJA_AQUI");
  const sheet = ss.getSheetByName("Contador");
  const data = sheet.getRange(1, 1, sheet.getLastRow(), 2).getValues();

  // Usa un diccionario para búsqueda rápida
  const map = {};
  for (let i = 1; i < data.length; i++) {
    map[data[i][0]] = i + 1; // Guarda la fila
  }

  if (map[postId]) {
    const row = map[postId];
    views = sheet.getRange(row, 2).getValue() + 1;
    sheet.getRange(row, 2).setValue(views);
  } else {
    sheet.appendRow([postId, views]);
  }

  const output = `${callback}(${JSON.stringify({ postId, views })})`;
  return ContentService.createTextOutput(output).setMimeType(ContentService.MimeType.JAVASCRIPT);
}

🔹 Reemplaza "TU_ID_DE_HOJA_AQUI" con el ID de tu hoja de cálculo, que se encuentra en la URL. Ejemplo: https://docs.google.com/spreadsheets/d/1ABC123XYZ456/edit 👉 El ID sería: 1ABC123XYZ456.

Debe verse algo así:

4️⃣ Guarda y publica el script

1. Haz clic en Guardar 💾.
2. Ve a Implementar → Nueva Implementación → Implementar como aplicación web (App Web).
3. Completa los campos:
   • Descripción: Contador Blogger
   • Ejecutar como: Tu cuenta
   • Acceso: Cualquiera (incluso anónimo)
4. Presiona Implementar y autoriza el acceso (solo la primera vez).
5. Puede salirte un mensaje que "Google no ha verificado la app" - Click en Avanzado - Ir al Proyecto ... (unsafe) - Continuar
6. Copia la URL del script web que aparece.

📎 Ejemplo de URL a copiar:
https://script.google.com/macros/s/AKfycbwXXXXXXX/exec

5️⃣ Agrega el contador a tu Web / BlogBlogger

Abre tu entrada HTML, tu plantilla Blogger o cualquiero otro espacio HTML y pega el siguiente código donde quieras mostrar las visitas:

HTML

<div id="visit-count" style="font-weight:bold;">Cargando visitas...</div>
<script>
(function() {
  const el = document.getElementById('visit-count');
  const postId = encodeURIComponent(location.pathname);
  const cb = 'cb_' + Math.random().toString(36).substr(2);

  window[cb] = function(data) {
    el.textContent = `👁 ${data.views} visitas`;
    delete window[cb];
    script.remove();
  };

  const script = document.createElement('script');
  script.src = `TU_URL_DEL_SCRIPT_WEB_AQUI?postId=${postId}&callback=${cb}`;
  document.head.appendChild(script);
})();
</script>

⚙️ Reemplaza TU_URL_DEL_SCRIPT_WEB_AQUI por la URL que copiaste en el paso anterior.

6️⃣ Prueba el contador

Guarda tu entrada en Blogger, abre tu articulo, web en el navegador y prueba la cantidad de visitas, actualiza la pagina y verifica que el contador aumente. Asimismo puedes ir a tu hoja de cálculo de Google Drive y verifica que e muestre en PostID (las url de tu web) y en Views: La cantidad de visitas. Ahora puedes colocar el código anterior en cada parte de tu Web / Blog y podrás ver como se crea un historial automático de vistas de tus páginas.

Aquí está un ejemplo del contador, tu puedes personalizarlo agregando estilo CSS a su id #visit-count para darle una mejor apariencia.

Cargando visitas...

💬 Conclusión

Ahora tienes un contador de visitas 100% funcional y gratuito para tu blog en Blog / Web. Todo se almacena en tu archivo excel de tu cuenta de Google, sin depender de servicios externos ni de scripts inseguros. Puedes personalizarlo fácilmente y adaptarlo al diseño de tu sitio.

💡 Consejo: Puedes combinar este contador con animaciones o íconos (👁) para darle un toque más visual en tu web.

Si tienes alguna consulta, no dudes en comentar en el blog o contactarnos por nuestras redes sociales.