Become a HubSpot power user — join us for HubSpot Training Day 2017.

スマートHTMLコンテンツの作成方法

更新日時 July 12, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Pro & Enterprise
スマートコンテンツは、ウェブサイト上で訪問者に合わせたコンテンツを提供するうえで非常に役立つコンテンツです。これは、リッチテキストモジュールに限りません。スマートHTMLモジュールにより、ウェブサイトのカスタムセクションをパーソナライズしながら、使い慣れた同じオプションとルールを利用できます。
この機能は、Professional版とEnterprise版のお客様のみご利用いただけます。

スマートフォームを使うメリット

コンテンツのパーソナライズは、訪問者の名前を挿入したり、数行のテキストを変えるといったことだけにとどまりません。スマートHTMLモジュールを使用すると、コンテンツのセクション全体を変更できます。たとえば、自分のサイトで新しいライブチャットのウィジェットをテストしているときに、そのサイトを訪問している顧客にのみ表示して、それ以外には表示しないようにするために、スマートHTMLモジュールを使用できます。

この機能があなたのサイトでも有益なものであれば、幸いです。HubSpotページまたはHubSpotテンプレート上にスマートHTMLモジュールをセットアップするには、以下の手順に従ってください。

HubSpotページの場合の手順

HubSpotページ上にスマートHTMLモジュールを作成するには、以下の手順に従ってください。

1.Site Pages(サイトページ)またはLanding Pages(ランディングページ)に移動する

既存ページに移動するか、新しいページを作成します。このためには、[Content(コンテンツ)] > [Site Pages(サイトページ)]または[Content(コンテンツ)] > [Landing Pages(ランディングページ)]の順に移動します。 ([Site Pages(サイトページ)]が表示されない場合は、[Landing Pages(ランディングページ)]を選択してください。)
HubSpot Help article screenshot

2.ページを新規作成または編集する

[Landing Pages(ランディングページ)]または[Site Pages(サイトページ)]に移動したら、既存のページを編集するか、青い[Create a new website page(新規ウェブサイトページを作成)]ボタンまたは[Create a new landing page(新規ランディングページを作成)]ボタンをクリックします。
HubSpot Help article screenshot

3.モジュールをスマート設定する

HubSpotページに移動したら、通常はコードコンテンツを編集したり挿入したりするページの左側にあるカスタムHTMLモジュールに移動します。このHTMLモジュールをスマート設定するには、まず、ターゲットではない訪問者向けに設定しているデフォルトコードに問題がないことを確認する必要があります。 

設定したデフォルトのHTMLで問題がない場合は、そのモジュールにマウスポインターを置いて、編集のオプションが表示されたらスマートアイコンをクリックして開始します。

HubSpot Help article screenshot

4.スマートコンテンツのタイプを選択および作成する

この時点でターゲットとする訪問者を決定している必要があります。使用するスマートコンテンツのタイプを選択します。オプションは、国、デバイスタイプ、流入元、コンタクトリストメンバーシップ、ライフサイクルステージの5つです。ここでは、作成するスマートコンテンツのタイプを1つだけ選択できます。 オプションを1つ選択したら、[Next step(次のステップ)]をクリックします。
HubSpot Help article screenshot
タイプを決定し、その条件を選択したら、青いボタンをクリックして、次のステップへと進みます。
HubSpot Help article screenshot

5.スマートルールをカスタマイズする

ここで、スマートルールの内容を設定します。作成したルールのHTMLコンテンツ領域が表示されます。ここで、新しいスマートルールで表示するHTMLコンテンツを追加できます。このコンテンツの編集が終了したら、[Done(完了)]をクリックします。
HubSpot Help article screenshot
これで、ウェブページ用のスマートHTMLを設定できました。

HubSpotテンプレートの場合の手順

HubSpotテンプレート上にスマートフォームを作成するには、以下の手順に従ってください。

1.Design Manager(デザインマネージャー)に移動する

既存のテンプレートに移動するか、新しいテンプレートを作成します。このためには、[Content(コンテンツ)] > [Design Manager(デザインマネージャー)]の順に移動します。
HubSpot Help article screenshot

2.テンプレートを新規作成または編集する

Design Manager(デザインマネージャー)に移動したら、現在のテンプレートの名前をクリックするか、青い[New template(新規テンプレート)]ボタンをクリックします。
HubSpot Help article screenshot

3.モジュールをスマート設定する

テンプレート内で、スマート設定するカスタムHTMLモジュールを見つけます。モジュールを見つけたら、そのモジュール内のギアアイコンをクリックし、表示されるドロップダウンメニューから[Make smart(スマートにする)]を選択します。
HubSpot Help article screenshot

4.スマートコンテンツのタイプを選択および作成する

この時点でターゲットとする訪問者を決定している必要があります。使用するスマートコンテンツのタイプを選択します。オプションは、国、デバイスタイプ、流入元、コンタクトリストメンバーシップ、ライフサイクルステージの5つです。ここでは、作成するスマートコンテンツのタイプを1つだけ選択できます。オプションを1つ選択したら、[Next step(次のステップ)]をクリックします。
HubSpot Help article screenshot
タイプを決定し、その条件を選択したら、青いボタンをクリックして、次のステップへと進みます。
HubSpot Help article screenshot

5.スマートルールをカスタマイズする

ここで、スマートルールの内容を設定します。作成したルールのHTMLコンテンツ領域が表示されます。ここで、新しいスマートルールで表示するHTMLコンテンツを追加できます。このコンテンツの編集が終了したら、[Done(完了)]をクリックします。
HubSpot Help article screenshot
これで、テンプレート用のスマートHTMLを設定できました。

前の記事

次の記事