Créer des pages dynamiques avec HubDB

Last updated:

Les pages dynamiques sont des pages CMS dont le contenu provient d'une source de données structurée. En fonction de la façon dont vous configurez votre page dynamique, HubSpot extrait les données de la source sélectionnée et crée automatiquement un ensemble de pages. Cela inclut une page de listing qui affiche des résumés des données et des pages individuelles pour chaque entrée de source de données.

À l'aide d'un tableau HubDB comme source de données, vous pouvez créer une page dynamique qui génère ensuite une page pour chaque ligne du tableau. Chaque page dynamique comprend une URL unique optimisée pour le SEO ainsi que des analytics spécifiques aux pages. 

Ce tutoriel explique comment créer un ensemble de pages dynamiques en utilisant HubDB comme source de données. Pour suivre ce tutoriel, vous aurez besoin de :

  • CMS Hub Pro ou Entreprise
  • connaissances préalables concernant le HTML et les CSS.
Découvrez-en davantage sur la création de pages CMS basées sur les données dans le cours CMS Data-Driven Content de HubSpot Academy.

1. Créer un tableau HubDB

Pour créer une nouvelle table HubDB :

  • Dans votre compte HubSpot, accédez à Marketing > Fichiers et modèles > HubDB.
  • Cliquez sur Créer un tableau dans l'angle supérieur droit.
  • Dans la boîte de dialogue, saisissez le label et le nom du tableau, puis cliquez sur Créer.

Une fois le tableau créé, vous pouvez le paramétrer pour qu'il soit utilisé dans le contenu d'une page dynamique :

  • Dans l'angle supérieur droit, cliquez sur Actions, puis sélectionnez Gérer les paramètres.
  • Dans le panneau de droite, cliquez pour activer l'option Activer la création de pages dynamiques avec des données de ligne.
  • Vous pouvez éventuellement sélectionner la méta-description, l'image en vignette et l'URL canonique des pages dynamiques individuelles. Si vous laissez ces valeurs vides, chaque page héritera des valeurs respectives de sa page parent.

Remarque : Pour qu'une page utilise les valeurs des colonnes de méta-description, d'image en et d'URL canonique, la page doit inclure les variables HubL page_meta suivantes plutôt que les variables content :

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

Par exemple, les modèles HubSpot tirent leur méta-description de la balise par défaut {{content.meta_description}}. Vous devrez utiliser {{page_meta.meta_description}} à la place.

  • Cliquez sur Enregistrer pour enregistrer vos modifications.
hubdb-table-settings-sidebar-save

Après avoir mis à jour les paramètres de votre tableau, les colonnes Titre de la page et Chemin de la page seront ajoutées au tableau.

  • Titre de la page : le nom de cette page tel que vu dans la balise de titre HTML.
  • Chemin de la page : le dernier segment de l'URL de la page dynamique créée par chaque ligne du tableau.

Le tableau suivant est un exemple inspiré d'une page « À propos de nous » pour les membres d'une équipe de direction d'une entreprise. Ce tableau sera utilisé pour créer des pages dynamiques avec des chemins se terminant par cfo-harlow, ceo-jeff,cto-bristow et pd-hugo.

 

Titre de la page Chemin de page Rôle Nom Biographie
Directeur financier Harlow cfo-harlow Directeur financier Harlow Voici Harlow, qui est généralement près de ses sous.
PDG Jeff ceo-jeff Le PDG Jeff Jeff est le PDG. C'est lui qui dirige habituellement les choses ici.
Directeur technique Bristow cto-bristow Directeur technique Bristow Voici notre directeur technique, Bristow, qui aime bricoler.
Directeur de la conception produit Hugo pd-hugo Directeur de la conception produit Hugo Hugo, notre directeur de la conception produit, aime concevoir des produits.
example-hubdb-table

Remarque : Bien que vous deviez saisir des chemins de page en minuscules, les URL résultantes sont insensibles à la casse. Dans l'exemple ci-dessus, lorsque l'on navigue vers /CEO-Jeff, on voit la même page que /ceo-jeff au lieu d'une erreur 404.

Lorsque vous êtes prêt à utiliser les données de votre tableau pour commencer à créer vos pages, cliquez sur Publier dans l'angle supérieur droit.

2. Créer un modèle

Par la suite, vous créerez un modèle pour la page de listing et pour les pages de détail individuelles de chaque ligne, similaire à la façon dont les modèles d'articles peuvent servir aussi bien pour les pages de listing que pour les pages de détail des articles. Pour créer le modèle de page :

  • Dans votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans le menu latéral de gauche, accédez au dossier dans lequel vous souhaitez créer le modèle. Pour créer un nouveau dossier, dans l'angle supérieur gauche, cliquez sur Fichier, puis sélectionnez Nouveau dossier. Ensuite, cliquez sur Fichier et sélectionnez Nouveau fichier.
  • Dans la boîte de dialogue, utilisez le menu déroulant pour sélectionner HTML + HubL comme type de fichier.
  • Cliquez sur Suivant.
Créer un nouveau modèle HTML + HubL
  • Dans le champ Nom du fichier, saisissez le nom du modèle.
  • Sous Emplacement du fichier, vous pouvez modifier l'emplacement du modèle dans votre gestionnaire de conception en cliquant sur Modifier.
  • Cliquez sur Créer pour créer le modèle.

Lorsqu'une page dynamique est configurée pour utiliser ce modèle et que la fin de l'URL de la page correspond à la colonne de chemin, vous pouvez accéder aux variables dynamic_page_hubdb_row et dynamic_page_hubdb_table_id du modèle. Par exemple, pour créer une page de profil de cadre, le code ci-dessous montre comment utiliser les champs de la ligne dynamic_page_hubdb_row pour afficher les informations du cadre :

  • hs_name : le titre de la page associée pour la ligne HubDB.
  • name : le nom du cadre.
  • role : le rôle du cadre.
{% 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 %}

Ensuite, vous pouvez ajouter le traitement des cas où quelqu'un charge votre page dynamique (sans aucun chemin supplémentaire du tableau). Généralement, cela fait office de page de listing, pour répertorier les liens vers les pages des lignes de votre tableau HubDB. Remplacez votre code par :

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

Le code à l'intérieur du bloc elief itère sur toutes les lignes du tableau du cadre et affiche chaque entrée dans une liste, avec un lien vers leur chemin unique.

  • Dans le gestionnaire de conception, cliquez sur Aperçu pour prévisualiser le modèle. L'aperçu sera vide car il s'appuie sur le contexte de la page pour définir les variables dynamic_page_hubdb_row ou dynamic_page_hubdb_table_id. 
  • Pour tester votre code au niveau du modèle, ajoutez le code temporaire suivant en haut de votre modèle, en vous assurant de le supprimer avant de le publier :
{% set dynamic_page_hubdb_table_id = %}
  • Après avoir ajouté le code ci-dessus, votre modèle devrait maintenant afficher une liste d'hyperliens, en récupérant les données du tableau HubDB que vous avez créé.
hubdb-template-preview
  • Après avoir prévisualisé le modèle, supprimez le code temporaire ci-dessus. Ensuite, cliquez sur Publier dans l'angle supérieur droit pour le rendre disponible pour la création de pages.

3. Créer la page dynamique

Pour créer une page dynamique à partir de votre modèle :

  • Avec votre nouveau modèle ouvert dans le gestionnaire de conception, cliquez sur le menu déroulant Actions en haut de l'outil de recherche, puis sur Créer une page.
    create-page-from-design-manager
  • Dans la boîte de dialogue, sélectionnez Page Web, puis saisissez le nom de la page.
  • Cliquez sur Créer une page.
  • Cliquez sur l'onglet Paramètres en haut de l'éditeur.
  • Dans le champ Titre de la page, saisissez un nom de page que vous pourrez utiliser ultérieurement pour rechercher des analytics de trafic.
  • Dans le champ URL, saisissez l'URL /executives. Cette URL sera l'URL de base de votre page dynamique.
  • Cliquez sur Options avancées pour développer des paramètres supplémentaires.
  • Faites défiler la page jusqu'à la section Pages dynamiques, puis cliquez sur le menu déroulant Sources de données. Sélectionnez le tableau HubDB que vous avez créé.
Options avancées dans les paramètres de page pour lier au tableau HubDB
  • Lorsque vous avez terminé, cliquez sur Publier dans l'angle supérieur droit. Vos pages sont maintenant prêtes à être consultées.

4. Afficher les pages en ligne

Vous pouvez maintenant visiter votre nouvelle page dynamique et tous ses chemins, tels que définis par votre tableau HubDB.

  • Accédez à la page de listing dynamique à l'URL que vous avez définie dans l'éditeur de page. Ce tutoriel utilise /executives pour son URL de page dynamique. Dans ce cas, vous accéderez à : https://www.votredomaine.com/executives.
  • À partir de la page de listing, cliquez sur les noms dans la liste à puces pour afficher la page de détails pour ce cadre.
2022-11-28_15-55-47 (1)

5. Ajouter une nouvelle ligne de tableau

Maintenant que page dynamique charge les données HubDB, revenez au tableau et ajoutez une nouvelle ligne. Après avoir publié le tableau, vous verrez votre page en direct mise à jour dynamiquement avec les nouvelles données HubDB.

  • Dans votre compte HubSpot, accédez à Marketing > Fichiers et modèles > HubDB.
  • Cliquez sur le nom du tableau que vous créez.
  • Cliquez sur Ajouter une ligne, puis remplissez chaque colonne. Voici un échantillon de données.
Titre de la page Chemin de page Rôle Nom Biographie
Directeur marketing Hobbes cmo-hobbes Directeur marketing Hobbes Hobbes est notre passionné de chats.
  • Dans l'angle supérieur droit, cliquez sur Publier.
  • Dans un autre onglet, revenez à la page de listing (/executives dans cet exemple). Vous devriez maintenant voir le nouveau cadre apparaître sur la page de listing, et en cliquant sur son nom, vous verrez sa page de détails.

6. Afficher les données de la page dynamique

Une fois que votre page dynamique compte des visites, vous pouvez analyser les performances de chaque page ou afficher des données pour l'ensemble des pages dans l'outil Analytics de trafic. Même si les pages individuelles des cadres sont créées à partir de la même page dynamique, des données de trafic, telles que les vues de page, seront attribuées à chaque page. 

Pour consulter les données de visite de votre page dans HubSpot :

  • Dans votre compte HubSpot, accédez à Reporting > Outils d'analytics.
  • Cliquez sur Analytics de trafic.
  • Dans le rapport d'analytics du trafic, cliquez sur l'onglet Pages.
  • Affichez le tableau pour voir les données de trafic pour les pages parents et enfants individuelles. Les pages enfants seront désignées par des icônes de flèche > pour montrer leur relation avec les pages parents. 
    example-traffic-data-2

Tenez compte des informations suivantes si vous ne voyez pas les données de trafic que vous attendez :

Plus de didacticiels sur HubDB

Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.