Dynamische Seiten mithilfe von HubDB erstellen

Last updated:

Dynamische Seiten sind CMS-Seiten, die ihre Inhalte von einer strukturierten Datenquelle abrufen. Je nachdem, wie Sie Ihre dynamische Seite konfigurieren, übernimmt HubSpot Daten von der ausgewählten Quelle und erstellt automatisch eine Reihe von Seiten. Dies umfasst eine Listing-Seite, die Zusammenfassungen der Daten anzeigt, und einzelne Seiten für jeden Datenquelleneintrag.

Mithilfe einer HubDB-Tabelle als Datenquelle können Sie eine dynamische Seite erstellen, die dann eine Seite für jede Zeile in der Tabelle generiert. Jede dynamische Seite hat ihre eigene, SEO-freundliche URL und bietet seitenspezifische Analytics.

In diesem Tutorial erfahren Sie, wie Sie einen Satz dynamischer Seiten mithilfe von HubDB als Datenquelle erstellen. Für dieses Tutorial benötigen Sie:

  • CMS Hub Professional oder Enterprise
  • Einige Vorkenntnisse in HTML und CSS
Weitere Informationen zum Erstellen datenbasierter CMS-Seiten finden Sie im Kurs zu CMS-datengestütztem Content der HubSpot Academy.

1. Eine HubDB-Tabelle erstellen

So erstellen Sie eine neue HubDB-Tabelle:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > HubDB.
  • Klicken Sie oben rechts auf Tabelle erstellen.
  • Geben Sie im Dialogfeld das Label und den Namen der Tabelle ein und klicken Sie dann auf Erstellen.

Ist die Tabelle erstellt, können Sie festlegen, dass sie für dynamische Seiteninhalte verwendet werden soll:

  • Klicken Sie oben rechts auf Aktionen und wählen Sie dann Einstellungen verwalten aus.
  • Klicken Sie im rechten Bereich auf den Schalter Erstellen dynamischer Seiten mithilfe von Zeilendaten aktivieren, um ihn zu aktivieren.
  • Sie können optional die Metabeschreibung, das Feature-Bild und die kanonische URL der einzelnen dynamischen Seiten auswählen. Wenn Sie diese Werte leer lassen, übernimmt jede Seite die entsprechenden Werte von ihrer übergeordneten Seite.

Bitte beachten: Damit eine Seite die Werte aus den Spalten „Metabeschreibung“, „Feature-Bild“ und „Kanonische URL“ verwenden kann, muss die Seite die folgenden page_meta-HubL-Variablen anstelle von content-Variablen enthalten:

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

Beispielsweise beziehen HubSpot-Vorlagen ihre Metabeschreibung standardmäßig vom {{content.meta_description}}-Tag. Sie müssen stattdessen {{page_meta.meta_description}} verwenden.

  • Klicken Sie anschließend auf Speichern, um die Änderungen zu übernehmen.
hubdb-table-settings-sidebar-save

Nachdem Sie die Tabelleneinstellungen aktualisiert haben, werden die Spalten Seitentitel und Seitenpfad zur Tabelle hinzugefügt.

  • Seitentitel: der Name dieser Seite, wie im HTML-Titel-Tag zu sehen.
  • Seitenpfad: das letzte Segment der URL für die dynamische Seite, die von jeder Zeile in der Tabelle erstellt wird.

Die folgende Tabelle ist ein Beispiel, das einer „Über uns“-Seite für Mitglieder des Vorstandsteams eines Unternehmens nachempfunden ist. Diese Tabelle wird verwendet, um dynamische Seiten mit Pfaden zu erstellen, die in cfo-harlow, ceo-jeff, cto-bristow und pd-hugo enden.

 

Seitentitel Seitenpfad Rolle Name Biografie
CFO Harlow cfo-harlow CFO Harlow Das ist Harlow, der die Finanzen bis ins letzte Detail kennt.
CEO Jeff ceo-jeff CEO Jeff Jeff ist der CEO, was bedeutet, dass er hier normalerweise die Dinge leitet.
CTO Bristow cto-bristow CTO Bristow Das ist unser CTO, Bristow, ein Tüftler vor dem Herrn.
Chief PD pd-hugo CPD Hugo Hugo, unser Chefproduktdesigner, entwirft gerne Produkte.
example-hubdb-table

Bitte beachten: Obwohl Sie Seitenpfade als Kleinbuchstaben eingeben müssen, berücksichtigen die resultierenden URLs keine Groß- und Kleinschreibung. Wenn im obigen Beispiel jemand zu /CEO-Jeff geht, wird ihm die gleiche Seite wie /ceo-jeff anstelle eines 404-Fehlers angezeigt.

Wenn Sie bereit sind, die Daten aus Ihrer Tabelle zu verwenden, um Ihre Seiten zu erstellen, klicken Sie oben rechts auf Veröffentlichen.

2. Vorlage erstellen

Als Nächstes erstellen Sie eine Vorlage sowohl für die Listing-Seite als auch als individuelle Detailseite für jede Zeile, ähnlich wie auch Blog-Vorlagen für Listing- und Beitragsdetailseiten verwendet werden können. So erstellen Sie die Seitenvorlage:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Tools.
  • Gehen Sie im linken Seitenmenü zu dem Ordner, in dem Sie die Vorlage erstellen möchten. Um einen neuen Ordner zu erstellen, klicken Sie oben links auf Datei und wählen Sie dann Neuer Ordner aus. Klicken Sie dann auf Datei und wählen Sie Neue Datei aus.
  • Verwenden Sie im Dialogfeld das Dropdown-Menü, um HTML + HubL als Dateityp auszuwählen.
  • Klicken Sie auf Weiter.
Erstellen einer neue HTML + HubL-Vorlage
  • Geben Sie im Feld Dateiname den Namen der Vorlage ein.
  • Unter Dateispeicherort können Sie den Speicherort der Vorlage in Ihrem Design-Manager ändern, indem Sie auf „Ändern“ klicken.
  • Klicken Sie auf Erstellen, um die Vorlage zu erstellen.

Wenn eine dynamische Seite für die Verwendung dieser Vorlage festgelegt ist und das Ende der Seiten-URL mit der Pfadspalte übereinstimmt, können Sie auf die Variablen dynamic_page_hubdb_row und dynamic_page_hubdb_table_id in der Vorlage zugreifen. Zum Erstellen einer Profilseite für eine Führungskraft zeigt beispielsweise der folgende Code, wie Sie Felder von dynamic_page_hubdb_row verwenden können, um die Informationen einer Führungskraft anzuzeigen:

  • hs_name: der zugehörige Seitentitel für die HubDB-Zeile.
  • name: der Name der Führungskraft.
  • role: die Rolle der Führungskraft.
{% 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 %}

Als Nächstes können Sie Handling für den Fall hinzufügen, dass jemand Ihre dynamische Seite lädt (ohne zusätzliche Pfade aus Ihrer Tabelle). Normalerweise wird dies als Listing-Seite verwendet, um Links zu den Seiten für die Zeilen in Ihrer HubDB-Tabelle zu listen. Ersetzen Sie Ihren Code durch:

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

Der Code innerhalb des elif-Blocks durchläuft alle Zeilen in der Tabelle der Führungskraft und zeigt jeden Eintrag in einer Liste mit einem Link zu ihrem eindeutigen Pfad an.

  • Klicken Sie im Design-Manager auf Vorschau, um eine Vorschau der Vorlage anzuzeigen. Die Vorschau ist leer, da sie sich auf den Kontext der Seite stützt, um die Variablen dynamic_page_hubdb_row oder dynamic_page_hubdb_table_id festzulegen. 
  • Um Ihren Code auf der Vorlagenebene zu testen, fügen Sie den folgenden temporären Code oben in Ihrer Vorlage hinzu und stellen Sie sicher, dass Sie ihn vor der Veröffentlichung entfernen:
{% set dynamic_page_hubdb_table_id = %}
  • Nachdem Sie den oben genannten Code hinzugefügt haben, sollte Ihre Vorlage nun eine Liste von Hyperlinks rendern und Daten aus der HubDB-Tabelle holen, die Sie erstellt haben.
hubdb-template-preview
  • Entfernen Sie nach dem Anzeigen der Vorschau der Vorlage den obigen temporären Code. Klicken Sie dann oben rechts auf Veröffentlichen, um ihn für das Erstellen von Seiten verfügbar zu machen.

3. Die dynamische Seiten erstellen

So erstellen Sie von Ihrer Vorlage aus eine dynamische Seite:

  • Wenn Ihre neue Vorlage im Design-Manager geöffnet ist, klicken Sie oben im Finder auf das Dropdown-Menü Aktionen und wählen Sie dann Seite erstellen aus.
    create-page-from-design-manager
  • Wählen Sie im Dialogfeld Website-Seite aus und geben Sie einen Seitennamen ein.
  • Klicken Sie auf Seite erstellen.
  • Klicken Sie oben im Seiten-Editor auf die Registerkarte Einstellungen.
  • Geben Sie im Feld Seitentitel einen Seitennamen ein, mit dem Sie später nach Traffic-Analytics suchen können.
  • Geben Sie im Feld URL eine URL von /executives ein. Die URL ist die Basis-URL für Ihre dynamische Seite.
  • Klicken Sie auf Erweiterte Optionen, um zusätzliche Einstellungen anzuzeigen.
  • Scrollen Sie nach unten zum Abschnitt Dynamische Seiten und klicken Sie dann auf das Dropdown-Menü Datenquellen. Wählen Sie die HubDB-Tabelle aus, die Sie erstellt haben.
Erweiterte Optionen in den Seiteneinstellungen für das Verlinken zur HubDB-Tabelle
  • Wenn Sie fertig sind, klicken Sie oben rechts auf Veröffentlichen. Ihre Seiten sind jetzt bereit zum Anzeigen.

4. Live-Seiten anzeigen

Jetzt können Sie Ihre neue dynamische Seite und alle ihre Pfade besuchen, wie in Ihrer HubDB-Tabelle definiert.

  • Gehen Sie zur dynamischen Listing-Seite unter der URL, die Sie im Seiten-Editor festgelegt haben. Dieses Tutorial verwendet /executives für seine dynamische Seiten-URL. In diesem Fall würden Sie zu folgender Adresse gehen: https://www.ihredomain.com/executives.
  • Klicken Sie auf der Listing-Seite auf die Namen in der Aufzählung, um die Detailseite für diese Führungskraft anzuzeigen.
28.11.2022_15-55-47 (1)

5. Eine neue Tabellenzeile hinzufügen

Wenn Ihre dynamische Seite HubDB-Daten lädt, gehen Sie zurück zur Tabelle und fügen eine neue Zeile hinzu. Nach der Veröffentlichung der Tabelle wird Ihre Live-Seite dann dynamisch mit den neuen HubDB-Daten aktualisiert.

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > HubDB.
  • Klicken Sie auf den Namen der Tabelle, die Sie erstellen.
  • Klicken Sie auf Zeile hinzufügen und füllen Sie dann jede Spalte aus. Nachfolgend finden Sie einen Beispieldatensatz.
Seitentitel Seitenpfad Rolle Name Biografie
CMO Hobbes cmo-hobbes CMO Hobbes Hobbes ist unser absoluter Katzenliebhaber.
  • Klicken Sie oben rechts auf Veröffentlichen.
  • Gehen Sie auf einer anderen Registerkarte zurück zur Listing-Seite (/executives in diesem Beispiel). Sie sollten nun sehen, dass die neue Führungskraft auf der Listing-Seite angezeigt wird. Wenn Sie dann auf ihren Namen klicken, wird ihre Detailseite angezeigt.

6. Daten von dynamischen Seiten anzeigen

Sobald Sie Ihre dynamische Seite besuchen, können Sie die Performance einzelner Seiten messen oder alle Seitendaten im Traffic-Analytics-Tool anzeigen. Auch wenn die Seiten der einzelnen Führungskräfte aus derselben dynamischen Seite erstellt wurden, werden jeder Seite Traffic-Daten wie Seitenaufrufe zugeordnet. 

So zeigen Sie die Daten für Seitenaufrufe in HubSpot an:

  • Gehen Sie in Ihrem HubSpot-Account zu Berichte > Analytics-Tools.
  • Klicken Sie auf Traffic-Analytics.
  • Klicken Sie im Traffic-Analytics-Bericht auf die Registerkarte Seiten.
  • Zeigen Sie die Tabelle an, um die Traffic-Daten für die einzelnen übergeordneten und untergeordneten Seiten zu sehen. Untergeordnete Seiten werden mit > Pfeilsymbolen gekennzeichnet, um ihre Beziehung zu übergeordneten Seiten anzuzeigen. 
    example-traffic-data-2

Beachten Sie Folgendes, wenn Sie nicht die erwarteten Traffic-Daten sehen:

Weitere HubDB-fokussierte Tutorials

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.