カスタマーハブ向けにカスタムHTMLブロックとCSSブロックを作成する方法

このページで学べること

独自のHTMLとCSSを使用して、カスタマーハブ向けのカスタムブロックを作成する方法。標準のコンテンツブロックのフィールドでは柔軟性が不十分な場合に、ロイヤルティの進捗カード、プロモーションモジュール、比較表などのブランドコンテンツを作成するために使用します。

始める前に

このガイドはコンテンツブロックの内容を基にしています。コンテンツブロックを作成したことがない場合は、カスタマーハブ用のコンテンツブロックを作成する方法から始めてください。単一のブロックではなくカスタマーハブ全体の見た目を変更する場合は、カスタマーハブのスタイルを設定する方法をご覧ください。

カスタムHTMLブロックでできること

カスタムHTMLブロックは高度なコンテンツブロックで、HTML用とCSS用の2つのコードフィールドがあります。HTMLはブロックの構造とコンテンツを定義し、CSSはスタイル、レイアウト、レスポンシブ動作を制御します。カスタムHTMLブロックは次の目的で使用します：

• Klaviyoプロファイルのポイントまたはティアデータを使用して、ロイヤルティ進捗カードまたは特典の概要を表示します。
• 比較表を作成します（例：メンバーシップの階層やプランを説明する場合）。
• ブランドに合ったプロモーションバナーまたはモジュールを作成します。
• 標準の見出し、段落、画像フィールドではできない方法でコンテンツをレイアウトします。
• サイト上で定義されたカスタム要素を参照することで、サードパーティーのウィッシュリストツールやレビューツールなどの機能を追加できます。

カスタムHTMLブロックは、他のコンテンツブロックと並んでおすすめタブに表示され、サイト上のコンテンツブロックでも使用できます。ログインステータス、グループに基づく表示制御、スケジュール設定、表示コンテキスト設定は、他のコンテンツブロックと同様に機能します。

サポートされているものとされていないもの

KlaviyoはHTMLとCSSをサニタイズし、CSSの適用範囲をブロックに限定するため、カスタマーハブやウェブサイトのほかの部分を変更できません。次の制限事項にご注意ください：

• サポート対象： 構造とコンテンツにはHTML、スタイルとレイアウトにはCSS、プロファイルデータにはKlaviyoパーソナライゼーションタグ、追加機能にはサイト上で定義されたカスタム要素を使用します。
• JavaScriptはブロック内ではなくサイト上で動作します：HTMLフィールドに直接JavaScriptを書くことはできません。そこに入力した内容はすべて削除され、保存されません。サードパーティーの外部連携を含む機能を追加するには、サイト上でカスタム要素を定義し、ブロック内で参照します。以下のカスタム要素でサードパーティーツールを統合するを参照してください。
• サポート対象外：ページ全体のスタイル設定など、ブロックの外部に影響するCSS、またはKlaviyoのネイティブブロックのマークアップの編集。
• データ：表示するデータはすべて、Klaviyoのプロファイルプロパティからパーソナライゼーションタグを通じて取得する必要があります。イベントデータは未対応です。

カスタムHTMLブロックを作成

1. ウェブサイトタブのカスタマーハブに移動します。
2. カスタマーハブのナビゲーションでデザインを選択します。
3. ハブを編集をクリックして、カスタマーハブエディターを開きます。
4. コンテンツブロックを追加するには、左側のナビゲーションバーで[+]を選択します。
5. 独自に作成をクリックし、次にコンテンツパネルの上部でHTMLを選択して、HTMLとCSSのフィールドを分けて使用します。
6. 内部名を入力してください。Klaviyoはこの名前を使用してブロックのクリックをレポートします。ブロックの作成後に変更することはできません。
7. HTMLフィールドとCSSフィールドにコードを入力してください。以下のHTMLとCSSの記述をご覧ください。
8. ログインステータス、グループベースの表示、スケジュール設定、表示コンテキストを使用して、ブロックを表示する対象を設定します。
9. ライブプレビューを確認し、検証に関する警告があれば解消してください。HTMLを選択した状態で、公開をクリックしてブロックを保存します。ウェブサイトに表示するには、カスタマーハブも公開されている必要があります。

HTMLとCSSを記述してください

HTMLを追加

HTMLフィールドを使用して、見出し、段落、リスト、リンク、画像、表などの標準要素でブロックの構造を作成します。通常のアンカータグを使用して、ウェブサイト上のページにリンクします。ブロック内にJavaScriptは記述できないため、ボタンとリンクはURLを指すようにしてください。よりインタラクティブなものが必要な場合は、カスタム要素を使用してください。

CSSでスタイル設定

CSSフィールドを使用して、間隔、色、タイポグラフィ、レスポンシブレイアウトを制御します。CSSはこのブロックにのみ適用されます。デフォルトでは、カスタムHTMLブロックは他のコンテンツブロックに合わせてスタイルが適用されるため、変更したい部分にのみCSSを記述すれば十分です。

• rewards-cardなど、要素に独自のクラス名を付け、CSSでそれらのクラスを指定してください。
• 小さい画面でもブロックが適切に表示されるように、@mediaルールを追加してください。
• font-family: inheritを使用すると、テキストが「スタイル」タブで選択したフォントと一致します。

パーソナライぜーションを追加

HTMLでKlaviyoのパーソナライゼーションタグを使用して、ロイヤルティポイント残高などのプロファイルデータを表示します。買い物客がデータを提供していない場合にブロックに空白が表示されないよう、必ずデフォルト値を含めてください。プロファイルデータは、サインイン済みまたは識別済みの買い物客に対してのみ表示されます。それ以外の人にはデフォルト値が表示されます。

例：ロイヤルティポイントカード

この例では、特典ページにリンクするボタンとともに、買い物客のティアとポイント残高を表示しています。プロパティ名（loyalty_pointsとMembership Tier）を、ロイヤルティの外部連携が同期するプロファイルプロパティに置き換え、リンクURLを更新してください。

<div class="rewards-card">
  <p class="rewards-eyebrow">{{ person|lookup:'Membership Tier'|default:'Member' }} status</p>
  <h3 class="rewards-points">{{ person|lookup:'loyalty_points'|default:'0'|floatformat:0 }} points</h3>
  <p class="rewards-copy">Redeem your points for discounts on your next order.</p>
  <a class="rewards-button" href="/pages/rewards">Redeem rewards</a>
</div>

.rewards-card {
  padding: 20px;
  border-radius: 12px;
  background: #f6f1ea;
  color: #232323;
  font-family: inherit;
}

.rewards-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rewards-points {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
}

.rewards-copy {
  margin: 0 0 16px;
  font-size: 14px;
}

.rewards-button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #232323;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}

@media (max-width: 480px) {
  .rewards-card {
    padding: 16px;
  }

  .rewards-points {
    font-size: 24px;
  }
}

例：メンバーシップ比較表

この例では、2つの会員ランクを比較します。このラッパーを使用すると、狭い画面でレイアウトを崩さずにテーブルを横方向にスクロールできます。

<div class="compare-wrap">
  <table class="compare">
    <thead>
      <tr>
        <th></th>
        <th>Standard</th>
        <th>VIP</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Free shipping</th>
        <td>Orders over $75</td>
        <td>Always</td>
      </tr>
      <tr>
        <th scope="row">Early access</th>
        <td>No</td>
        <td>Yes</td>
      </tr>
      <tr>
        <th scope="row">Birthday reward</th>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>

.compare-wrap {
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.compare th,
.compare td {
  padding: 10px 12px;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
}

.compare thead th {
  background: #f6f1ea;
}

カスタム要素でサードパーティツールを連携

カスタムHTMLブロックにJavaScriptを直接記述することはできませんが、サイトで定義されているカスタム要素を参照することで、JavaScriptで動作する機能を追加できます。カスタム要素とは、<wishlist-widget>のようにハイフンを含む名前を持つ再利用可能なHTMLタグで、開発者がストアフロント上でJavaScriptに登録するものです。ブロックにはタグのみが含まれ、サイトのコードが処理を行います。ウィッシュリスト、レビュー、またはロイヤルティアプリなどのサードパーティーツールのコンテンツを表示するには、この方法を使用してください。

仕組み

1. 開発者、またはサードパーティアプリが、ストアフロント上でカスタム要素を定義します。通常、これはテーマ、またはアプリ独自のスクリプトによって行われます。
2. HTMLフィールドで、要素を表示したい場所にタグを追加します。ハイフンを含むタグ名はすべて使用できます。
3. 必要に応じて、パーソナライゼーションタグを使用してプロファイルデータを属性として要素に渡すこともできます。
4. ブロックを公開します。サイトで要素が定義されているページでカスタマーハブが読み込まれると、サイトのコードによって、その要素がブロック内にレンダリングされます。

この例では、ウィッシュリスト要素をブロック内に配置し、購入者のメールアドレスを渡します。タグ内のリンクは、ページ上で要素が定義されていない場合に表示されるフォールバックコンテンツです。タグ名と属性を、使用しているサードパーティツールのものに置き換えてください。

<div class="wishlist-block">
  <h3>Your wishlist</h3>
  <wishlist-widget customer-email="{{ person.email }}" max-items="4">
    <a href="/pages/wishlist">View your wishlist</a>
  </wishlist-widget>
</div>

重要ポイント

• 要素はサイト上で定義されている必要があります。それを定義するスクリプトがサイトで読み込まれているページでのみ機能します。Klaviyoがお客様に代わってサードパーティスクリプトを読み込むことはありません。要素が利用できない場合でも買い物客に有用な内容が表示されるように、タグ内にフォールバックコンテンツを追加してください。
• パーソナライゼーションは属性で機能します。同じルールがブロック内のほかの場所にも適用されます。プロファイルデータは、サインイン済みまたは識別済みの買い物客にのみ表示されるため、それ以外の全員に向けてデフォルト値を含めてください。
• カスタム要素はサイトのスタイルを継承します。カスタマーハブはiframeやshadow DOM内ではレンダリングされないため、カスタム要素はサイトのCSSを引き継ぎ、その影響を受ける可能性があります。ブロックのCSSから要素のタグにスタイルを適用することもできます。
• JavaScriptはブロックではなく、サイト上に記述してください。HTMLフィールドに入力したJavaScriptは削除され、保存されません。サイト上のカスタム要素で機能を定義してから、その要素をブロックから参照してください。
• サードパーティのコードとデータについては、お客様の責任となります。サードパーティツールにプロファイルデータを渡す前に、その行為がプライバシーに関する義務を満たしていることを確認してください。Klaviyoサポートでは、カスタム要素や、その背後にあるサードパーティツールのトラブルシューティングはできません。

サイト上のブロックでカスタムHTMLを使用する

カスタムHTMLは、オンサイトのコンテンツブロックでも、［For you］タブと同じように動作します。HTMLフィールドとCSSフィールドを使用して、同じコンテンツブロックエディタでブロックを作成します。また、パーソナライゼーションタグ、カスタム要素、クリックトラッキングなど、この記事の内容はすべて適用されます。

ブロックがストアフロントに表示される際は、次の点に注意してください：

• サイトのCSSがブロックに影響する可能性があります。Onsiteブロックはページ内に直接レンダリングされるため、サイトのスタイルが見た目に影響する可能性があります。公開後、ライブページでブロックを確認してください。
• プレビューは公開中のページと異なる場合があります。 エディタのプレビューでは、サイト上のすべてのスタイルを再現できない場合があります。
• カスタム要素は、ブロックが表示されるすべてのページで読み込む必要があります。カスタム要素を定義するスクリプトが、ブロックが表示される各ページで読み込まれるようにしてください。

サイト用のコンテンツブロックでカスタムHTMLを使用する

カスタムHTMLは、カスタマーハブのドロワー内ではなくストアフロントページに直接表示される、オンサイトコンテンツブロックでも機能します。同じコンテンツブロックエディタで作成し、同じルールが適用されます。個別のHTMLフィールドとCSSフィールドを使用するにはHTMLを選択し、プロファイルデータにはパーソナライゼーションタグを使用し、追加した機能についてはカスタム要素を参照してください。オンサイトでは、いくつかの点で動作が異なります：

• サイトのCSSの影響がより大きくなります。ブロックはページに直接レンダリングされるため、カスタマーハブのドロワー内よりも、サイトのスタイルの影響を受けやすくなります。ライブページでCSSをテストしてください。
• プレビューはページと完全には一致しない場合があります。 オンサイトプレビューを使用してブロックを確認し、その後、公開後のブロックがストアフロントでどのように表示されるかを確認してください。
• カスタム要素は、ブロックが表示されるすべてのページで読み込む必要があります。カスタム要素を参照する場合は、オンサイトブロックが表示される各ページで、それを定義するスクリプトが読み込まれていることを確認してください。

ブロックのプレビューとテスト

HTMLとCSSを編集すると、プレビューが更新されます。コードにエラーがある場合、エディターに検証メッセージが表示されるため、公開前に修正できます。公開する前：

• プレビュー表示を使用してプロファイルを選択し、ログイン時とログアウト時の表示を比較します。
• パーソナライゼーションタグで使用されるデータが不足しているプロファイルでテストし、デフォルト値が適切に表示されていることを確認してください。
• モバイルとデスクトップの表示幅でブロックを確認してください。

ブロックのパフォーマンスを追跡

Klaviyoは、カスタムHTMLブロックでの各クリックを、ブロックの内部名を使用してCustomer Hub clicked on content blockイベントとして追跡し、他のコンテンツブロックと同様にレポートします。Klaviyoは、ブロックがクリックされたかどうかは記録しますが、その中の個々のリンクやボタンのうち、どれがクリックされたかまでは記録しません。

ベストプラクティス

• シンプルにしましょう。 デフォルトのスタイル設定をベースにし、必要なものだけを上書きしてください。
• 個人情報を保護してください。 ブロックがログイン済みまたは認識された顧客に表示される場合は、機微な個人情報は含めないでください。カスタムブロックに追加するデータのプライバシーは、お客様が責任を負います。
• 常にデフォルト値を設定してください。匿名の訪問者やデータが不足しているプロファイルでも、完全なブロックが表示される必要があります。
• モバイルファーストでデザインします。カスタマーハブへのアクセスの多くは小さな画面で行われるため、まずは幅の狭いレイアウトをテストしてください。
• 名前ブロックは明確に命名してください。内部名はレポート作成で使用され、後から変更できません。

トラブルシューティング

ブロックを公開できません

HTMLフィールドとCSSフィールドで検証メッセージを確認し、エラーを修正してから、再度公開してください。ブロックがJavaScriptに依存している場合は、HTMLフィールドに入力したJavaScriptは削除され、保存されない点にご注意ください。その機能をサイト上のカスタム要素に移し、ブロック内で参照してください。

スタイルが反映されません

CSSはブロック内に限定されるため、セレクタは自身のHTML内の要素に一致する必要があります。クラス名にタイプミスがないか確認してください。CSSではブロック外のものにスタイルを適用できません。

パーソナライゼーションに空白またはデフォルトのテキストが表示される

プロファイルデータは、サインイン済み、または識別済みの購入者にのみ表示されます。タグ内のプロパティ名が、大文字/小文字を含めてプロファイルプロパティと完全に一致していることを確認し、デフォルト値を追加します。

ブロックが、プレビューとサイト上で異なる表示になります

サイトのCSSは、特にページ内で直接表示されるオンサイトブロックにおいて、カスタマーハブの表示方法に影響する可能性があります。ライブサイトで公開済みのブロックを確認し、必要に応じてCSSを調整してください。

カスタム要素が空白になる、または表示されない

要素は、それを定義するスクリプトがサイトで読み込まれているページでのみレンダリングされます。ブロックが表示されるすべてのページでスクリプトが読み込まれることを確認し、HTML内のタグ名が開発者が登録した名前と一致していることを確認してください。代わりにフォールバックコンテンツが表示される場合、そのページでは要素が定義されていません。

コードを書くのを手伝ってください。

Klaviyoサポートでは、カスタムHTMLとCSSの作成やデバッグはできません。サポートが必要な場合は、開発者またはKlaviyoパートナーと連携してください。