HubDBを使って動的ページを作成する

Last updated:

動的ページとは、構造化データソースからコンテンツを取得するCMSページのことです。動的ページがどのように設定されているかによって、HubSpotは選択されているソースからデータを取得し、一連のページを自動的に作成します。自動的に作成されるページには、データの概要を表示するリスティングページと、データ ソース エントリーごとの個別のページが含まれます。

HubDBテーブルをデータソースとして使用すると、動的ページを作成してから、テーブルの各行に対応する個別のページを生成できます。それぞれの動的ページに固有のURLが作成されてSEO効果が期待できるほか、ページ単位の効果分析も可能になります。

このチュートリアルでは、HubDBをデータソースとして使用して一連の動的ページを作成する手順を説明します。このチュートリアルに従うには、以下のものが必要です。

  • CMS Hub ProfessionalまたはEnterprise
  • HTMLとCSSに関する予備知識
データに基づくCMSページの構築について、詳しくはHubSpotアカデミーのCMSデータドリブン コンテンツ コースを参照してください。

1. HubDBテーブルを作成する

以下の手順に従って、新しいHubDBテーブルを作成します。

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[HubDB]の順に進みます。
  • 右上の[テーブルを作成]をクリックします。
  • ダイアログボックスにテーブルのラベルと名前を入力し、[作成]をクリックします。

テーブルを作成したら、テーブルが動的ページのコンテンツとして使用されるように設定できます。

  • 右上の[アクション]をクリックし、[設定を変更]を選択します。
  • 右側のパネルで、[行データを使用した動的ページ作成を有効化]をクリックしてオンに切り替えます。
  • 任意で、個別の動的ページのメタディスクリプション、キービジュアル、正規URLを選択できます。これらの値を空白のままにした場合、各ページには親ページからそれぞれの値が継承されます。

注:ページでメタディスクリプション、キービジュアル、および正規URLの列の値を使用するには、ページにcontent変数ではなく、以下のpage_meta HubL変数を含める必要があります。

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

例えば、HubSpotテンプレートは既定では{{content.meta_description}}タグからメタディスクリプションを取得します。代わりに、{{page_meta.meta_description}}を使用する必要があります。

  • [保存]をクリックして変更内容を保存します。
hubdb-table-settings-sidebar-save

テーブル設定を更新すると、ページタイトルとページのパスの列がテーブルに追加されます。

  • ページタイトル:HTML titleタグの中で指定されるこのページの名前。
  • ページのパス:テーブルの各行により作成される動的ページのURLの最後のセグメント。

以下のテーブルは、会社概要ページの経営幹部紹介を制作した例です。このテーブルは、パスがcfo-harlowceo-jeffcto-bristowpd-hugoで終わる動的ページを作成するために使用されることになります。

 

ページタイトル ページのパス 役職 名前 プロフィール
最高財務責任者(CFO)Harlow cfo-harlow CFO Harlow Harlowは日ごろから倹約家です。
最高経営責任者(CEO)Jeff ceo-jeff CEO Jeff JeffはCEOなので、普段は経営に勤しんでいます。
最高技術責任者(CTO)Bristow cto-bristow CTO Bristow CTOのBristowはいろいろと試行錯誤することが好きです。
主任製品デザイナー(CPD) pd-hugo CPD Hugo CPDのHugoは、製品設計に情熱を傾けています。
example-hubdb-table

注:ページパスは小文字で入力する必要がありますが、生成されるURLでは大文字と小文字は区別されません。上記の例では、/CEO-Jeffにアクセスすると、404エラーではなく/ceo-jeffと同じページが表示されます。

テーブルのデータを使用してページを作成する準備ができたら、右上の[公開]をクリックします。

2. テンプレートを作成する

次に、リストページおよび各行の個々の詳細ページの両方のために1つのテンプレートを作成します。これはリストページと記事詳細ページの両方にブログテンプレートを使用できるのと似ています。ページテンプレートを作成するには、以下の手順に従います。

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
  • 左側のサイドバーメニューで、テンプレートを作成するフォルダーに移動します。新しいフォルダーを作成するには、左上の[ファイル]をクリックし、[新規フォルダー]を選択します。次に、[ファイル]をクリックし、[新規ファイル]を選択します。
  • ダイアログボックスで、ドロップダウンメニューを使用してファイルタイプとして[HTML+HubL]を選択します。
  • [次へ]をクリックします。
新しいHTML+HubLテンプレートを作成する
  • [ファイル名]フィールドにテンプレートの名前を入力します。
  • [ファイルの場所]で[変更]をクリックすると、デザインマネージャー内にテンプレートを配置する場所を変更できます。
  • [作成]をクリックしてテンプレートを作成します。

動的ページがこのテンプレートを使用するように設定された状態で、ページURLの末尾がパス列と一致した場合は、dynamic_page_hubdb_row変数およびdynamic_page_hubdb_table_id変数をテンプレートで使用できます。例えば経営幹部紹介ページを作成する場合、以下のコードのような方法で、dynamic_page_hubdb_rowのフィールドを使用して経営幹部の情報を表示できます。

  • hs_name:HubDBの行に関連付けられたページタイトル。
  • name:経営幹部の名前。
  • role:経営幹部の役職。
{% 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 %}

次に、テーブルからのパスを追加することなく、動的ページが読み込まれたケースの処理を追加できます。通常これは、HubDBテーブルの行のページへのリンク一覧を表示するリストページとして使用されます。コードを以下の内容に置き換えます。

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

eliefブロック内のコードは、経営幹部のテーブルの全ての行を繰り返し処理し、リストの各エントリーとその一意のパスへのリンクをリストに表示します。

  • デザインマネージャーで、[プレビュー]をクリックしてテンプレートをプレビューします。このテンプレートではページのコンテキストに応じてdynamic_page_hubdb_row変数またはdynamic_page_hubdb_table_id変数が設定されるため、プレビューには何も表示されません。 
  • テンプレートレベルでコードをテストするには、以下の一時的なコードをテンプレートの先頭に追加します。このコードは、公開する前に必ず削除してください。
{% set dynamic_page_hubdb_table_id = %}
  • 上記のコードを追加すると、このテンプレートでハイパーリンクのリストがレンダリングされ、作成したHubDBテーブルからデータが取得されるようになります。
hubdb-template-preview
  • テンプレートをプレビューした後、上記の一時的なコードを削除します。次に、右上の[公開]をクリックして、ページを作成できるようにします。

3. 動的ページを作成する

テンプレートから動的ページを作成するには、以下の手順に従います。

  • デザインマネージャーで新しいテンプレートを開いた状態で、ファインダーの上部にある[アクション]ドロップダウンメニューをクリックし、[ページを作成]を選択します。
    create-page-from-design-manager
  • ダイアログボックス内で[ウェブサイトページ]を選択し、ページ名を入力します。
  • [ページを作成]をクリックします。
  • ページエディター上部の[設定]タブをクリックします。
  • [ページタイトル]フィールドにページの名前を入力します。この名前を使用して、トラフィック分析を検索できるようになります。
  • [ページURL]フィールドに/executivesURLを入力します。このURLは動的ページのベースURLになります。
  • [詳細オプション]をクリックし、詳細設定を開きます。
  • [動的ページ]セクションまで下にスクロールして、[データソース]ドロップダウンメニューをクリックします。作成したHubDBテーブルを選択します。
HubDBテーブルにリンクするためのページ設定の詳細オプション
  • 完了したら、右上の[公開]をクリックします。これで、ページを表示できる状態になりました。

4. 公開中のページを表示する

HubDBテーブルで定義された新しい動的ページとその全てのパスにアクセスできる状態になりました。

  • ページエディターで設定したURLにある動的リスティングページに移動します。このチュートリアルでは動的ページのURLとして/executivesを使用しているため、https://www.yourdomain.com/executivesに移動します。
  • リスティングページの箇条書きリストで経営幹部の名前をクリックすると、その経営幹部の詳細ページが表示されます。
2022-11-28_15-55-47 (1)

5. 新しいテーブル行を追加する

動的ページでHubDBデータを読み込んだ後、テーブルに戻って新しい行を追加します。テーブルを公開した後は、公開中のページが新しいHubDBデータで動的に更新されるようになります。

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[HubDB]の順に進みます。
  • 作成したテーブルの名前をクリックします。
  • [行を追加]をクリックし、各列に値を入力します。以下はサンプルのデータセットです。
ページタイトル ページのパス 役職 名前 プロフィール
最高マーケティング責任者(CMO)Hobbes cmo-hobbes CMO Hobbes 猫のことならHobbesにお任せください。
  • 右上の[公開]をクリックします。
  • 別のタブで、リスティングページ(この例では/executives)に戻ります。新しい経営幹部がリスティングページに表示されているはずです。名前をクリックすると、この経営幹部の詳細ページが表示されます。

6. 動的ページのデータを確認する

動的ページへのアクセスが発生すると、個々のページのパフォーマンスを評価したり、トラフィック アナリティクス ツールで全てのページのデータを確認したりできるようになります。各経営幹部に関する個別のページが同じ動的ページから構築されていても、ページビュー数などのトラフィックデータはそれぞれのページに帰属します。 

HubSpotでページ訪問データを確認するには、以下の手順に従います。

  • HubSpotアカウントにて、[レポート]>[アナリティクスツール]の順に進みます。
  • [トラフィックアナリティクス]をクリックします。
  • トラフィックアナリティクスのレポートで、[ページ]タブをクリックします。
  • テーブルを表示して、個々の親ページと子ページのトラフィックデータを確認します。子ページは、親ページとの関係を示す>矢印アイコンで示されます。 
    example-traffic-data-2

想定されるトラフィックデータが表示されない場合は、以下の点に留意してください。

HubDBに関するその他のチュートリアル


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。