Crear una sección de posts populares sin código en una lista de colección de Webflow

Actualización, octubre de 2026: Esto es un apaño de 2021, y dos de sus piezas ya no existen. Universal Analytics dejó de procesar datos el 1 de julio de 2023, lo que rompió el complemento de Google Analytics para Google Sheets que usamos más abajo, y Webflow dejó obsoleta el 31 de marzo de 2025 la API v1 a la que llamamos desde Google Sheets. El enfoque sigue valiendo como registro de cómo lo hicimos en su momento. Para montarlo hoy necesitas GA4 (el complemento API Connector que usamos en el paso 3 incluye un conector integrado de Google Analytics (GA4); consulta sus precios actuales, porque sus conectores OAuth han requerido un plan de pago tras la prueba gratuita) y la API v2 de Webflow.

No vamos a mentir: esto no fue fácil. Requirió mucho ensayo y error, pero al final lo conseguimos. Probablemente hay formas mucho más sencillas de hacerlo consultando directamente la API de Webflow y la API de Google Analytics, y luego usando la API de Webflow para devolver las visitas a Webflow, pero elegimos Webflow como plataforma porque no somos programadores, somos un estudio de Webflow y, bueno, queríamos no-code. Te lo prometemos, esta es una solución sin código: solo copiar y pegar y algo de manejo de hojas de cálculo. Llevábamos tiempo dándole vueltas a cómo hacerlo y tuvimos media solución durante unos meses, pero la dejamos (escribimos sobre ello en el foro de Webflow en su momento, pero ese hilo ya no está disponible). En fin, hoy estábamos esperando los comentarios de un cliente en Figma y decidimos hacerlo funcionar, y, cosa rara, esta vez lo conseguimos. Solo lleva funcionando unas horas, pero añadimos una nueva entrada al blog, la publicamos, entramos a verla, y un rato después Zapier actualizó también en Webflow las visitas de la nueva entrada. Así que vamos allá.

Empecemos por el principio. Damos por hecho que no has marcado ningún campo de tu CMS como obligatorio, porque eso significa que tienes que rellenarlo al actualizar un elemento publicado mediante Zapier, y con esa suposición todo es más sencillo. (Si tienes campos obligatorios, tendrás que rellenarlos en Zapier con los datos de la hoja de exportación de entradas de Webflow que crearemos más adelante.)

Nuestra idea inicial era esta: si conseguíamos sacar las visitas de nuestras entradas de Google Analytics a una hoja de cálculo de Google, podríamos actualizar la lista de colección con un campo de visitas en Webflow y luego simplemente ordenar la lista de colección por ese campo. Resultó ser más complicado, y queremos empezar diciendo que si tienes una solución mejor, o puedes facilitar aunque sea uno de los pasos de abajo, por favor comenta y cuéntanoslo. Preguntamos a varios expertos de Webflow y hasta ahora no ha habido una forma fácil. Queremos que sea lo más simple posible, y es fácil de implementar, pero no súper simple por ahora, así que como diseñadores de Webflow, de momento estamos fallando en eso.

En fin, como decíamos, nuestra suposición era errónea. No bastaba con las visitas; para actualizar una entrada mediante Zapier necesitábamos tres cosas:

• La entrada (ID del elemento de la lista de colección)
• El nombre de la entrada (nombre del elemento de la lista de colección)
• Las visitas de la entrada correspondiente desde Google Analytics

Por desgracia, no hay una forma fácil de sacar el nombre y el ID de Webflow con Zapier ni con casi nada más sin usar la API, y no queríamos saber nada de eso, así que ideamos una solución que hiciera todooooo esto en una hoja de cálculo de Google y luego usara Zapier para enviar las visitas a Webflow.

Empecemos enumerando lo que vas a necesitar y por qué:

• Google Analytics: lo necesitas para medir tus visitas, y tienes que usar Google Universal Analytics y no GA4, porque el complemento de Google Analytics para Google Sheets usa UA y no GA4 (en 2021, al menos; consulta la nota de actualización al principio). Para ayuda con la configuración de Google Analytics en Webflow, sigue esta entrada sobre cómo instalar Google Tag Manager y luego esta entrada sobre cómo añadir Google Analytics con Tag Manager.
• Una hoja de cálculo de Google para hacer todo esto. Es gratis, solo tienes que registrarte. Tu hoja incluirá una importación programada desde Google Analytics, una importación programada de la lista de colección de tu blog desde Webflow y algunas hojas extra para hacer cálculos y limpieza. Probablemente podrías hacerlo con mucho menos esfuerzo del que nos costó a nosotros, pero nuestras habilidades con las hojas de cálculo también son pésimas, así que si puedes simplificar algo, dínoslo en los comentarios.
• El complemento de Google Analytics para Google Sheets (ya no está disponible, consulta la nota de actualización). Lo instalamos desde el Workspace Marketplace. Te permite importar a Google Sheets las visitas más recientes de tus entradas del blog desde Google Analytics y programar la importación a diario o cada hora.
• El complemento Mixed Analytics API Connector para Google Sheets. Consíguelo aquí. Te permite importar las entradas de tu blog en el CMS de Webflow directamente a Google Sheets sin código, dándote el ID de la lista de colección de cada elemento y el nombre del elemento que necesitarás al actualizar los elementos publicados mediante Zapier. Nosotros pagamos, así que no tuvimos límites en cuánto ni con qué frecuencia podíamos usar la herramienta.
• Zapier para detectar nuevas visitas en la hoja y actualizar al instante el campo de visitas en la lista de colección de tu blog en Webflow en cuanto se importen nuevas visitas desde GA. Ya tenemos una cuenta de pago porque lo usamos para muchas otras cosas, pero probablemente te baste con una cuenta gratuita.
• Antes compartíamos aquí nuestra hoja de Google para que pudieras seguir el proceso, pero ya no está disponible, así que las fórmulas de abajo son la referencia. (No juzgues nuestras visitas, a nadie le interesan mucho nuestras entradas sobre Webflow Analytics y similares.)

Paso 1: configura Google Analytics si aún no lo has hecho

Puedes seguir estas dos entradas para hacerlo con Google Tag Manager y luego añadir Google Analytics. Es el camino que elegiríamos siempre, y las escribimos específicamente para Webflow, pero si no te sientes cómodo con eso, simplemente crea una cuenta de Google Analytics Universal Analytics (GA3) y añade el código UA a los ajustes de tu proyecto de Webflow. Si aún no lo has configurado, espera un día a que lleguen datos; de lo contrario no sabrás qué estás haciendo, porque todas tus métricas estarán vacías. (Hoy eso significa GA4; nuestra entrada sobre cómo añadir Google Analytics 4 a Webflow con Cloudflare Zaraz muestra una forma de hacerlo.)

Paso 2: importa tus visitas de Google Analytics a Google Sheets

Crea una hoja de cálculo de Google. Será la hoja en la que hagamos todo, así que archívala bien y no la pierdas.

Una vez hecho, añade el complemento de Google Analytics.

• Ve a Complementos, luego Obtener complementos, y busca Google Analytics.
• Crea un informe nuevo (Complementos -> Google Analytics -> Crear informe nuevo).

Vas a necesitar lo siguiente:

• El ID de vista de Google Analytics. El complemento te ayuda a encontrarlo durante la configuración.
• Una fecha de inicio y una de fin, es decir, desde cuándo hasta cuándo quieres el informe. Nosotros elegimos desde el principio del año hasta hoy (pon ayer en el campo de fecha de fin si vas a programarlo a diario, u hoy si es cada hora).
• Qué métricas quieres ver. Nosotros elegimos usuarios y visitas, pero solo necesitas las visitas.
• Qué dimensiones necesitas extraer. Nosotros elegimos el título de la página y la ruta de la página, pero solo necesitas la ruta.
• Y añadimos un filtro para obtener solo las visitas de las entradas del blog. Nuestra lista de colección se llama simplemente posts, lo que significa que la ruta de todas nuestras entradas empieza por /post/, así que nuestro filtro está configurado para contener /post/.

Eso es todo. En la hoja debería verse más o menos así cuando termines:

Ahora prueba ejecutando el informe: Complementos -> Google Analytics -> Ejecutar informes.

Acabarás con una hoja nueva que contiene el informe y que se ve más o menos así:

Si todo ha funcionado, ya puedes programarlo. El nuestro se ejecuta cada hora porque la fecha de fin está fijada en hoy, pero puedes hacerlo una vez al día si te basta con eso.

Paso 3: importa tus entradas desde Webflow

(Aviso de 2026: las solicitudes de abajo usan la API v1 de Webflow, que quedó obsoleta el 31 de marzo de 2025 y ya no recibe soporte. Webflow ha dejado de crear tokens de sitio v1, así que hoy usarías un token de sitio v2 y los endpoints v2 bajo https://api.webflow.com/v2/, como en la guía de migración de Webflow. Los pasos con la hoja de cálculo no cambian.)

Necesitas hacer esto para obtener el ID y el título de la entrada que necesitarás al enviar las visitas a Webflow mediante Zapier. Adelante, instala API Connector para Google Sheets. Hazlo desde Complementos como antes o consíguelo aquí.

Ahora sigue estos pasos para importar tus entradas:

• Consigue tu clave de API de Webflow y guárdala en algún sitio. Ve al panel de tu sitio, abre Settings y ve a la sección Integrations, seguida de API Access.

• Consigue el ID de tu sitio. Ve a Complementos en Google Sheets, luego API Connector, luego Abrir, y después Crear o Añadir nuevo.
• Para este paso, la ruta de la URL de la API es: https://api.webflow.com/sites
• Los pares de valores son Authorization: Bearer {API_TOKEN_HERE} y Accept-Version: 1.0.0

Debería verse así:

Ponle nombre al campo de la hoja de destino, luego pon nombre a la solicitud, guárdala y ejecútala. Acabarás con una hoja nueva que contendrá el ID del sitio. Debería verse así:

A continuación, importa todas tus colecciones para obtener el ID de la lista de colección de las entradas de tu blog.

• Mismo proceso que antes, solo cambia la URL de la solicitud: https://api.webflow.com/sites/:site\\_id/collections
• Copia la URL de la API de arriba en la barra lateral de API Connector, asegurándote de sustituir :site\_id por el site\_id correspondiente del paso anterior (en la hoja nueva se llama \_id, en la primera columna), junto con los pares clave: valor como cabeceras, igual que en el paso anterior.

La hoja recién generada se verá así:

Ahora queremos traer el esquema de la lista de colección.

• Mismo proceso, solo cambia la URL, y vas a usar el ID de la nueva lista de colección del blog. La URL de tu nueva solicitud a la API es: https://api.webflow.com/collections/:collection\\_id

La configuración debería verse así:

Y este es el esquema de nuestras entradas del blog:

Último paso: traer las entradas del blog y listo. Igual que antes, esta es tu nueva URL:

https://api.webflow.com/collections/:collection\\_id/items

Y la captura de la configuración:

Y el resultado:

Ya tienes todo el contenido de tu blog en la hoja de cálculo de Google y las dos columnas que necesitarás para Zapier, items.name e item.id. Esa es la parte difícil. Ahora solo queda limpiar, dar formato y enviar las visitas a Webflow mediante Zapier. Si todo esto funcionó, programa esa última importación de las entradas del blog en el complemento de la API para que se actualice cuando crees entradas nuevas.

A partir de aquí no voy a entrar en demasiado detalle porque, siendo sinceros, somos malísimos con las hojas de cálculo y no es la mejor implementación. Si necesitas los detalles, las fórmulas de abajo son todo lo que hace falta. Si supiera algo de regex esto habría sido mucho más simple, pero tuve que hacerlo por el camino largo. Te daré las líneas generales y seguro que lo haces mejor que yo.

Para trabajar hacia atrás, quieres acabar con una hoja que contenga tres columnas: el nombre de la entrada, el ID de la entrada y las visitas de la entrada. Yo usé una tabla dinámica para esto, pero antes tuve que limpiarlo todo y hacer coincidir las visitas de Google Analytics con el ID y el nombre de la exportación de entradas de la API.

Creé una hoja llamada Blog Views y emparejé los dos conjuntos de datos usando el slug de la URL de la exportación de páginas de Webflow con un slug limpio de la ruta de página de la exportación de Google Analytics.

En la hoja Blog Views consulté la hoja que contenía las estadísticas de Google Analytics: =QUERY('Milk Moon Studio GA Blog Posts'!A15:D)

Obtuve los slugs de las estadísticas de Google Analytics con una matriz y el poquito de regex que sé para quitar /post/: =ArrayFormula(REGEXREPLACE(B2:B,"/post/",""))

Había todo tipo de basura de unos anuncios que publicamos en su día en Facebook, pero como no soy bueno con el regex usé SPLIT para quitar la cadena ?fbclid de Facebook: =ArrayFormula(SPLIT(E2:E, "?"))

Luego usé un VLOOKUP matricial para emparejar los ID de Webflow con las estadísticas de Google: =(arrayformula(IFERROR(vlookup(F2:F,Webflow\\_blog\\_post\\_export!G2:Z,16,FALSE))))

Luego otro para obtener los títulos: =(arrayformula(IFERROR(vlookup(H2:H,J2:K,2,FALSE))))

Luego otro para los elementos y nombres en esa hoja: =QUERY(Webflow\\_blog\\_post\\_export!V1:V) y =QUERY(Webflow\\_blog\\_post\\_export!F1:F)

Después la tabla dinámica para sumar las visitas de todos los slugs limpios y reunir las visitas, el nombre y el ID en una única hoja de tabla dinámica.

A partir de ahí es fácil.

Ve a Zapier y configura un Zap que use los cambios en la columna de visitas de la hoja de la tabla dinámica como disparador. Luego añade Webflow, selecciona la acción Update Live Item y usa las columnas de visitas, ID y nombre para actualizar Webflow.

Ahora solo tienes que esperar a que los datos lleguen a Webflow y ordenar la lista de colección por visitas. (Es la misma ordenación de listas de colección que usarías en nuestro truco del resumen de entradas, y puedes combinarla con nuestro truco de paginación fluida si la lista se hace larga.)

Como decíamos antes, si tienes algún consejo para simplificar esto, por favor escríbelo en los comentarios. Esperamos de verdad que te funcione.

Actualización

Lleva funcionando unas 12 horas y todo parece actualizarse y funcionar. Una cosa que sí surgió fue que, mientras se escribía esta entrada, guardarla como borrador rompió una de las fórmulas matriciales hasta que se publicó, porque cambió el número de columnas de la hoja. Así que algo que debes tener en cuenta, si al principio no tienes ningún borrador, es que se añadirá una columna nueva, y tus fórmulas se desplazarán hacia la derecha.

Para más tutoriales, echa un vistazo a la sección de tutoriales del blog, o a nuestra entrada sobre cómo crear spans de texto en elementos de texto CMS dinámicos en Webflow.