Stayfilm

Stayfilmは、大規模な自動パーソナライズビデオ制作のためのREST APIです。このプラットフォームは、データ、画像、テキスト、サウンドトラック、ナレーション、ビジュアルエフェクトを統合し、eコマース、マーケットプレイス、CRMワークフロー、マーケティングキャンペーン向けにカスタマイズされたビデオコンテンツを生成します。

この統合では、BrazeからStayfilm APIにレンダリングジョブを送信し、ビデオの準備が完了するとコールバックを受信し、キャンペーンやキャンバスで使用するためにビデオURLとステータスをユーザープロファイルに保存します。

この統合はStayfilmによって管理されています。

ユースケース

Stayfilmは、カスタマーライフサイクル全体にわたるパーソナライズされた動画配信をサポートしています。主なユースケースは以下のとおりです。

• オンボーディングとウェルカムジャーニー：プロファイルやサインアップの状況に応じてパーソナライズされた動画で新規ユーザーを歓迎します
• 商品やマーケットプレイスのコンテンツ：カタログやユーザー提供のメディアから商品にフォーカスした動画を生成します
• コンバージョンとアクティベーション：文脈に応じた動画メッセージングで重要なアクションを強化します
• ロイヤルティとアップセル：パーソナライズされたオファーや利用マイルストーンを動画形式でハイライトします
• 奪還と離脱防止：カスタマイズされた動画コンテンツで非アクティブなユーザーを再エンゲージします

前提条件

始める前に、以下の要件を確認してください。

連携の仕組み

この連携は、双方向のWebhookフローを使用します。

1. アウトバウンド： BrazeのWebhookキャンペーンがStayfilmのPOST /Jobエンドポイントにレンダリングジョブを送信します。リクエストには、ユーザーメディア、テンプレート設定、およびBrazeユーザーのexternal_idに設定されたCallbackRelayDataが含まれます。
2. インバウンド： Stayfilmがレンダリングを完了すると、Brazeデータ変換のWebhook URLにコールバックを送信します。変換処理により、レスポンスが一致するユーザープロファイルのカスタム属性およびカスタムイベントにマッピングされます。
3. 配信： 保存されたstayfilm_video_url属性を、カスタムHTMLを使用したアプリ内メッセージなどのメッセージングチャネルで活用します。

このウォークスルーのデータ変換では、以下のカスタム属性が書き込まれます。

変換処理では、stayfilm_video_readyまたはstayfilm_video_failedという名前のカスタムイベントも記録されます。

連携

以下のステップでは、概念実証の手順を説明します。フローを検証した後、ジョブペイロード、属性、メッセージングをユースケースに合わせて調整してください。

ステップ1:テストユーザーを作成する

連携の構築と検証に使用するテストユーザープロファイルを作成します。詳細については、ユーザーをインポートするを参照してください。

1. オーディエンス > ユーザーをインポート に移動します。
2. クイックユーザー追加 を選択します。
3. external_id とその他の必須フィールドを入力し、新しいユーザーを作成 を選択します。

重要

メール、電話番号、氏名、政府発行 ID、住所、注文詳細などの個人データを external_id として使用しないでください。この連携全体を通じて、external_id は大文字と小文字が区別されるものとして扱ってください。

このウォークスルーでは、stayfilm-poc-001 をサンプルの external_id として使用します。後のステップで使用するため、選択した値を控えておいてください。

ステップ2:データ変換を作成する

Stayfilm のコールバックを受信し、ユーザープロファイルを更新するためのデータ変換を作成します。

1. データ設定 > データ変換 に移動します。
2. 変換を作成 を選択します。
3. Stayfilm Callback Data Transformation などの名前を入力します。
4. 編集エクスペリエンス で、ゼロから始める を選択します。
5. 送信先を選択 > 送信先 で、POST: Track users を選択します。
6. 変換を作成 を選択します。
7. デフォルトの変換コードを以下に置き換えます:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
const brazeExternalId = payload.RelayedData;
if (!brazeExternalId) {
  throw new Error("Missing RelayedData. Expected Stayfilm callback to relay the Braze external_id from CallbackRelayData.");
}

const idJob = payload.IdJob || null;
const producedFiles = payload.ProducedFiles || {};
const videoUrl = producedFiles?.Videos?.VideoMP4?.Url || null;
const errorMessage = payload.ErrorMessage || null;
const hasError = payload.HasError === true || Boolean(errorMessage);
const isReady = !hasError && Boolean(videoUrl);
const now = new Date().toISOString();

let brazecall = {
  attributes: [
    {
      external_id: brazeExternalId,
      _update_existing_only: true,
      stayfilm_video_status: isReady ? "ready" : "failed",
      stayfilm_video_url: videoUrl || null,
      stayfilm_job_id: idJob,
      stayfilm_render_error: errorMessage,
      stayfilm_callback_received_at: now
    }
  ],
  events: [
    {
      external_id: brazeExternalId,
      _update_existing_only: true,
      name: isReady ? "stayfilm_video_ready" : "stayfilm_video_failed",
      time: now,
      properties: {
        stayfilm_job_id: idJob,
        stayfilm_video_url: videoUrl || null,
        stayfilm_render_error: errorMessage,
        stayfilm_status: payload.Status || payload.status || null
      }
    }
  ]
};

return brazecall;

8. 保存 を選択し、生成された Webhook URL をコピーします。
9. 以下のサンプル Stayfilm コールバック JSON を使用して、Webhook URL にテスト POST リクエストを送信します。RelayedData には、ステップ1で作成したテストユーザーの external_id を設定してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "IdJob": "debug-job-001",
  "HasError": false,
  "Status": "DRAFT_DONE",
  "ProducedFiles": {
    "Videos": {
      "VideoMP4": {
        "Url": "https://example.com/stayfilm-poc-video.mp4"
      }
    }
  },
  "RelayedData": "stayfilm-poc-001"
}

cURL、Postman、または同様のツールを使用してリクエストを送信します。成功した場合、HTTP ステータス 201 と {"message": "success"} が返されます。

10. データ設定 > データ変換 に移動し、変換がリストに表示されない場合はページを再読み込みします。
11. 変換を開き、検証 を選択します。出力 で検証が成功したことを確認します。
12. 有効化 を選択します。
13. コピーした Webhook URL をコールバック URL として Stayfilm に提供します。

注

Brazeの external_id 以外のデータを CallbackRelayData に格納する場合は、RelayedData を適切に解析するように変換コードを更新してください。

ステップ3:Stayfilm にジョブを送信する Webhook キャンペーンを作成する

Stayfilm にレンダリングジョブを送信する Webhook キャンペーンを作成します。

重要

キャンペーンをテストする前に、Stayfilm がステップ2のデータ変換コールバック URL でプロジェクトを設定済みであることを確認してください。

1. メッセージング > キャンペーン に移動します。
2. キャンペーンを作成 > Webhook を選択します。
3. Stayfilm Webhook Integration などのキャンペーン名を入力します。
4. Webhook を作成 > ゼロから始める を選択します。
5. Webhook を作成 > Webhook URL に、Stayfilm が提供する Stayfilm の POST /Job エンドポイント URL を入力します。以下の例の {BASE_URL} を置き換えてください: https://{BASE_URL}/stg/v3/job
6. HTTP メソッド を POST に設定します。
7. リクエストボディ で Raw Text を選択し、Stayfilm が提供するジョブペイロードを貼り付けます。Connected Content を使用して、ボディをダイナミックにすることができます。

CallbackRelayData を Braze ユーザーの external_id に設定してください。Stayfilm はこの値をコールバックで RelayedData として返します。

1
2
3
4
5
6
7
8
9
10
11
{
  "SmartTags": ["Setup-Template"],
  "Medias": [
    {
      "Group": "userMedia",
      "URL": "https://{BASE_URL}/some_media.png"
    }
  ],
  "Videos": [{}],
  "CallbackRelayData": "stayfilm-poc-001"
}

以下のリクエストヘッダーを追加します:

以下の Connected Content ブロックで、{TENANT_ID}、{CLIENT_ID}、{CLIENT_SECRET_URL_ENCODED}、{SCOPE_URL_ENCODED} を Stayfilm が提供する値に置き換えます。{CLIENT_SECRET_URL_ENCODED} と {SCOPE_URL_ENCODED} はブロックに貼り付ける前に URL エンコードしてください。OAuth の要件については、Stayfilm API ドキュメントを参照してください。

1
2
3
4
5
6
7
{% connected_content https://login.microsoftonline.com/{TENANT_ID}/oauth2/v2.0/token
  :method post
  :body grant_type=client_credentials&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET_URL_ENCODED}&scope={SCOPE_URL_ENCODED}
  :content_type application/x-www-form-urlencoded
  :cache_max_age 3000
  :save stayfilm_auth
%}Bearer {{stayfilm_auth.access_token}}

8. 下書きを保存 を選択します。

注

キャンペーンページから離れて戻った場合、ステータス を すべて に設定すると、まだ 下書き のキャンペーンを見つけることができます。

ステップ4:Webhook キャンペーンをテストする

1. Webhook コンポーザーから、テスト タブを選択します。
2. ユーザーとしてメッセージをプレビュー で、既存のユーザーを選択 を選択し、テストユーザーを検索します（例: stayfilm-poc-001）。
3. テストを送信 を選択します。

成功した場合、HTTP ステータス 201 と以下のような JSON ボディが返されます:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "IdJob": "4557a77e-f56c-48be-81f7-2d8c5e558cb1",
  "Videos": [
    {
      "IdVideo": "87287b25-7814-4fa1-ad1a-f2ea89822d0f",
      "IdGenre": "f07a1334-5904-420a-9f31-92644f245c5a",
      "IdVideoTemplate": "7b77c3df-12a1-4636-a9b4-bc227f4c233f",
      "IdProject": "73ea3e73-b41e-4676-b674-51731d3bf49c",
      "Status": "DRAFT_RENDERING_PENDING",
      "DurationInSeconds": null,
      "URL": null,
      "ErrorMessage": null,
      "CreatedAt": "2026-06-16T00:35:28.7736263Z",
      "UpdatedAt": "2026-06-16T00:35:28.7736264Z",
      "IdVideoFather": null,
      "IdVideoSon": null,
      "ProducingStatus": "PENDING"
    }
  ],
  "Images": []
}

ステップ5:Stayfilm のコールバックを確認する

Stayfilm は動画を非同期でレンダリングし、処理が完了するとデータ変換にコールバックを送信します。Stayfilm API ドキュメントに記載されている Stayfilm API エンドポイントからジョブのステータスを監視できます。

1. データ設定 > データ変換 に移動します。
2. 変換の ログ タブを選択します。
3. 成功 ステータスのコールバックが表示されていることを確認します。

ステップ6:アプリ内メッセージで動画を表示する

ユーザープロファイルに stayfilm_video_url が設定された後、レンダリングされた動画をキャンペーンまたはキャンバスで表示します。

1. メッセージング > キャンペーン に移動します。
2. キャンペーンを作成 > アプリ内メッセージ を選択します。
3. Stayfilm Video Show などのキャンペーン名を入力します。
4. メッセージ作成画面で、従来のエディター を選択します。
5. 送信先 で、Web ブラウザー を選択します。
6. メッセージタイプ を カスタムコード に設定します。
7. 以下の HTML を HTML フィールドに貼り付けます:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="stayfilm-video-url" style="display: none;">{{custom_attribute.${stayfilm_video_url}}}</div>
<video id="stayfilm-video" controls preload="metadata" playsinline style="width: 100%; max-width: 420px; border-radius: 12px; background: #000;">
Your browser does not support HTML5 video.
</video>
<script>
(function () {
  var urlElement = document.getElementById("stayfilm-video-url");
  var video = document.getElementById("stayfilm-video");
  var videoUrl = urlElement ? urlElement.textContent.trim() : "";
  if (!videoUrl || videoUrl.indexOf("http") !== 0) {
    return;
  }
  var source = document.createElement("source");
  source.src = videoUrl;
  source.type = "video/mp4";
  video.appendChild(source);
  video.load();
})();
</script>
</body>
</html>

8. 下書きを保存 を選択します。
9. テスト タブを選択します。
10. ユーザーとしてメッセージをプレビュー で、既存のユーザーを選択 を選択し、テストユーザーの external_id を検索します。

プロファイルに stayfilm_video_url が設定されている場合、レンダリングされた動画がプレビューに表示され、再生されます。

連携の拡張

このチュートリアルでは、Stayfilm API の一部を取り上げています。ジョブテンプレート、メディア入力、またはダウンストリームメッセージングを調整するには、Stayfilm API ドキュメントを参照し、Webhookペイロード、データ変換マッピング、およびキャンペーンロジックを適宜更新してください。

注意事項

• 非同期レンダリング: 動画の生成は即座には行われません。Webhookと同じフローでアプリ内メッセージを送信するのではなく、stayfilm_video_readyカスタムイベントまたはstayfilm_video_statusのセグメントからフォローアップメッセージングをトリガーしてください。
• 識別子の一貫性: CallbackRelayDataの値は、Brazeユーザーのexternal_idと正確に一致する必要があります。
• OAuthトークンのキャッシュ: Connected Contentの例では、OAuthトークンを3000秒間キャッシュします。Stayfilmがトークンの有効期間の要件を変更した場合は、cache_max_ageを調整してください。
• サンドボックステスト: 本番環境にリリースする前に、Brazeサンドボックスでコールバックループ全体を検証してください。
• カスタム属性の容量: この統合が作成するStayfilmのカスタム属性とイベントに対応できるワークスペースの容量があることを確認してください。

トラブルシューティング

Stayfilm インテグレーションで問題が発生した場合は、以下の表を参照してください。