Criar páginas dinâmicas com o HubDB

Last updated:

As páginas dinâmicas são páginas do CMS que obtêm seu conteúdo a partir de uma fonte de dados estruturada. Com base em como você configura sua página dinâmica, o HubSpot extrai os dados da fonte selecionada e cria automaticamente um conjunto de páginas. Isso inclui uma página de listagem que exibe resumos dos dados e páginas individuais para cada entrada da fonte de dados.

Com uma tabela HubDB como fonte de dados, você pode criar uma página dinâmica que gera uma página para cada linha da tabela. Cada página dinâmica inclui seu próprio URL preparado para SEO exclusivo e oferece análises para as páginas específicas.

Este tutorial explica como criar um conjunto de páginas dinâmicas usando o HubDB como fonte de dados. Para seguir esse tutorial, será necessário:

  • CMS Hub Professional ou Enterprise
  • Algum conhecimento prévio de HTML e CSS.
Saiba mais sobre como criar páginas do CMS baseadas em dados no curso de Conteúdo baseado em dados do CMS no HubSpot Academy.

1. Criar uma tabela HubDB

Para criar uma nova tabela HubDB:

  • Na sua conta da HubSpot, vá em Marketing > Arquivos e Modelos > HubDB.
  • No canto superior direito, clique em Criar tabela.
  • Na caixa de diálogo, insira um nome e rótulo para a tabela e clique em Criar.

Com a tabela criada, você pode defini-la para ser usada para o conteúdo dinâmico da página:

  • No canto superior direito, clique em Ações e selecione Gerenciar configurações.
  • No painel direito, clique para ativar a opção Ativar criação de páginas dinâmicas usando dados de linha.
  • Se quiser você pode selecionar a metadescrição, a imagem em destaque e a URL canônica das páginas dinâmicas individuais. Se você deixar esses valores vazios, cada página herdará os respectivos valores de sua página principal.

Observação: para uma página usar os valores das colunas de metadescrição, imagem em destaque e URL canônica, ela deve incluir as seguintes variáveis page_meta do HubL em vez de variáveis content:

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

Por exemplo, os modelos do HubSpot obtêm a metadescrição a partir da tag {{content.meta_description}} por padrão. Em vez disso, você precisará de usar {{page_meta.meta_description}}.

  • Clique em Salvar para salvar as alterações.
hubdb-table-settings-sidebar-save

Depois de atualizar as configurações da tabela, as colunas Título da página Caminho da página serão adicionadas à tabela.

  • Título da página: o nome desta página como visto na tag de título HTML.
  • Caminho da página: o último segmento da URL da página dinâmica criada por cada linha na tabela. 

A tabela a seguir é um exemplo modelado após uma página "Sobre nós" para membros de uma equipe executiva da empresa. Esta tabela será usada para criar páginas dinâmicas com caminhos que terminam em cfo-harlow, ceo-jeff, cto-bristow e pd-hugo.

 

Título da página: Caminho da página Função Nome Biografia
CFO Harlow cfo-harlow CFO Carlow Este é Harlow, que geralmente é cauteloso com os gastos.
CEO Jeff ceo-jeff CEO Jeff Jeff é o Diretor Executivo (CEO), o que significa que ele geralmente comanda as coisas por aqui.
CTO Bristow cto-bristow CTO Bristow Este é o nosso Diretor de Tecnologia (CTO), Bristow, que gosta de experimentar.
Diretor de PD pd-hugo CPD Hugo Hugo, nosso Diretor de Designer de Produtos (CPD), gosta de projetar produtos.
example-hubdb-table

Observação: embora você precise inserir caminhos de página em minúsculas, as URLs resultantes não diferenciam maiúsculas de minúsculas. No exemplo acima, quando alguém vai em /CEO-Jeff, verá a mesma página como em /ceo-jeff em vez de um erro 404.

Quando estiver pronto para usar os dados da tabela para criar suas páginas, clique em Publicar no canto superior direito.

2. Crie um modelo

Em seguida, você criará um modelo para a página de listagem e para as páginas de detalhes individuais para cada linha, seguindo uma abordagem semelhante à utilização de modelos de blog para páginas de listagem e de detalhes de posts. Para criar o modelo de página:

  • Na sua conta da HubSpot, vá em Marketing > Arquivos e Modelos > Ferramentas de design.
  • No menu da barra lateral esquerda, vá para a pasta na qual deseja criar o modelo. Para criar uma nova pasta, no canto superior esquerdo, clique em Arquivo e selecione Nova pasta. Em seguida, clique em Arquivo e selecione Novo arquivo.
  • Na caixa de diálogo, use o menu suspenso para selecionar HTML + HubL como o tipo de arquivo.
  • Clique em Próximo.
Criando um novo modelo HTML + HubL
  • No campo Nome do arquivo, insira o nome do modelo.
  • Em Localização do arquivo, você pode alterar onde o modelo está localizado em seu gerenciador de design clicando em Alterar.
  • Clique em Criar para criar o modelo.

Com o modelo criado, você pode 

Quando uma página dinâmica é definida para usar este modelo e o final do URL da página corresponde à coluna de caminho, você pode acessar as variáveis dynamic_page_hubdb_row e dynamic_page_hubdb_table_id no modelo. Por exemplo, para construir uma página de perfil executivo, o código abaixo demonstra como você pode usar os campos de dynamic_page_hubdb_row para exibir as informações de um executivo:

  • hs_name: o título da página associada para a linha HubDB.
  • name: o nome do executivo.
  • role: a função do executivo.
{% 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 %}

Em seguida, você pode adicionar tratamento para o caso em que alguém carrega sua página dinâmica, sem caminhos adicionais de sua tabela. Normalmente, isso é usado como uma página de listagem, para listar links para as páginas das linhas na tabela do HubDB. Substitua seu código por:

{% 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 %}

O código dentro do bloco elief itera todas as linhas na tabela do executivo e exibe cada entrada em uma lista, com um link para seu caminho exclusivo.

  • No gerenciador de design, clique em Visualizar para visualizar o modelo. A visualização estará em branco, pois depende do contexto da página para definir as variáveis dynamic_page_hubdb_row ou dynamic_page_hubdb_table_id. 
  • Para testar seu código no nível do modelo, adicione o seguinte código temporário à parte superior do modelo, certificando-se de removê-lo antes de publicar:
{% set dynamic_page_hubdb_table_id = %}
  • Depois de adicionar o código acima, o modelo deverá renderizar uma lista de hiperlinks, extraindo dados da tabela HubDB que você criou.
hubdb-template-preview
  • Depois de visualizar o modelo, remova o código temporário acima. Em seguida, clique em Publicar, no canto superior direito, para disponibilizá-lo para a criação de páginas.

3. Criar a página dinâmica

Para criar uma página dinâmica a partir de seu modelo:

  • Com seu novo modelo aberto no gerenciador de design, clique no menu suspenso Ações, no canto superior do localizador, e selecione Criar página.
    create-page-from-design-manager
  • Na caixa de diálogo, selecione Página do site e insira o nome da página.
  • Clique em Criar página.
  • Clique na guia Configurações, na parte superior do editor de páginas.
  • No campo Título da página, insira um nome de página, que poderá ser usado posteriormente para pesquisar análises de tráfego.
  • No campo URL, insira um URL de /executives. O URL será o URL base para a sua página dinâmica.
  • Clique em Opções avançadas para expandir as configurações adicionais.
  • Role a tela para baixo até a seção Páginas dinâmicas e clique no menu suspenso Fontes de dados. Selecione a tabela do HubDB que você criou.
Opções avançadas nas configurações de página para vincular à tabela HubDB
  • Quando terminar, clique em Publicar no canto superior direito. As páginas já estão prontas para serem exibidas.

4. Exibir página ativas

Agora você pode visitar a nova página dinâmica e todos os seus caminhos, conforme definido pela tabela HubDB.

  • Acesse à página de listagem dinâmica no URL que definiu no editor de página. Este tutorial usa /executives para o seu URL de página dinâmica, portanto, neste caso, o acesso seria: https://www.yourdomain.com/executives.
  • Na página de listagem, clique nos nomes na lista de itens para exibir a página de detalhes desse executivo.
2022-11-28_15-55-47 (1)

5. Adicionar uma nova linha de tabela

Com sua página dinâmica carregando dados do HubDB, volte para a tabela e adicione uma nova linha. Depois de publicar a tabela, você verá sua página ativa ser atualizada dinamicamente com os novos dados do HubDB.

  • Na sua conta da HubSpot, vá em Marketing > Arquivos e Modelos > HubDB.
  • Clique no nome da tabela que você criar.
  • Clique em Adicionar linha e preencha cada coluna. Veja abaixo um exemplo de conjunto de dados.
Título da página: Caminho da página Função Nome Biografia
CMO Hobbes cmo-hobbes CMO Hobbes Hobbes é o nosso amante de gatos.
  • No canto superior direito, clique em Publicar.
  • Em outra guia, volte para a página de listagem (neste exemplo, /executives. Agora, o novo executivo deve ser exibido na página de listagem e clicar no nome dele revelará a página de detalhes.

6. Exibir dados da página dinâmica

Quando houver visitas à sua página dinâmica, você poderá medir o desempenho individual da página ou visualizar todos os dados da página na ferramenta de análise de tráfego. Mesmo que as páginas de executivos individuais sejam criadas da mesma página dinâmica, os dados de tráfego, como visualizações de página, serão atribuídos a cada página. 

Para exibir seus dados de visita de página no HubSpot:

  • Na sua conta da HubSpot, acesse Relatórios > Ferramentas de análise.
  • Clique em Análises de tráfego.
  • No relatório de análise de tráfego, clique na guia Páginas.
  • Exiba a tabela para ver os dados de tráfego para as páginas principal e secundária individuais. As páginas secundárias serão indicadas com > ícones de seta para mostrar sua relação com as páginas principais. 
    example-traffic-data-2

Lembre-se do seguinte caso não veja os dados de tráfego esperados:

Mais tutoriais focados no HubDB

Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..