CRMオブジェクトを使用した動的ページの作成方法

HubSpot標準のオブジェクト（例：製品）またはカスタムオブジェクト（Enterpriseのみ）を使用して、CRMオブジェクトによる動的ページを作成できます。動的ページは、リスト ページ ビューと各レコードの詳細ページで構成されます。リストページにはオブジェクト内の全てのレコードのリストが表示され、詳細ページにはレコードのプロパティー値に基づいて各レコードの詳細が表示されます。 

また、HubDBを使用して動的ページを作成することもできます。各種動的ページの詳細をご覧ください。

CRMオブジェクトによる動的ページを作成するには、次の4つのステップに従います。

  1. 表示するデータを使用してCRMオブジェクトを準備します。
  2. データを表示するためのカスタムモジュールを作成します。
  3. リストページに全てのレコードを表示するためのリストモジュールを作成します。
  4. モジュールをドラッグ＆ドロップページに追加し、データソースにするオブジェクトを選択します。

このチュートリアルでは、ディーラーの個々の車両データを格納した「Cars」カスタムオブジェクトを例に、CRMオブジェクトによる動的ページの作成方法を説明します。このコード例を貴社の用途に合わせるには、「Car」を貴社のカスタムオブジェクトに置き換え、「car」を個々のオブジェクトレコードに置き換えます。 

前提条件

CRMオブジェクトによる動的ページを作成するための要件を次に示します。

  • カスタムモジュールを使用する場合、CMS Hub Enterpriseアカウント。またはMarketing Hub EnterpriseアカウントとCMS Hub Professional。標準オブジェクトを使用する場合、CMS Hub ProfessionalまたはEnterprise。
  • カスタムモジュールを作成する方法に関する理解。 
  • データソースとして使用する標準オブジェクトまたはカスタムオブジェクト。また、そのオブジェクトのユーザー権限（「会社」や「カスタムオブジェクト」のアクセス権など）が必要になります。 
  • 個々の製品やカスタム オブジェクトのレコードなど、作成済みのレコード。レコードはHubSpotのUI、またはAPIエンドポイント経由で作成できます。

CRMオブジェクトを準備する

CRMオブジェクトによる動的ページを使用する場合、自動作成される各詳細ページはCRMの各レコードに固有です。詳細ページのメタデータ（ページのURLスラッグ、ページタイトルなど）を定義するには、ページエディター内でプロパティーを定義に割り当てる必要があります。  

以下の表に、ページプロパティーを示します。プロパティー名はこの例に完全に合わせる必要はありません。また、メタデータには既存のプロパティーを使用できます。

動的ページのプロパティー
動的ページのプロパティープロパティーのタイプ説明
Dynamic page slug
必須
text

各詳細ページのCMSページURLに追加されるスラッグ。この定義に割り当てるプロパティーとしては、"hasUniqueValue": trueが設定されているテキストフィールドが必要になります。 

このプロパティーはURLに使用されるため、URLに適した値にする必要があります。全て小文字にし、-以外の特殊文字とスペースは使用しないでください。

 このプロパティーは、スキーマ作成エンドポイントを使用して設定できます。既存のプロパティーを更新しても"hasUniqueValue":trueは設定できません。この作成方法に従う必要があります。

Page Title
text

重複しない値が理想的です。また、個々のオブジェクトインスタンスを簡潔に記述したプロパティーに割り当てる必要があります。

検索結果ですぐに特定できるように、そのページに固有のコンテンツを示す値にしてください。

Meta description
text

個々のオブジェクトインスタンスの簡単な説明にする必要があります。ページのSEOに影響します。

検索結果ですぐに特定できるように、そのページに固有のコンテンツを示す値にしてください。

Featured image
text

これは、ページのメタ情報に含まれるキービジュアルです。このページが共有されるときに、この画像が使用されます。

カスタムオブジェクトを定義したものの、動的ページのフィールドに割り当てるプロパティーがない場合には、CRMオブジェクト スキーマ パッチAPIを使用してオブジェクトスキーマを更新します。

この例では車両ごとの車台番号（VIN）が重複しないことが分かっているため、カスタムプロパティー「VIN」をページスラッグとして使用します。

1つのレコードの詳細を表示するモジュールを作成する

個々の詳細ページでは、このモジュールをオブジェクト レコード データの表示に使用します。この例では、このモジュールによって車両別のページの詳細を表示します。

このモジュール内で、現在の動的ページのオブジェクトインスタンスに格納されているデータにアクセスするには、dynamic_page_crm_object変数を使用します。

詳細モジュールを設定するには、次の手順に従います。

ヒント：モジュールに「［オブジェクトのタイプ］ - detail（詳細）」のような名前を付けると、モジュールの内容が分かりやすくなります。例：「Car - detail」。

  • module.htmlフィールドに次のコードを追加します。
{% if dynamic_page_crm_object and !module.car %}{# detail page and content creator has not selected an object#} {% set car = dynamic_page_crm_object %} {# easy variable to access the CRM objects properties from #} {# To see all of the properties your object during development, print it to the page with the |pprint filter #} <h1>{{car.year}} {{car.make}} {{model}} </h1> <div class="car"> <div class="carImage"> {% if car.image %} <img src="{{car.image}}" alt="{{car.year}} {{car.make}} {{car.model}}"> {% else %} <img src="https://f.hubspotusercontent20.net/hubfs/9307273/Imported%20images/plchldr255.png" alt="Picture coming soon"> {% endif %} </div> <div class="carDetails"> <div class="carPrice"> Price: {{ car.price|format_currency("en-US") }} </div> <div class="carBody"> Body Type: {{ car.body_style.name}} </div> <div class="carDescription"> {{ car.description }} </div> <div class="carDistance"> Distance from Cambridge: <span class="dealer_location"> {{ car.location }}</span> Miles </div> <div class="carListingDate"> Time since listing: <span class="listing_date">{{ car.date_received }}</span> </div> </div> </div> {% else %}{# The page is not a dynamic page or the user selects a specific object, we can get the data from a CRM object field if there is data. #} {% set car = module.car.properties %} {# easy variable to access the CRM objects properties from #} {# To see all of the properties your object during development, print it to the page with the |pprint filter #} <section aria-label="featured car"> <div class="carImage"> {% if car.image %} <img src="{{car.image}}" alt="{{car.year}} {{car.make}} {{car.model}}"> {% else %} <img src="https://f.hubspotusercontent20.net/hubfs/9307273/Imported%20images/plchldr255.png" alt="Picture coming soon"> {% endif %} <h3 class="car-name">{{car.year}} {{car.make}} {{model}} </h3> <div class="price"> {{car.price|format_currency("en-US")}} </div> </div> </section> {% endif %}

このコードでは、ページがCRMオブジェクトによる動的ページかどうかをチェックします。該当する場合は、dynamic_page_crm_objectがオブジェクト レコード データの取得に使用されます。オブジェクト レコード データは、ページエディター内で設定したオブジェクトタイプに基づいて取得されます。

これにより、モジュールの複数のインスタンスを使用して動的ページにオブジェクトレコードを掲載できるので、モジュールは動的ページ以外の場面でも役に立ちます。

上記のコードでは、「car」というCRMオブジェクトを作成しました。用途に合わせて、コード内の「module.car」への参照を貴社のオブジェクトの名前に更新できます。

このモジュールを作成したら、リストモジュールを作成して、汎用的なリストページに表示する情報を定義します。

リストモジュールを作成する

用途によっては、動的ページのルートURLでオブジェクトのレコードのリストを表示することがあります。この自動車の例では、「https://website.com/cars」ページに全ての在庫車のリストを表示します。

このためには、オブジェクトレコードのリストとして機能する新しいカスタムモジュールを作成します。ページで選択されているオブジェクトの完全修飾名（fqn）を参照するには、このモジュール内でdynamic_page_crm_object_type_fqn変数を使用します。

ヒント：モジュールに「［オブジェクトのタイプ］ - listing（リスト）」のような名前を付けると、モジュールの内容が分かりやすくなります。例：「Car - listing」。

リストモジュールを作成するには、以下のコード例を使用し、変更できます。

{% if dynamic_page_crm_object_type_fqn %}{# dynamic listing page #} {% set cars = crm_objects(dynamic_page_crm_object_type_fqn, "limit=200","vin, price, picture, location, body_type, date_received, image") %} {# To see all of the properties your object during development, print it to the page with the |pprint filter #} <div class="car__listing"> {% for car in cars.results %} <div class="car__card"> <a href="{{ request.path }}/{{ car.vin }}"> <div class="car__image"> {% if car.image %} <img src="{{car.image}}" alt="{{car.year}} {{car.make}} {{car.model}}"> {% else %} <img src="https://f.hubspotusercontent20.net/hubfs/9307273/Imported%20images/plchldr255.png" alt="Picture coming soon"> {% endif %} </div> <div class="car__details"> <div class="car__price"> Price: {{car.price |format_currency("en-US")}} </div> <div class="car__body"> Body Type: {{ car.body_type}} </div> <div class="car__distance"> Distance from Cambridge: <span class="car__dealer-location"> {{car.location}}</span> </div> <div class="car__listing-date"> Time since listing: <span class="car__listing-date"> {{car.date_received }} </span> </div> </div> </a> </div> {% endfor %} </div> {% elif dynamic_page_crm_object %} <!-- Listing module is hidden when viewing a dynamic pages detail page. --> {% else %}{# display simple listing for use on other pages #} {% set cars = crm_objects("p9307273_car", "limit=5","vin, price, location, body_type, date_received, image") %} {# To see all of the properties your object during development, print it to the page with the |pprint filter #} <section aria-labelledby="object-listing-heading"> <h3 id="object-listing-heading"> Available Cars </h3> <ul> {% for car in cars.results %} <li><a href="/cars/{{ car.vin }}">{{ car.body_type }} ({{ car.price }}) in {{ car.location }}</a></li> {% endfor %} </ul> </section> {% endif %}

このコードでは、現在のページがCRMオブジェクトによる動的リストページかどうかをチェックします。該当する場合は、モジュールによって項目リストが表示されます。詳細ページの場合は、モジュールでは何も表示されません。別のCMSページである場合、結果のシンプルなリストが表示されます。

ページのセットアップ

作成したモジュールをページに追加し、データソースにするオブジェクトを選択できます。

  1. 新しいページを作成し、ドラッグ&ドロップエリアまたはフレキシブルカラムを含むページテンプレートを選択します。 
  2. ページエディターで［設定］タブをクリックします。
  3. ［ページURL］の鉛筆アイコンをクリックして、ページのURLを編集します。リストページを表示する場所をURLに設定します。この自動車の例では、リストページは/carsにします。 
  4. ［詳細オプション］をクリックし、［動的ページ］セクションまでスクロールします。
  5. ［動的ページ］の［データソース］ドロップダウンメニューをクリックし、オブジェクトタイプを選択します。次に［動的ページスラッグ］ドロップダウンメニューをクリックし、ページスラッグとして使用するプロパティーを選択します。"hasUniqueValue":trueが設定されているプロパティーのみが選択可能です。この例では、ページURLには「VIN」プロパティーを使用します。これにより、URLスラッグ/cars/[VIN value]を使用して詳細ページが生成されます。

    ページエディターのページ設定画面のスクリーンショット。動的ページの［データソース］フィールドと［動的ページスラッグ］フィールドのみが表示されるようにトリミングされています。
  6. ［メタデータ］では、ページのメタデータを取り込むプロパティーを選択します。この例では、キービジュアルを各車両の画像URLを含むプロパティーに設定します。
  7. メタデータの設定が完了したら、ページ上部にある［コンテンツ］タブをクリックして、エディターに戻ります。
  8. 左側のサイドバーの［追加］タブで、詳細モジュールおよびリストモジュールを検索し、ページエディター内にドラッグします。
  9. ページをプレビューするには、右上にある［プレビュー］をクリックします。
  10. 準備ができたら、右上にある［公開］をクリックしてページを公開します。

これでデータソースに基づいて動的ページが作成されました。サンプルページが設定された状態で、ユーザーがHubSpot上で車両レコードを更新すると、リストページと詳細ページが自動的に更新され、変更内容が反映されます。このオブジェクトタイプのレコードが新規に作成されると、動的ページスラッグを使用して新しいページが自動的に作成され、リストページからリンクされます。

crm_objects関数を使用したリストの作成をご覧ください。

CRMオブジェクトに関するその他の資料

 

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