Crear páginas dinámicas con HubDB

Last updated:

Las páginas dinámicas son páginas CMS que obtienen su contenido de una fuente de datos estructurada. Según cómo configures tu página dinámica, HubSpot extraerá datos de la fuente seleccionada y creará automáticamente un conjunto de páginas. Esto incluye una página de listado que muestra resúmenes de los datos y páginas individuales para cada entrada de fuente de datos.

Usando una tabla HubDB como fuente de datos, puedes crear una página dinámica que luego genera una página para cada fila de la tabla. Cada página dinámica incluye su propia URL optimizada para motores de búsqueda y ofrece analíticas específicas.

Este tutorial explica cómo crear un conjunto de páginas dinámicas utilizando HubDB como fuente de datos. Para seguir este tutorial, necesitarás:

  • CMS Hub Pro o Enterprise
  • Algunos conocimientos previos de HTML y CSS
Puedes obtener más información sobre la creación de páginas de CMS basadas en datos en el curso de Contenido basado en datos de CMS de HubSpot Academy.

1 1. Crear una tabla de HubDB

Para crear una nueva tabla de HubDB:

  • En tu cuenta de HubSpot, navega hasta Marketing > Archivos y plantillas > HubDB.
  • En la parte superior derecha, haz clic en Crear tabla.
  • En el cuadro de diálogo, introduce la etiqueta y el nombre de la tabla y luego haz clic en Crear.

Al crear la tabla, puedes configurarla para usarla para contenido de páginas dinámicas:

  • En la parte superior derecha, haz clic en Acciones y luego selecciona Administrar configuración.
  • En el panel derecho, haz clic para activar el interruptor Activar la creación de páginas dinámicas utilizando datos de filas..
  • Opcionalmente, puedes seleccionar la metadescripción, la imagen destacada y la URL canónica de las páginas dinámicas individuales. Si dejas estos valores vacíos, cada página heredará los valores respectivos de su página principal.

Nota: para que una página utilice los valores de las columnas de metadescripción, imagen destacada y URL canónica, la página debe incluir las siguientes variables page_meta HubL en lugar de las variables content:

  • {{page_meta.meta_description}}
  • {{page_meta.featured_image_URL}}
  • {{page_meta.canonical_url}}

Por ejemplo, las plantillas de HubSpot extraen su metadescripción de la {{content.meta_description}} etiqueta de forma predeterminada. En cambio, deberás usar {{page_meta.meta_description}}.

  • Haz clic en Guardar para guardar tus cambios.
hubdb-table-settings-sidebar-save

Después de actualizar la configuración de la tabla, se agregarán a la tabla las columnas Título de página y Ruta de página.

  • Título de página: el nombre de esta página como se ve en la etiqueta de título HTML.
  • Ruta de página: el último segmento de la URL de la página dinámica creada por cada fila de la tabla. 

La siguiente tabla es un ejemplo modelado a partir de una página «Acerca de nosotros» para los miembros de un equipo ejecutivo de una empresa. Esta tabla se utilizará para crear páginas dinámicas con rutas que terminan en cfo-harlow, ceo-jeff, cto-bristow y pd-hugo.

 

Título de la página Ruta de la página Función Nombre Biografía
CFO Harlow cfo-harlow Director de finanzas Harlow Es Harlow, que generalmente economiza en todo.
CEO Jeff ceo-jeff CEO Jeff Jeff es el CEO, lo que significa que generalmente maneja las cosas por aquí.
CTO Bristow cto-bristow Director de tecnología Bristow Este es nuestro CTO, Bristow, a quien le gusta jugar.
Chief PD pd-hugo Jefe de diseño de productos Hugo Hugo, nuestro jefe de diseño de productos, disfruta diseñando productos.
example-hubdb-table

Nota: aunque debes introducir las rutas de página en minúsculas, las URL resultantes no distinguen entre mayúsculas y minúsculas. En el ejemplo anterior, cuando alguien navega hasta /CEO-Jeff verá la misma página que /ceo-jeff, en lugar de un error 404.

Cuando estés listo para usar los datos de la tabla para comenzar a crear tus páginas, haz clic en publicar en la parte superior derecha.

2. Crear una plantilla

A continuación, crearás una plantilla tanto para la página de catálogo como para las páginas de detalles individuales de cada fila, de manera similar a cómo se pueden usar las plantillas de blog para las páginas de contenido y de detalles de publicaciones. Para crear la plantilla de página:

  • En tu cuenta de HubSpot, navega hasta Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el menú de la barra lateral izquierda, navega hasta la carpeta en la que deseas crear la plantilla. Para crear una nueva carpeta, en la parte superior izquierda haz clic en Archivo y luego selecciona Nueva carpeta. Luego, haz clic en Archivo y selecciona Nuevo archivo.
  • En el cuadro de diálogo, usa el menú desplegable para seleccionar HTML + HubL como tipo de archivo.
  • Haz clic en Siguiente.
Creación de una nueva plantilla HTML + HubL
  • En el campo Nombre de archivo, escribe el nombre de la plantilla.
  • En Ubicación del archivo, puedes cambiar la ubicación de la plantilla en el administrador de diseño haciendo clic en Cambiar.
  • Haz clic en Crear para crear la plantilla.

Cuando una página dinámica se configura para usar esta plantilla y el final de la URL coincide con la columna ruta, puedes acceder a las variables dynamic_page_hubdb_row y dynamic_page_hubdb_table_id en la plantilla. Por ejemplo, para crear una página de perfil de ejecutivo, el siguiente código muestra cómo puedes usar los campos de dynamic_page_hubdb_row para mostrar información de un ejecutivo:

  • hs_name: el Título de página asociado para la fila de HubDB.
  • nombre: el nombre del ejecutivo.
  • rol: el rol del ejecutivo.
{% if dynamic_page_hubdb_row %} <h1>{{ dynamic_page_hubdb_row.hs_name }}</h1> <h2>{{ dynamic_page_hubdb_row.name }}</h2> <h3>{{ dynamic_page_hubdb_row.role }}</h3> <p>{{dynamic_page_hubdb_row.bio}}</p> {% endif %}

A continuación, puedes agregar el manejo para el caso en el que alguien cargue tu página dinámica (sin ninguna ruta adicional de la tabla). Por lo general, esto se usa como página de contenido, para enumerar enlaces a las páginas de las filas en tu tabla de HubDB. Reemplaza tu código con:

{% if dynamic_page_hubdb_row %} <h1>{{ dynamic_page_hubdb_row.hs_name }}</h1> <h2>{{ dynamic_page_hubdb_row.name }}</h2> <h3>{{ dynamic_page_hubdb_row.role }}</h3> <p>{{dynamic_page_hubdb_row.bio}}</p> {% elif dynamic_page_hubdb_table_id %} <ul> {% for row in hubdb_table_rows(dynamic_page_hubdb_table_id) %} <li><a href="{{ request.path }}/{{ row.hs_path }}">{{ row.hs_name }}</a></li> {% endfor %} </ul> {% endif %}

El código que está dentro del bloque elief se repite sobre todas las filas en la tabla del ejecutivo y muestra cada entrada en una lista, con un enlace a su ruta única.

  • En el administrador de diseño, haz clic en Vista preliminar para obtener una vista preliminar de la plantilla. La vista preliminar de esta plantilla estará en blanco porque se basa en el contexto de la página para establecer las variables dynamic_page_hubdb_row o dynamic_page_hubdb_table_id. 
  • Para probar tu código en el nivel de plantilla, agrega el siguiente código temporal a la parte superior de la plantilla, asegurándote de eliminarlo antes de publicarlo:
{% set dynamic_page_hubdb_table_id = %}
  • Después de agregar el código anterior, tu plantilla ahora debería representar una lista de hipervínculos, extrayendo datos de la tabla HubDB que creaste.
hubdb-template-preview
  • Después de obtener una vista preliminar de la plantilla, elimina el código temporal anterior. Luego, haz clic en Publicar en la parte superior derecha para que esté disponible para crear páginas.

3. Crear la página dinámica

Para crear una página dinámica desde tu plantilla:

  • Con tu nueva plantilla abierta en el administrador de diseño, haz clic en el menú desplegable Acciones en la parte superior del buscador y luego selecciona Crear página.
    create-page-from-design-manager
  • En el cuadro de diálogo, selecciona Página web y luego escribe un nombre de página.
  • Haz clic en Crear página.
  • En la parte superior del editor de página, haz clic en la pestaña Configuración.
  • En el campo Título de la página, escribe un nombre de página, que puedes usar más tarde para buscar análisis de tráfico.
  • En el campo URL, escribe una URL de/executives. El URL será la URL base de tu página dinámica.
  • Haz clic en Opciones avanzadas para ampliar la configuración adicional.
  • Desplázate hacia abajo hasta la sección Páginas dinámicas y luego haz clic en el menú desplegable Fuentes de datos. Selecciona la tabla de HubDB que creaste.
Opciones avanzadas en la configuración de la página para enlazar con la tabla de HubDB
  • Cuando hayas terminado, haz clic en Publicar en la parte superior derecha. Tus páginas ya están listas para verlas.

4. Ver páginas en vivo

Ahora puedes visitar la nueva página dinámica y todas sus rutas, según lo definido por tu tabla de HubDB.

  • Navega a la página de listado dinámico en la URL que estableciste en el editor de página. Este tutorial utiliza/executives para su URL de página dinámica, por lo que en ese caso navegarías a: https://www.yourdomain.com/executives.
  • Desde la página de listado, haz clic en los nombres de la lista con viñetas para ver la página de detalles de ese ejecutivo.
2022-11-28_15-55-47 (1)

5. Agregar una nueva fila de tabla

Con tu página dinámica cargando datos de HubDB, navega a la tabla y agrega una nueva fila. Después de publicar la tabla, verás que tu página en vivo se actualiza dinámicamente con los nuevos datos de HubDB.

  • En tu cuenta de HubSpot, navega hasta Marketing > Archivos y plantillas > HubDB.
  • Haz clic en el nombre de la tabla que has creado.
  • Haz clic en Agregar fila y luego completa cada columna. A continuación se muestra un conjunto de datos de muestra.
Título de la página Ruta de la página Función Nombre Biografía
CMO Hobbes cmo-hobbes Director de marketing Hobbes Hobbes es nuestro entusiasta de los gatos.
  • En la parte superior derecha, haz clic en Publicar.
  • En otra pestaña, vuelve a la página de listado (/executives en este ejemplo). Ahora deberías ver al nuevo ejecutivo aparecer en la página de listado, y hacer clic en su nombre revelará su página de detalles.

6. Ver datos de página dinámica

Una vez que haya visitas a tu página dinámica, puedes medir el rendimiento de la página individual o ver todos los datos de la página en la herramienta de analíticas de tráfico. A pesar de que las páginas ejecutivas individuales se construyen a partir de la misma página dinámica, los datos de tráfico, como las vistas de página, se atribuyen a cada página. 

Para ver los datos de visita de tu página en HubSpot:

  • En tu cuenta de HubSpot, navega a Informes > Herramientas de analíticas.
  • Haz clic en Analíticas de Tráfico.
  • En el informe de analíticas de tráfico, haz clic en la pestaña Páginas.
  • Vea la tabla para ver los datos de tráfico de las páginas principales y secundarias individuales. Las páginas secundarias se indicarán con iconos de flecha > para mostrar su relación con las páginas principales. 
    example-traffic-data-2

Ten en cuenta lo siguiente si no estás viendo los datos de tráfico que esperas:

Más tutoriales enfocados en HubDB

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.