Klaviyoにメールをアップロードする

EmailifyにはKlaviyoとの連携機能が組み込まれており、FigmaプラグインからHTMLメールをKlaviyoのテンプレートに直接アップロードできます。

動画チュートリアル：Klaviyoにメールをアップロードする

この動画では、FigmaのEmailifyプラグインからKlaviyoにHTMLメールをアップロードする方法を紹介しています。

テキストの段落でKlaviyoのテンプレートリンク（例：{{ event.url }}）が必要な場合、Figma標準のリンク欄では無効なURLとしてブロックされます。これを回避するには、代わりにEmailify独自のKlaviyo用リンク形式https://klaviyo.invalid/?{{ event.url }}を使ってください。エクスポートしたHTMLには、Klaviyoのテンプレート構文がそのまま出力されます。

Emailifyのエクスポートパネルで、ドロップダウンリストからKlaviyoオプションを選択し、有効なKlaviyoのプライベートAPIキーを貼り付けます（以下の手順で取得できます）。

  1. Klaviyoにログインし、KlaviyoのAPI Keys設定ページに移動します。
  2. Create Private API Keyボタンをクリックします。
  3. 名前（例：「Emailify API Key」）を付け、Custom Keyラジオボタンをクリックします。
  4. TemplatesのAPI ScopesのラジオボタンをRead/Write Accessに設定します（その他のAPIスコープはNo Accessのままでかまいません）。
  5. APIキーの作成完了画面で、Your Private Keyセクションの下にあるCopyアイコンボタンをクリックします。
  6. コピーしたAPIキー（pk_b3338b071136f98817d2a0e0a9581137eeのような形式）をEmailifyプラグインに貼り付けます。

準備ができたら、Upload To Klaviyoボタンをクリックすると、Figmaで選択したメールのHTMLへのエクスポートが始まり、Klaviyoのテンプレートページに自動でアップロードされます。

HTMLメールのサイズが102kb未満なのに、Klaviyoから送信したメールがGmailで途中で切れてしまう場合は、Klaviyoでリンクトラッキングがオンになっていることが原因です。リンクトラッキングは元のリンクURLをはるかに長い「トラッキングURL」に自動で置き換えるため、送信されるHTMLのファイルサイズが大きくなります。これを防ぐには、必要に応じてKlaviyoアカウントでリンクトラッキング・GAの設定をオフにしてください。

EmailifyからアップロードしたKlaviyoテンプレートを更新する ​

毎回新しいテンプレートを作成するのではなく、同じKlaviyoテンプレートをEmailifyで自動的に更新したい場合は、Klaviyoオプションを選択した状態で、プラグインのエクスポート設定にあるEnable Updatable Templatesトグルを有効にしてください（任意）。

最初のアップロードが成功すると、Figmaのフレーム名にklaviyoTemplateIdの値が自動で追加されます。次回同じフレームをKlaviyoにアップロードする際、Emailifyは保存されたテンプレートIDを再利用します。

テンプレートを初めてアップロードする前に、Enable Updatable Templatesトグルが有効になっていることを確認してください。最初のアップロードで、元のKlaviyoテンプレートIDがFigmaのフレーム名に保存され、以降の再アップロードで使われます。

この機能で更新されるのは、Klaviyoのテンプレートライブラリにある保存済みテンプレートのみです。そのテンプレートがすでにKlaviyoのキャンペーンやフローで使われている場合、Klaviyoはそのメッセージ用にコピーを作成するため、Emailifyから再アップロードしても、使用中のコピーは自動では置き換わりません。

アップロードしたKlaviyoのメールテンプレートをキャンペーンで使う ​

  1. Klaviyoで新しいメールキャンペーンを作成します
  2. Templatesページの一覧のEmail:savedタブで、新しいテンプレート名をクリックします。
  3. ポップアップのプレビューウィンドウでUse templateボタンをクリックします。
  4. コードエディターのページでSaveボタンをクリックします（この手順は重要です）
  5. 「Your changes have been saved.」と表示されたら、Back to Contentボタンをクリックします。
  6. 必要に応じてメールキャンペーンのスケジュールを設定します。

KlaviyoでカスタムHTMLテンプレートをA/Bテストする ​

KlaviyoはカスタムHTMLメールのA/Bテストに対応していますが、テストを作成すると、Variation BはVariation Aとまったく同じコピーとして自動で作成されます。2つの異なるEmailifyのデザインをテストするには：

  1. Figmaで、2つのEmailifyフレームに分かりやすい名前（例：Summer Sale - Test AとSummer Sale - Test B）を付けます。Emailifyはこのフレーム名を、Klaviyoの保存済みテンプレートの名前として使います。
  2. 両方のフレームを、別々の保存済みテンプレートとしてKlaviyoにアップロードします。
  3. Test AのテンプレートでKlaviyoのキャンペーンを作成し、件名の上にあるCreate A/B testをクリックします。KlaviyoがVariation AのコピーとしてVariation Bを作成します。
  4. ブラウザの別のタブで、Content > Templatesから保存済みのTest Bテンプレートを開き、コードエディターを開いて、HTMLをすべてコピーします。
  5. キャンペーンに戻ってVariation Bを開き、Editをクリックして、コピーされたTest AのHTMLをTest BのHTMLに置き換え、変更を保存します。
  6. 両方のバリエーションに分かりやすい名前を付けてから、それぞれのバージョンをプレビューまたはテスト送信し、キャンペーンのスケジュールを設定する前にプレーンテキスト版を確認します。

メールのデザインやコンテンツをテストする場合は、件名と送信者情報を同じにして、変わる要素が1つだけになるようにしてください。

テストの設定や勝者を決める指標の選び方について詳しくは、KlaviyoのA/Bテストのガイドをご覧ください。

Klaviyoでテキスト・画像を編集可能にする（任意） ​

重要：Klaviyoの新しいエディターは、編集可能なテキストブロックやボタンに余白を自動で追加します。 残念ながら、Figmaの元のデザインどおりの見た目にするには、下の「Klaviyoの編集可能なキャンペーンで自動追加される余白を修正する」セクションの動画に従って、これらの値を1つずつ手作業で「0」に戻す必要があります。

Klaviyoにテンプレートをアップロードした後もコンテンツブロックを編集できるようにしたい場合は、EmailifyのエクスポートオプションでEditable Contentトグルを有効にしてから、Klaviyoで以下の手順を行います。

  1. Klaviyoで新しいメールキャンペーンを作成します
  2. キャンペーンのContentステップでDrag and Dropオプションをクリックします
  3. My Templatesタブをクリックし、新しいテンプレートをクリックします
  4. Saveボタンをクリックし、Back to Contentをクリックします
  5. Edit Emailボタンをクリックします

Klaviyoの編集可能なキャンペーンで自動追加される余白を修正する ​

Klaviyoがエディターを更新し、2023年6月6日以降すべてのテンプレートで新しいエディターの使用を必須にしたため、EmailifyでEditable Contentトグルを有効にしてHTMLメールをエクスポートすると、残念ながらKlaviyoはデフォルトで各テキスト要素の周りに約18pxの余白を自動で追加します。この余白は、編集可能なテンプレートの場合にKlaviyoがHTMLに挿入する新しい<td>要素に、インラインのstyle属性として付けられます。

EmailifyでForce the padding added by Klaviyo's new editor to be 0pxトグルを有効にすると、すべてのモバイルクライアントと、GmailなどのOutlook以外のデスクトップクライアントでこの余白を取り除くCSSが自動で追加されます。ただし、キャンペーン用にKlaviyoのエディターでメールを編集する際、テンプレート内の編集可能なテキストブロックの「Padding」の値をすべて手作業で「0」に変更しない限り、Outlookでは余白が表示されたままになります。

Klaviyoのメールに動的なプロダクトフィードを追加する ​

動画チュートリアル：Klaviyoのメールに動的なプロダクトフィードを追加する

この動画では、Emailify Figmaプラグインを使って、カスタムHTMLテンプレートにKlaviyoのカスタムプロダクトフィードを追加する方法を紹介しています。

EmailifyでHTMLメールテンプレートに動的なKlaviyoのプロダクトフィードを追加するには、EmailifyプラグインのカテゴリタブにあるEcommタブのコンポーネントプリセットを使う方法があります。

Emailifyフレームにコンポーネントを追加したら、追加されたコンポーネント内のYOUR_KLAVIYO_PRODUCT_FEED_NAME_HEREという名前を、Klaviyoアカウントで作成した独自のプロダクトフィード名に置き換える必要があります。

KlaviyoでカスタムHTMLのプロダクトフィードを使うには、EmailifyのエクスポートオプションでEditable Contentトグルを有効にしておく必要もあります。これにより、Klaviyoのテンプレートにアップロードした後、Klaviyoエディターの「Blocks」サイドバーからデフォルトの「Product」ブロックをメールにドラッグ＆ドロップできるようになります。

上の動画チュートリアルで手順を1つずつ確認し、Klaviyoのテンプレートが正しく設定されていることを確かめることをおすすめします。手順どおりに設定しないと、プロダクトフィードのデータが表示されないことがあります。

サポートが必要な場合は、チームの開発者またはKlaviyoのサポート担当者にご相談ください。Klaviyoのこの高度なテンプレート機能のカスタム実装について、当社（Emailify）は技術的な知見の提供やサポートを行うことができません。

Klaviyoのプロダクトフィードをドラッグ＆ドロップするための編集可能領域を手作業で追加する ​

2025年以降、動的なプロダクトフィードのデータを確実に読み込むには、キャンペーンで使う前に、Klaviyo独自のHTMLテンプレートコードエディターで、この編集可能領域をHTMLテンプレートに先に手作業で追加し、テンプレートを保存し直す必要もあるようです。

<table>
  <tr>
    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
      <div class="klaviyo-block klaviyo-text-block">
        Drag and Drop your Klaviyo Product Feed Block Here <br/>
        NOTE: Remove this text element in Klaviyo's editor when you're done! <br/>
        Video Tutorial: <a href="https://www.youtube.com/watch?v=PaRSIxVLYlo" target="_blank">https://www.youtube.com/watch?v=PaRSIxVLYlo</a>
      </div>
    </td>
  </tr>
</table>

Klaviyoのテンプレートエディターで、HTMLテンプレート内の<div dir="auto" lang="en"...の行の上に貼り付けると、テンプレートの先頭に追加されます。

Klaviyoのメールにカート放棄のプロダクトフィードを追加する ​

動画チュートリアル：FigmaでKlaviyoのカート放棄フロー用メールテンプレートを作成する

この動画では、Emailify Figmaプラグインを使って、カスタムHTMLテンプレートにKlaviyoのカスタムのカート放棄フローを追加する方法を紹介しています。

EmailifyでHTMLメールテンプレートに動的なKlaviyoのカート放棄フローのブロックを追加するには、EmailifyプラグインのカテゴリタブにあるEcommタブで、以下のバリアントのコンポーネントプリセットを使う方法があります。

  • Shopify
  • WooCommerce
  • Magento 1
  • Magento 2
  • BigCommerce

これにより、各プラットフォーム用のKlaviyoの商品イベントデータ変数を含むレイヤーが自動で作成されます。なお、これを機能させるには、別途Klaviyoのカート放棄フローを設定する必要があります。

サポートが必要な場合は、チームの開発者またはKlaviyoのサポート担当者にご相談ください。Klaviyoのこの高度なテンプレート機能のカスタム実装について、当社（Emailify）は技術的な知見の提供やサポートを行うことができません。