ハイブリッドメールテンプレートの作成方法

このページで学べること

Klaviyo のドラッグ&ドロップ エディタと互換性のあるカスタム HTML テンプレート（例：ハイブリッド テンプレート）の作成方法について説明します。次の手順に従うと、ドラッグ＆ドロップ エディタでのみ利用できる機能（例：商品ブロックやユニバーサルコンテンツ ブロック）へのアクセスを維持したまま、完全にカスタムの HTML メールをデザインできます。

既存のHTMLテンプレートをドラッグ＆ドロップテンプレートとして再構築するには、HTMLからドラッグ＆ドロップへのコンバージョンを使用します。KlaviyoはAIを使用して、編集可能なブロックでデザインを再作成します。送信する前に、変換されたレイアウトとコンテンツを確認してください。カスタムHTMLを維持しつつ、特定の領域にのみ編集可能なブロックを追加したい場合は、ハイブリッドテンプレートを使用してください。

HTML テンプレートにコードスニペットを追加する

以下の各コードスニペットは、編集可能な領域を1つ作成します。その領域内には、ドラッグ＆ドロップブロックを複数追加できます。テンプレート内で別々の領域を編集可能にするには、領域ごとにスニペットを追加してください。

メールのテーブルレイアウト内の<tr>に、各<td>スニペットを配置してください。data-klaviyo-region-width-pixelsを、その領域の幅（ピクセル）に設定してください。例では600を使用しています。

たとえば、ドラッグ＆ドロップ エディターを使用して画像ブロックと表ブロックを追加する場合は、以下の カスタマイズ可能な画像ブロックを追加する 手順に従ってください。テンプレートを Klaviyo にアップロードしてキャンペーンまたはフローで使用すると、画像ブロックの上または下にブロックを追加できるようになります。

マーケティングメールのテンプレートをインポートする前に、{% unsubscribe %}などの購読解除タグを含めてください。テンプレートを.htmlファイルとして保存してください。

編集可能なテキストブロックを追加

1. 任意の HTML エディタを使用して、カスタム HTML テンプレートを作成します。
2. 次のコードスニペットを HTML テンプレートに追加します。テンプレート内でテキストブロックを追加したい場所に配置します。
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. Klaviyo で、[コンテンツ] > [テンプレート]に進みます。
2. [メール：保存済み]タブを選択します。
3. [作成] > [メールテンプレートをインポート] をクリックします。
4. テンプレートの名前を入力し、HTMLファイルをアップロードして、[テンプレートをインポート]をクリックします。
5. テンプレートタブからテンプレートを開くと、Klaviyo の HTML エディタにテンプレートのコードが表示されます。
   

1. Klaviyo のドラッグ&ドロップ エディターでテンプレートにアクセスするには、キャンペーンまたはフローに追加してください。
2. テンプレートタイプを選択するよう求められた場合は、[ドラッグ&ドロップ]を選択してください。

1. テンプレートギャラリーで、メール：保存済みを選択し、インポートしたテンプレートを選択して、テンプレートを使用をクリックします。
2. Hello world! と書かれたテキストブロックに注意してください。これは編集可能なテキストブロックです。
3. 必要に応じて、追加のブロックをテキストブロックの上または下にドラッグ＆ドロップします。

カスタマイズ可能な画像ブロックを追加

1. 任意の HTML エディタを使用して、カスタム HTML テンプレートを作成します。
2. 次のコードスニペットを HTML テンプレートに追加します。テンプレートをインポートした後、画像ブロックを追加したい場所に必ず配置してください。
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>

1. 必要に応じて、div内にプリセット画像を追加します。以下のサンプル画像URLを公開アクセス可能な画像URLに置き換え、リンクと代替テキストをご自身の内容に置き換えてください：

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="https://www.klaviyo.com/"><img src="https://example.com/my_image.png" alt="My Image" /></a>
    </div>
</td>

1. Klaviyo で、[コンテンツ] > [テンプレート]に進みます。
2. [メール：保存済み]タブを選択します。
3. [作成] > [メールテンプレートをインポート] をクリックします。
4. テンプレートの名前を入力し、HTMLファイルをアップロードして、[テンプレートをインポート]をクリックします。
5. テンプレートタブからテンプレートを開くと、Klaviyo の HTML エディタにテンプレートのコードが表示されます。
   

1. Klaviyoのドラッグ&ドロップエディタでテンプレートにアクセスするには、キャンペーンまたはフローに追加してください。テンプレートタイプを選択するよう求められた場合は、[ドラッグ&ドロップ]を選択してください。
2. テンプレートギャラリーで、メール：保存済みを選択し、インポートしたテンプレートを選択して、テンプレートを使用をクリックします。
3. 画像ブロックには、画像をアップロードするボタン、または含めた画像のいずれかが表示されます。
4. 必要に応じて、画像ブロックの上または下に追加のブロックをドラッグ＆ドロップします。
   

ユニバーサルコンテンツブロックを追加

このプロセスは、ユニバーサルコンテンツブロックではサポートされていますが、ユニバーサルセクションではサポートされていません。

1. 任意の HTML エディタを使用して、カスタム HTML テンプレートを作成します。
2. 次のコードスニペットをHTMLテンプレートに追加してください。テンプレートをインポートした後、ユニバーサルコンテンツブロックを追加したい場所に配置してください。
   

textCopy

<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div data-klaviyo-universal-block="block_id_1">&nbsp;</div>
</td>

1. block_id_1 をユニバーサルコンテンツブロックの ID に置き換えます。ユニバーサルコンテンツブロックの ID を見つけるには：
   1. [コンテンツ] > [ユニバーサルコンテンツ] に移動します。
   2. ユニバーサルコンテンツのブロックを開いて編集します。
   3. このページの URL は、次の形式になります：https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID。
   4. URL からブロック ID をコピーします。
2. Klaviyo で、[コンテンツ] > [テンプレート]に進みます。
3. [メール：保存済み]タブを選択します。
4. [作成] > [メールテンプレートをインポート] をクリックします。
5. テンプレートの名前を入力し、HTMLファイルをアップロードして、[テンプレートをインポート]をクリックします。
6. テンプレートタブからテンプレートを開くと、Klaviyo の HTML エディタにテンプレートのコードが表示されます。
   

1. Klaviyoのドラッグ&ドロップエディタでテンプレートにアクセスするには、キャンペーンまたはフローに追加してください。テンプレートタイプを選択するよう求められた場合は、[ドラッグ&ドロップ]を選択してください。
2. テンプレートギャラリーで、メール：保存済みを選択し、インポートしたテンプレートを選択して、テンプレートを使用をクリックします。
3. ユニバーサルコンテンツのブロックに注意してください。

単一の コードスニペット で複数の ユニバーサルコンテンツ ブロックを追加できます。そのためには、上記のコードスニペット内で、最初の div 要素の直後に別の div 要素を追加し、別のブロックの ID を使用してください。

別の種類のブロック（例：商品ブロック、表ブロック）を追加します。

1. 任意の HTML エディタを使用して、カスタム HTML テンプレートを作成します。
2. 次のコードスニペットを HTML テンプレートに追加します。テンプレートをインポートした後、ブロックを追加したい場所に配置します。
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. Klaviyo で、[コンテンツ] > [テンプレート]に進みます。
2. [メール：保存済み]タブを選択します。
3. [作成] > [メールテンプレートをインポート] をクリックします。
4. テンプレートの名前を入力し、HTMLファイルをアップロードして、[テンプレートをインポート]をクリックします。
5. テンプレートタブからテンプレートを開くと、Klaviyo の HTML エディタにテンプレートのコードが表示されます。
   

1. Klaviyoのドラッグ&ドロップエディタでテンプレートにアクセスするには、キャンペーンまたはフローに追加してください。テンプレートタイプを選択するよう求められた場合は、[ドラッグ&ドロップ]を選択してください。
2. テンプレートギャラリーで、メール：保存済みを選択し、インポートしたテンプレートを選択して、テンプレートを使用をクリックします。
3. Hello world! と書かれたテキストブロックに注意してください。別のブロック（例: 商品ブロック）をこのブロックの下にドラッグしてください。
4. テキスト ブロックを削除し、必要に応じて追加のカスタム ブロックを追加します。
   

サンプルのハイブリッドメールテンプレートコード

以下の例は、テキスト ブロック用のハイブリッド コードスニペットを含む機能的な HTML ファイルを示しています。このコードを使用して、ハイブリッド エディターの機能をテストします。

  <html>
  <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>A simple hybrid email</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        margin: 20px;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }
      .container {
        margin: 0 auto !important;
        width: 600px;
      }
      .wrapper {
        box-sizing: border-box;
        padding: 15px;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="main">
        <tr>
          <td class="wrapper">This is a very simple HTML email</td>
        </tr>
        <tr>
          <td class="wrapper">
            <table>
              <tr>
                <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                  <div class="klaviyo-block klaviyo-text-block">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

絵文字とハイブリッド メールテンプレート

2024年2月時点で、すべての絵文字がすべてのKlaviyoメールエディタ（ドラッグ＆ドロップエディタ、ハイブリッドエディタ、テキストのみエディタ、カスタムHTMLエディタ）でサポートされています。

ハイブリッドメールをプレビューする

受信者に送信する前に、デスクトップとモバイルでメールをプレビューし、テストメールを送信してください。使用予定のキャンペーンまたはフローで、レイアウト、画像、リンク、動的コンテンツがある場合はその内容を確認してください。エディタを離れる前に、変更内容の保存が完了するまで待ってください。

達成できること

これらの手順を完了すると、コードスニペットで定義した領域内で、ドラッグ&ドロップブロックを追加および編集できます。周囲のカスタムHTMLは、これらの編集可能な領域の外側に残ります。

その他のリソース