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

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

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

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

Emailifyのエクスポートパネルで、ドロップダウンリストからBraze (API) オプションを選択し、有効なBrazeのAPIキーとRESTエンドポイントのリージョンを貼り付けます。これらはBrazeのダッシュボードページで確認・生成できます。

Brazeでメールを作成するには、templates.email.create権限が有効になったBrazeのAPIキーが必要です。

準備ができたらUpload To Brazeボタンをクリックします。Figmaで選択したメールのHTMLエクスポートが始まり、Brazeのマーケティングテンプレートに自動でアップロードされます。アップロードしたテンプレートを確認するには、Brazeアカウントにログインし、サイドバーのTemplates、Email Templatesの順にクリックしてから、HTML Editorオプションをクリックして、下にあるSaved HTML Templatesの一覧を参照します。

重要：Inline CSS設定を無効にする ​

BrazeアカウントでBrazeのInline CSS設定が有効になっていると、CSSスタイルシートのスタイルをHTMLメールの本文に移す処理でHTMLが再処理されます。この処理はEmailifyですでに行われているため、このトグルが有効なままだとほかのスタイルが削除され、モバイルとデスクトップでレイアウトの一部が崩れてしまいます。

Sending Settings -> AdvancedセクションのEnable Inline CSSが無効になっていることを確認してください。EmailifyはHTMLのインライン化と圧縮を自動で行うため、Brazeで再処理するとコードが壊れてしまいます。

1通のメールだけInline CSSをオフにするには、BrazeのDrag & Drop EditorでEdit Sending Info -> Advancedタブに移動し、Inline CSSを無効にします。BrazeのSettings -> Email Preferencesから全体の設定として変更することもできます。

旧バージョンのBrazeを使っている場合、全体のInline CSSトグル（オフにするもの）はManage Settings -> Email Settings -> Inline CSSにあります。

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

アップロードのたびに新しいテンプレートを作成するのではなく、Brazeのテンプレートを自動で更新したい場合は、プラグインのエクスポート設定で（Braze (API) オプションを選択した状態で）Enable Updatable Templatesトグルを必要に応じて有効にします。

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

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

Brazeでメールを更新するには、templates.email.update権限が有効になったBrazeのAPIキーが必要です。

EmailifyのリンクをSparkPost用のユニバーサルリンクにするには、URLの末尾に[[data-msys-sublink='open-in-app']]を追加します（例：http://www.example.com[[data-msys-sublink='open-in-app']]）。これにより、<a>リンクタグにdata-msys-sublinkデータ属性が自動で追加されます（例：<a href="https://example.com" data-msys-sublink="open-in-app">）。

次に、アプリがカスタムパスを正しく処理できるように設定されていることを確認してください。詳しくは、SparkPostのディープリンクでSparkPostのクリックトラッキングを使う方法に関する記事をご覧ください。この記事には、iOSとAndroidのサンプルコードが含まれています。

EmailifyのリンクをSendGrid用のユニバーサルリンクにするには、URLの末尾に[[universal='true']]を追加します（例：http://www.example.com[[universal='true']]）。これにより、<a>リンクタグにuniversalデータ属性が自動で追加されます（例：<a href="https://example.com" universal="true">）。

次に、アプリがカスタムパスを正しく処理できるように設定されていることを確認してください。詳しくは、SendGridのディープリンクでSendGridのクリックトラッキングを使う方法に関する記事をご覧ください。この記事には、iOSとAndroidのサンプルコードが含まれています。