Customer.ioにメールをアップロードする

EmailifyにはDesign Studioのメールや再利用できるテンプレート向けのCustomer.io APIアップロードと、HTMLを手動でCustomer.ioにコピーするためのZIPエクスポートがあります。

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

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

EmailifyにはCustomer.io向けのエクスポートオプションが2つあります。

  • Customer.io (API)：メールをCustomer.io Design Studioに、メールまたは再利用できるメールテンプレートとして直接アップロードします。
  • Customer.io (Zip)：Customer.ioに手動でコピーできるZIPファイルをエクスポートします。

Customer.io Design Studioに直接アップロードする ​

Emailifyのエクスポートパネルで、ドロップダウンリストからCustomer.io (API) オプションを選択し、有効なCustomer.ioのApp API Keyを貼り付けて、ワークスペースに合ったCustomer.ioのリージョンを選択します。

Customer.ioのワークスペースがEUでホストされている場合は、EmailifyでEUリージョンを選択してください。それ以外の場合は、デフォルトのUSリージョンのままにします。

Upload As設定で、Customer.ioに再利用できるメールテンプレートと通常のDesign Studioのメールのどちらを作成するかを選びます。後方互換性のため、デフォルトはTemplateです。準備ができたらUpload To Customer.ioボタンをクリックします。Figmaで選択したメールのHTMLエクスポートが始まり、Customer.io Design Studioに自動でアップロードされます。

Customer.ioのワークスペースでDesign Studioのメールを作成できるCustomer.ioのApp APIキーが必要です。

Customer.io API経由でアップロードする場合、Emailifyはデフォルトで、対応するメール画像をCustomer.io Assetsにアップロードします。Customer.io Assetsのemailifyフォルダを使い、フォルダがまだない場合は自動で作成します。Customer.ioのファイルサイズ上限である2MBを超える画像など、Customer.io Assetsが受け付けない画像は、代わりにHypermaticにアップロードされるため、Design Studioのメールやテンプレートでは引き続きホストされた画像URLを参照できます。

EmailifyからアップロードしたCustomer.ioのメールとテンプレートを更新する ​

アップロードのたびに新しいアイテムを作成するのではなく、Customer.ioのメールやテンプレートを自動で更新したい場合は、プラグインのエクスポート設定でEnable Updatable Templatesトグル（Upload As設定がEmailの場合はEnable Updatable Emails）を必要に応じて有効にします。

これにより、アップロードしたFigmaフレームのレイヤー名にcustomerioEmailIdまたはcustomerioTemplateIdの値が自動で追加され、次回プラグインからエクスポートする際に同じフレームをAPI経由でCustomer.ioに再アップロードすると、そのIDが再利用されます。

最初のメールやテンプレートをアップロードする前に 、 Enable Updatable TemplatesまたはEnable Updatable Emailsトグルも有効にしておく必要があります。これにより、元のCustomer.ioのメールまたはテンプレートのIDがFigmaのフレーム名に追加されます。以降の再アップロードではこのIDが使われ、（毎回新しいアイテムを作成する代わりに）Customer.ioアカウント内の同じアイテムが更新されます。ただし、更新用のトグルを有効にしたままにしておく必要があります。

Customer.ioのメールやテンプレートを更新するには、最初にアップロードを受け取ったのと同じCustomer.ioのワークスペースとリージョンのApp APIキーを使う必要があります。

ZIPエクスポートをCustomer.ioに手動でアップロードする ​

Emailifyのエクスポートパネルで、ドロップダウンリストからCustomer.io (Zip) オプションを選択します。準備ができたらExport For Customer.ioボタンをクリックすると、Figmaで選択したメールのHTMLエクスポートが始まります。

エクスポートが終わったら、.zipファイルをコンピューターにダウンロードして解凍します。メール名のフォルダ内にあるindex.htmlファイルをコードエディターまたはテキストエディターで開き、ファイル内のHTMLをすべてコピーしてから、次の手順に進みます。

  • Customer.ioアカウントにログインします
  • 管理画面のナビゲーションでContentメニュー項目を展開します
  • Email Layoutsメニュー項目をクリックします
  • Create Layoutボタンをクリックします
  • Start from scratchオプションをクリックします
  • レイアウトに名前を付けて、Create Layoutをクリックします。
  • エクスポートしたindex.htmlファイルからコピーしたHTMLを、Editタブのエディターに貼り付けます。
  • Save changesボタンをクリックします。

Customer.ioで完全に空のレイアウトを作成する ​

完全に空のレイアウトを使っていることを確認してください！ Customer.ioはデフォルトで、新しく作成したレイアウトに独自のHTMLタグ（head、bodyなど）を自動で追加します。このコードを必ず削除してください。削除しないと、送信時にHTMLテンプレートの表示が崩れてしまいます。

Customer.ioでメールの作成を始めるときは、Layoutを選択する必要があります。独自のカスタムHTMLテンプレートだけがレンダリングされるよう、このレイアウトは完全に空である必要があります。

Customer.ioでメールのレイアウトを選択している画面

下のスクリーンショットのとおり、空に見えるLayoutを選択しても、実際には空ではありません（<html>タグが自動で含まれ、HTMLテンプレートのコンテンツを囲んでいます）。

Customer.ioのレイアウトに含まれるデフォルトのHTML

これを解決するには、Customer.ioが空のLayoutに追加したHTMLを手動で削除し、contentタグ（下記）だけを残します。

contentタグだけを残した空のCustomer.ioレイアウト

Layoutを保存し、contentタグだけが含まれる状態になれば、カスタムHTMLテンプレートが想定どおりにレンダリングされるはずです。