Salesforce Marketing Cloudにメールをアップロードする

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

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

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

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

Emailifyのエクスポートパネルで、ドロップダウンリストからMarketing Cloud (API) オプションを選択し、以下の手順に従って認証情報を取得します。

  1. Salesforce Marketing Cloudアカウントにログインします。
  2. Marketing Cloud -> Setup -> Platform Tools ("Apps") -> Installed Packagesに移動します。
  3. Newをクリックします。
  4. パッケージの名前と説明を入力します。
  5. 拡張機能付きでパッケージを作成するオプションを選択します。
  6. パッケージをSaveします。
  7. ComponentsでAdd Componentをクリックします。
  8. API Integrationを選択します（API Integrationのコンポーネントは、一度追加すると削除できません）。
  9. Server-to-server integrationタイプを選択します。
  10. コンポーネントのプロパティを設定します。Emails（Channelsの下）と、Documents and ImagesおよびSaved Content（Assetsの下）に対して、ReadとWriteの権限を許可する必要があります。
  11. Saveをクリックして、コンポーネントを保存します。

作成が終わったら、上記で作成した連携から以下の必須情報をコピーし、Emailifyのエクスポート設定に貼り付けます。

準備ができたら、Upload AsドロップダウンでTemplateまたはHTML Emailを選び、Upload To Marketing Cloudボタンをクリックすると、選択したFigmaのメールがMarketing Cloudにエクスポートされます。デフォルトのTemplateオプションでは、これまでどおりテンプレートベースのメールとしてアップロードされます。アップロードしたアセットをContent Builderで編集可能なHTMLメールとして開きたい場合は、HTML Emailを選択してください。

アップロードしたSalesforceのメールやテンプレートを、デフォルトのルートではなく特定のContent Builderフォルダに配置したい場合は、アップロードする前にSalesforceアカウントを接続し、EmailifyのエクスポートパネルでTemplate Folderを選択してください。Content Builder (Default) のままにすると、これまでどおりの動作になります。

Salesforce Content Builderに画像をアップロードする ​

メールで使う画像もSalesforce Marketing Cloudでホストしたい場合は、EmailifyのCDNドロップダウンにあるSalesforce Content Builderオプションを使えるようになりました。

  1. EmailifyのエクスポートパネルでMarketing Cloud (API) またはMarketing Cloud (oAuth) を選択し、先にSalesforce Marketing Cloudアカウントを接続します。
  2. CDNドロップダウンを開き、Salesforce Content Builderを選択します。
  3. Emailifyが画像をアップロードするContent Builderフォルダを選択します。
  4. 通常どおりメールをエクスポートします。

Emailifyはメールの画像を選択したSalesforce Content Builderフォルダに自動でアップロードし、メールまたはテンプレートをアップロードする前に、エクスポートしたHTML内の画像URLを公開済みのSalesforceアセットのURLに置き換えます。

Template Folderと画像用のContent Builderフォルダは別々にできます。チームでHTMLメール、テンプレート、画像アセットを別々のフォルダで管理している場合に便利です。

同じメールを同じContent Builderフォルダにもう一度エクスポートした場合、Salesforceが画像名はすでに使われていると報告しても、Emailifyは失敗せず、可能な限り一致する既存の画像アセットを再利用します。

Salesforce Marketing Cloudのその他のオプション ​

Salesforce Marketing Cloudへのエクスポートでは、ほかにもいくつかのオプションを任意で有効にできます。

コンテンツスロットを追加する ​

Slotトグルを有効にすると、エクスポートしたHTMLに<div data-type="slot" data-key="uniqueKeyHere" data-label="Drop Blocks or Content Here"></div>タグが自動で追加され、Marketing Cloudのエディターからほかのコンテンツをメールにドラッグ＆ドロップできるようになります。このオプションはTemplateとしてアップロードする場合に利用できます。HTML Emailとしてアップロードする場合、スロットのコンテナは含まれません。

エイリアスタグを追加する ​

Aliasesトグルを有効にすると、Figmaデザイン内のボタン、画像、ソーシャルアイコン、ナビゲーションバーのリンクにalias="Your Figma layer name"属性が自動で追加されます。値には、レイヤーパネルに表示されている各Figmaレイヤーの名前が自動で入ります。

これにより、エクスポートしたHTML内の<a>タグのリンクに、デザインに合った名前（例：「Hero CTA Button」）のエイリアスを付けて、トラッキングデータを把握しやすくできます。

コンバージョンタグを追加する ​

Conversionsトグルを有効にすると、エクスポートしたHTML内のすべての<a>リンクタグにconversion="true"属性が自動で追加されます。

RedirectToのAMPscriptを追加する ​

RedirectToを有効にすると、Salesforce Marketing Cloudにエクスポートする際、http://とhttps://で始まる絶対URLのリンク先が自動でAMPscriptでラップされます。チームは、各コンポーネントでAMPscriptを書かなくても、Emailifyに通常のWeb URLを入力できます。

html
<a href="%%=RedirectTo('https://example.com/page')=%%">Read more</a>

このオプションはデフォルトでオフになっており、テンプレートとHTMLメールを含む、Marketing CloudのZIPエクスポートとAPIエクスポートで利用できます。個別のHTMLブロックファイルやOutlook用のボタンのリンクにも適用されます。既存のエイリアスとコンバージョンの属性は保持されます。

既存のAMPscriptのリンクや、動的なテンプレートコードを含むURLは変更されません。Salesforceの配信停止・プロファイル用トークン、メールアドレス、電話番号のリンク、相対URL、ページ内アンカーも同様です。メール内のその他のAMPscriptには影響しません。プレビューリンクとプレーンテキスト版では、通常のURLがそのまま使われます。

メールをインポートまたはアップロードしたら、Salesforce Marketing Cloudからテスト送信し、クエリパラメーターも含めて、リンクが想定どおりのリンク先に届くか確認してください。

インプレッションタグを追加する ​

Impressionsトグルを有効にすると、エクスポートしたHTML内のRow、Wrapper、Heroレイヤーが、開始タグ%%=BeginImpressionRegion("your_figma_layer_name")=%%と終了タグ%%=EndImpressionRegion()=%%のSalesforce Marketing Cloudのインプレッションタグで自動的に囲まれます。

HTMLブロックファイル ​

Blocksを有効にすると、ZIPに追加の.htmlファイルが含まれます。Emailifyは各行を個別のHTMLファイルとしてエクスポートするため、Salesforce Marketing Cloudで再利用可能なモジュールとして使えます。

なお、各ブロックのHTMLコードには、引き続きCSSやstyleタグなど、<head></head>タグ内の要素が必要になる点に注意してください。この方法を使う場合は、それらを抜き出す作業に少し時間をかける必要があります。

このトグルは、Emailifyのエクスポート設定パネルでMarketing Cloud (Zip) プラットフォームオプションを選択している場合にのみ利用でき、APIオプションを選択している場合は表示されません。