HubDBを使って動的ページを作成する
動的ページとは、構造化データソースからコンテンツを取得するCMSページのことです。動的ページがどのように設定されているかによって、HubSpotは選択されているソースからデータを取得し、一連のページを自動的に作成します。自動的に作成されるページには、データの概要を表示するリスティングページと、データ ソース エントリーごとの個別のページが含まれます。
HubDBテーブルをデータソースとして使用すると、動的ページを作成してから、テーブルの各行に対応する個別のページを生成できます。それぞれの動的ページに固有のURLが作成されてSEO効果が期待できるほか、ページ単位の効果分析も可能になります。
このチュートリアルでは、HubDBをデータソースとして使用して一連の動的ページを作成する手順を説明します。このチュートリアルに従うには、以下のものが必要です。
- CMS Hub ProfessionalまたはEnterprise
- HTMLとCSSに関する予備知識
以下の手順に従って、新しい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}}
を使用する必要があります。
- [保存]をクリックして変更内容を保存します。

テーブル設定を更新すると、ページタイトルとページのパスの列がテーブルに追加されます。
- ページタイトル: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は、製品設計に情熱を傾けています。 |

注:ページパスは小文字で入力する必要がありますが、生成されるURLでは大文字と小文字は区別されません。上記の例では、/CEO-Jeff
にアクセスすると、404エラーではなく/ceo-jeff
と同じページが表示されます。
ページテンプレートを作成するには、以下の手順に従います。
- HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
- 左側のサイドバーメニューで、テンプレートを作成するフォルダーに移動します。新しいフォルダーを作成するには、左上の[ファイル]をクリックし、[新規フォルダー]を選択します。次に、[ファイル]をクリックし、[新規ファイル]を選択します。
- ダイアログボックスで、ドロップダウンメニューを使用してファイルタイプとして[HTML+HubL]を選択します。
- [次へ]をクリックします。

- [ファイル名]フィールドにテンプレートの名前を入力します。
- [ファイルの場所]で[変更]をクリックすると、デザインマネージャー内にテンプレートを配置する場所を変更できます。
- [作成]をクリックしてテンプレートを作成します。
ブログテンプレートをリストページおよび記事詳細ページの両方に使用できるのと同様に、このテンプレートは全ての行の一覧を表示するリストページかつ各行の詳細ページとして機能します。
動的ページがこのテンプレートを使用するように設定された状態で、URLの末尾がパス列と一致した場合は、dynamic_page_hubdb_row
変数およびdynamic_page_hubdb_table_id
変数をテンプレートで使用できます。例えば、経営幹部紹介ページを作成する場合、以下のコードはdynamic_page_hubdb_rowのフィールドを使用して経営幹部の情報を表示する方法を示しています。
hs_name
:HubDBの行に関連付けられたページタイトル。name
:経営幹部の名前。role
:経営幹部の役職。
次に、(テーブルからのパスを追加することなく)動的ページが読み込まれたケースの処理を追加できます。通常これは、HubDBテーブルの行のページへのリンク一覧を表示するリストページとして使用されます。コードを以下の内容に置き換えます。
elief
ブロック内のコードは、経営幹部のテーブルの全ての行を繰り返し処理し、リストの各エントリーとその一意のパスへのリンクをリストに表示します。
- デザインマネージャーで、[プレビュー]をクリックしてテンプレートをプレビューします。このテンプレートではページのコンテキストに応じて
dynamic_page_hubdb_row
変数またはdynamic_page_hubdb_table_id
変数が設定されるため、プレビューには何も表示されません。 - テンプレートレベルでコードをテストするには、以下の一時的なコードをテンプレートの先頭に追加します。このコードは、公開する前に必ず削除してください。
{% set dynamic_page_hubdb_table_id = %}
- 上記のコードを追加すると、このテンプレートでハイパーリンクのリストがレンダリングされ、作成したHubDBテーブルからデータが取得されるようになります。

- テンプレートをプレビューした後、上記の一時的なコードを削除します。次に、右上の[公開]をクリックして、ページを作成できるようにします。
テンプレートから動的ページを作成するには、以下の手順に従います。
- デザインマネージャーで新しいテンプレートを開いた状態で、ファインダーの上部にある[アクション]ドロップダウンメニューをクリックし、[ページを作成]を選択します。
- ダイアログボックス内で[ウェブサイトページ]を選択し、ページ名を入力します。
- [ページを作成]をクリックします。
- ページエディター上部の[設定]タブをクリックします。
- [ページタイトル]フィールドにページの名前を入力します。この名前を使用して、トラフィック分析を検索できるようになります。
- [ページURL]フィールドに
/executives
のURLを入力します。このURLは動的ページのベースURLになります。 - [詳細オプション]をクリックし、詳細設定を開きます。
- [動的ページ]セクションまで下にスクロールして、[データソース]ドロップダウンメニューをクリックします。作成したHubDBテーブルを選択します。

- 完了したら、右上の[公開]をクリックします。これで、ページを表示できる状態になりました。
HubDBテーブルで定義された新しい動的ページとその全てのパスにアクセスできる状態になりました。
- ページエディターで設定したURLにある動的リスティングページに移動します。このチュートリアルでは動的ページのURLとして
/executives
を使用しているため、https://www.yourdomain.com/executives
に移動します。 - リスティングページの箇条書きリストで経営幹部の名前をクリックすると、その経営幹部の詳細ページが表示されます。
.gif?width=487&height=376&name=2022-11-28_15-55-47%20(1).gif)
動的ページでHubDBデータを読み込んだ後、テーブルに戻って新しい行を追加します。テーブルを公開した後は、公開中のページが新しいHubDBデータで動的に更新されるようになります。
- HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[HubDB]の順に進みます。
- 作成したテーブルの名前をクリックします。
- [行を追加]をクリックし、各列に値を入力します。以下はサンプルのデータセットです。
ページタイトル | ページのパス | 役職 | 名前 | プロフィール |
---|---|---|---|---|
最高マーケティング責任者(CMO)Hobbes | cmo-hobbes | CMO | Hobbes | 猫のことならHobbesにお任せください。 |
- 右上の[公開]をクリックします。
- 別のタブで、リスティングページ(この例では
/executives
)に戻ります。新しい経営幹部がリスティングページに表示されているはずです。名前をクリックすると、この経営幹部の詳細ページが表示されます。
動的ページへのアクセスが発生すると、個々のページのパフォーマンスを評価したり、トラフィック アナリティクス ツールで全てのページのデータを確認したりできるようになります。各経営幹部に関する個別のページが同じ動的ページから構築されていても、ページビュー数などのトラフィックデータはそれぞれのページに帰属します。
HubSpotでページ訪問データを確認するには、以下の手順に従います。
- HubSpotアカウントにて、[レポート]>[アナリティクスツール]の順に進みます。
- [トラフィックアナリティクス]をクリックします。
- トラフィックアナリティクスのレポートで、[ページ]タブをクリックします。
- テーブルを表示して、個々の親ページと子ページのトラフィックデータを確認します。子ページは、親ページとの関係を示す>矢印アイコンで示されます。
想定されるトラフィックデータが表示されない場合は、以下の点に留意してください。
- アカウントのレポート設定でIPアドレスを除外している場合は、ページビューが登録されるように、ネットワークの外部からページにアクセスしてください。
- 新しいページデータがHubSpotに表示されるまでには最大40分かかることがあります。
貴重なご意見をありがとうございました。