CMS-General

HubSpotでカスタムコードテンプレートを作成

更新日時 November 21, 2018

対象製品

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic

テンプレートビルダーを使用すると、コンテンツ作成者はより柔軟にコンテンツを構成でき、デザイナーはHTMLを書く時間を節約できます。またデザインマネージャーツールを使用すると、デザイナーが、HTMLを使用したテンプレートをゼロから作成できるようになります。  

この記事では、HubSpotとカスタムEメールテンプレートをコーディングする場所と、どの変数をカスタムEメールテンプレートに含めるのかを説明します。デザイナーが最初からコーディングテンプレートをコーディングできない場合は、HubSpotアカウントにある既成のテンプレートを使用するか、 テンプレートマーケットプレイス既成のテンプレートを購入してください。

注意:HTMLサイトまたはHTML Eメールをゼロからコーディングすることによって、自動的にテンプレートがレスポンシブになるわけではありません。

新しいHTML & HUBLファイルを作成

{{ local.navDesignManager }}

[アクション]>[新規ファイル]をクリックして新しいファイルを作成します(フォルダーアイコンフォルダーをクリックしてファインダーを展開する必要がある場合があります)。

ダイアログボックスで、[HTML & HUBL]をクリックします。

コードエディター

新しいファイルの詳細を入力します。

  • 何を作成しますか?[テンプレート]または[パーシャルテンプレート]を選択します。 
  • テンプレートタイプ:コーディングするテンプレートのタイプ(ページ、ブログ、または Eメール)を選択します。
  • ファイル名:ファイルに名前を付けます。
  • [作成]をクリックします。

次に、ページテンプレートまたはEメールテンプレートのHTMLを記述します。HubSpotコードエディターでは、インデント、HTML構文のハイライト、終了タグが自動的に処理されます。変更を公開しようとすると、コード内のエラーにはエラーメッセージでフラグが付きます。コードエディターの下部にあるエラーコンソールにエラーまたは警告の詳細が表示され、これらのエラーや警告を修正するための提案が表示されます。

error-console

カスタムデザインの詳細については、HubSpotデザイナーのドキュメントを参照してください。フィルタータグやアイコンなどのコードモジュールオプションについて追加のドキュメントがあります。

完了したら、[変更を公開]をクリックして、テンプレートまたはHTMLファイルを公開します。

必要なHubLタグを追加する

HTMLを書き終わり、ファイルを公開しようとした場合に、必要なHubLタグがコードに含まれていないことを知らせるメッセージが表示されます。HubLタグは、コードをHubSpotの設定とコンテンツエディターに接続します。必要なテンプレート変数HubLモジュールタグの詳細を参照してください。

Eメールテンプレートには、必須Eメールと CAN-SPAMトークンを含めます。CAN-SPAMトークンの詳細については、HubLドキュメントを参照してください。

必須CAN-SPAMトークンは、次の2つの方法で含めることができます。

1.CAN-SPAMのサブスクライブ解除セクション「{{unsubscribe_section}}」に読み込む1つのトークンを含めます。このトークンが使用される場合は、テキストとリンクの言語およびスタイルをフォーマットできません。表示される「{{unsubscribe_section}}」の例を以下に示します。

次のトークンを個別に追加する必要があります。

{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

2.必要な個別のサブスクライブ解除リンクとアドレスのトークンを含めます。
{{site_settings.company_name}}
{{unsubscribe_link}}または{{unsubscribe_link_all}}(少なくとも1つ含める)
{{unsubscribe_anchor}}
{{site_settings.company_name}}
{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

トークンを個別に使用すると、トークンとリンクの周りに言葉を追加してそれらを必要なスタイルや言語でフォーマットすることができます。

HTMLに複製

ゼロからコーディングする代わりに、HubSpotのテンプレートの1つをHTMLに複製することもできます。テンプレートをHTMLに複製すると、テンプレートのHTMLやHubLにアクセスできるようになります。た、作成したHubSpotテンプレートのリバースエンジニアリングとしても最適です。

既存のテンプレートのコードバージョンを作成するには、レイアウトエディターで、[アクション]>[HTMLに複製]をクリックします。HTMLファイルは、デザインマネージャーの新しいタブで開きます。その名前は、元のテンプレート名にcopyが追加されたものになります。

HubSpotのヘルプ記事のスクリーンショット