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

Last updated:

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

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

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

  • CMS Hub ProfessionalまたはEnterprise
  • HTMLとCSSに関する予備知識

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-harlow、ceo-jeff、cto-bristow、pd-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. テンプレートを作成する

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

  • 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］フィールドに/executivesのURLを入力します。この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がご提供しているヘルプはこちらでご確認ください。