Skip to content

Cloudinary

Cloudinaryは、画像と動画の管理、編集、最適化、配信に使用される画像・動画プラットフォームで、チャネルやカスタマージャーニー全体にわたるあらゆるCampaignに対してスケーラブルに提供します。統合して有効にすると、Cloudinaryのメディア管理機能により、BrazeのCampaignやCanvasesに対してダイナミックで文脈に応じたパーソナライズ済みのアセット配信が可能になります。

この連携について

CloudinaryをBrazeに接続すると、Cloudinary Assetsに保存されているビジュアルメディアをBrazeのメッセージングチャネルで使用できるようになります。Cloudinaryのダイナミックリンクを使用すると、Brazeのユーザー属性に基づいてリアルタイムで画像や動画を選択・カスタマイズできます。CloudinaryとBrazeを組み合わせることで、各製品のストーリーを伝え、唯一無二の体験をスケーラブルに提供する、視覚的にリッチでパーソナライズされたCampaignの構築を支援します。

このページでは、CloudinaryとBrazeの間で可能な4つの連携方法について説明します（ただし、これらに限定されるものではありません）。これらの連携方法は、主にCloudinaryのメディアライブラリから手動でコピーしたアセットリンクの変更に依存しています。

前提条件

連携方法

Cloudinary DAMからCampaignアセットを選択する

BrazeのCampaignやCanvasesでCloudinaryのDAMから画像や動画を直接使用する最も簡単な方法は、CloudinaryメディアライブラリのアセットページからURLを取得することです。

Cloudinaryの画像アセットライブラリのグリッドビュー。画像の右上に「URLをコピー」ツールチップがハイライト表示されています。

画像とGIFの設定

  1. CloudinaryのDAMから、Assets > Media Library > Assets > Copy URLに移動して、画像またはGIFのURLをコピーします。
  2. HTMLで画像タグを作成し、コピーしたURLにf_auto,q_autoを追加して画像またはGIFを最適化します。

画像URLの例

1
2

<img src="https://res.cloudinary.com/demo/image/upload/v1678993440/f_auto,q_auto/cld-sample.jpg" alt="Summer Campaign">
</img>

動画の設定

  1. CloudinaryのDAMから、Assets > Media Library > Assets > Copy URLに移動して、動画のリンクをコピーします。
  2. HTMLで動画タグを作成し、コピーしたURLにf_auto,q_autoを追加して、動画のフォーマットと品質を自動的に最適化します。

動画URLの例

1
2
3

<video class="video" autoplay muted playsinline controls>
  <source src="https://res.cloudinary.com/demo/video/upload/v1651840278/f_auto,q_auto/samples/cld-sample-video.mp4">
</video>

AndroidおよびiOS固有の考慮事項については、動画を参照してください。

メール用に動画をGIFに変換する

f_auto:animated Cloudinary Transformationを使用して、動画アセットを自動的にGIFに変換します。これは、Brazeのメールチャネルを使用している場合に特に有用です。GIFはメールのペイロードを削減するために最適化されており、ペイロードが大きすぎると配信性の問題を引き起こす可能性があります。

変換の設定

  1. Cloudinary DAMから動画URLをコピーします。
  2. 画像タグを作成し、f_auto:animated,fl_lossyを追加してGIFサイズを縮小し、クライアントに最適なアニメーション形式を選択します。
  3. c_scale,w_nnnを追加して、メールレイアウトで必要なGIF幅に対応します。
  4. e_loopを追加してアニメーションをループさせます。

GIF URLの例

1

https://res.cloudinary.com/demo/video/upload/c_scale,w_500,e_loop/f_auto:animated,fl_lossy/samples/cld-sample-video.gif

ターゲティング属性に基づいてCampaignアセットを動的に選択する

この連携方法は、各ユーザーの属性に基づいてリアルタイムで最適なアセットをインテリジェントに選択することで、ダイナミックなメディアパーソナライゼーションを実現します。

BrazeのCampaignメッセージ内のCloudinaryリンクにLiquidタグをパラメータとして含めると、メッセージ送信時に関連するBraze属性がLiquidタグを動的に置き換えます。これには、言語や顧客ティアなどのユーザー固有のデータを使用できます。Cloudinaryはこれらの属性を使用して、そのユーザーに最も適したCampaignアセットを判断し、正しい画像または動画を自動的に返します。これにより、受信者は文脈に応じた関連性があり、ブランド承認済みのアセットのみを受け取ります。

仕組み

Cloudinaryは、タグおよび構造化メタデータ（SMD）を使用してCampaignアセットを整理し、検索可能にします。

各Campaignアセットは、Campaignタグ（例：spring_launch）でグループ化され、language=enやtier=goldなどのBraze属性に対応する構造化メタデータフィールドで拡張されます。BrazeがCloudinaryリンクを呼び出すと、Custom Functionが受信属性を処理し、一致するタグとメタデータを持つアセットを検索して、最適な一致を返します。

完全一致が見つからない場合は、すべてのエクスペリエンスで継続性を確保するために、フォールバックまたは「次善」のオプションが自動的に選択されます。アセットが選択されると、Cloudinaryのトランスフォーメーションレイヤー（例：f_autoやq_auto）が配信用にメディアを最適化します。このようにタグ付け、メタデータ、カスタムファンクションを組み合わせることで、開発者はパーソナライズされたアセット配信を自動化する柔軟なAPI駆動の方法を利用できます。

前提条件

ダイナミックなアセット選択を有効にするには、Cloudinaryがタグとメタデータに基づいてアセットのセットを返せる必要があります。リスト配信タイプが制限されている場合、CloudinaryはBrazeのCampaignでのパーソナライズされたアセット選択に必要なダイナミックリストを提供できません。

  • リスト配信タイプの制限を解除します：Cloudinaryコンソールでセキュリティ設定を開き、制限画像タイプのリソースリスト項目をクリアします。

ダイナミック選択の設定

  1. Cloudinaryでアセットのタグとメタデータを設定します。
  2. カスタムファンクションをCloudinary DAMにアップロードします。
  3. 目的のタグのCloudinary URLを作成します。
  4. タグURLをベースとして、ダイナミック画像Liquidタグを追加してBraze属性とカスタムファンクションを組み込みます。

URLの例

この例では、Cloudinaryのアセットに、Braze属性に対応する期待値が入力された2つの定義済みSMDフィールド（「locale」と「audience」）があることを前提としています。また、Campaignに必要なアセットには「samples」タグが付与され、カスタムファンクションsegmentedBanner.jsがCloudinaryアカウントにアップロードされています。

1
2
3
4
5
6
7

// Use the appropriate Braze attributes.
{% assign audience = {{custom_attribute.${sample_audience_identifier}}} %}
{% assign locale = {{${language}}}%}

// The URL for the "samples" tag used in the campaign is https://papish.cloudinary.us/image/list/v1690000000/samples.json, which is the base for the dynamic image URL.
<img src="https://papish.cloudinary.us/image/list/f_auto,q_auto/$locale_#{locale}/$audience_!{audience}!/fn_select:js:v1700000000:segmentedBanner.js/v1690000000/campaigns/samples.json" alt="Banner">
出力URL
  • オーディエンスがinternalでロケールがenのユーザーの出力URL： 
    1

    https://papish.cloudinary.us/image/list/f_auto,q_auto/$locale_!en!/$audience_!Internal!/fn_select:js:v1700000000:segmentedBanner.js/v1690000000/samples.json
  • オーディエンスがexternalでロケールがesのユーザーの出力URL： 
    1

    https://papish.cloudinary.us/image/list/$locale_!es!/$audience_!External!/fn_select:js:v1700000000:segmentedBanner.js/v1690000000/samples.json
  • フォールバック画像URL： 
    1

    https://papish.cloudinary.us/image/list/$locale_!unknown!/$audience_!unknown!/fn_select:js:v1700000000:segmentedBanner.js/v1690000000/samples.json

パーソナライズ画像の生成

Cloudinaryのテキストオーバーレイトランスフォーメーションは、Cloudinaryアセット内でBrazeのユーザーデータを直接使用します。

以下の例では、l_textトランスフォーメーションを使用してユーザーの名前をアセットに挿入する方法を示しています。CampaignやCanvasesを開発する際にLiquidタグを活用して、l_textパラメータに入力するテキストを決定することで、さらなるカスタマイズが可能です。

トランスフォーメーションパラメータを使用してアセットをデザインする方法の詳細については、Cloudinaryサポートチームにお問い合わせください。

l_textトランスフォーメーションの例

1
2
3
4

{% assign first_name = {{${first_name}}}%}
{% assign second_name = {{${last_name}}}%}

<img src="https://res.cloudinary.com/demo/image/upload/l_text:Arial_300:%20{{first_name}}%20{{second_name}}%20,co_white,b_rgb:00000080/fl_layer_apply,g_north_west,y_200/docs/white-church-europe-sea.jpg">

出力URLの例

1

<img src="https://res.cloudinary.com/demo/image/upload/l_text:Arial_300:%20John%20Smith%20,co_white,b_rgb:00000080/fl_layer_apply,g_north_west,y_200/docs/white-church-europe-sea.jpg">

海を見下ろす青い屋根の白い教会。画像の左上に半透明の暗い長方形の上に「John Smith」という文字が表示されています。

```
New Stuff!