# アプリ内埋め込みを作成する

このページでは、エンベデッドコンポーネント（アプリ内埋め込み）を作成し、ユーザーに重要な情報を通知したりレコメンドを行う方法を学びます。

{% hint style="success" %}
このセクションで学ぶこと

特定の期間に行う限定キャンペーンを、ユーザーへ通知するエンベデッドコンポーネント（アプリ内埋め込み）を作成できるようになる。
{% endhint %}

***

### Step 1. やりたいことを思い浮かべる <a href="#step-1-design-what-you-want-to-do" id="step-1-design-what-you-want-to-do"></a>

ここでは、期間限定のキャンペーンを、アプリの画面上部でユーザーに知らせたいと仮定します。この目的のために、アプリ内埋め込みを使ってユーザーに通知する方法を検討します。メッセージの内容は次のようにデザインします：

* 期間限定キャンペーン
  * 「期間限定」というバナー
  * アプリの画面のファーストビューに埋め込む

<figure><img src="/files/mJjtyIOV6zF8IWCoMSfa" alt="" width="375"><figcaption></figcaption></figure>

また、埋め込みを長期で表示するのではなく、期間を限定して表示するように設定します。これにより、キャンペーンバナーのCTR向上や、過剰なキャンペーン通知による体験阻害を抑えることができます。　

***

### Step 2. アプリ側でコードを1行挿入する <a href="#step-2-create-and-configure-an-experiement" id="step-2-create-and-configure-an-experiement"></a>

（下記はiOSでの例になります）

[エクスペリメントに関するドキュメント](/reference/ios/nubricksdk.md)を参考に、アプリ内でキャンペーンを挿入したい部分に、NubrickSDKのコードを挿入します。

{% hint style="info" %}
コード側では、エクスペリメントIDまたは、次のステップで説明する任意のカスタムIDを設定し、使用できます。場所ごとにカスタムIDを事前に設定しておくことをお勧めします。これにより、コードを編集せずに、`Nubrick` の管理画面で柔軟にエクスペリメントを変更できます。
{% endhint %}

```swift
struct YourView: View {
    var body: some View {
        NubrickSDK.embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>")
            .frame(height: 200)
    }
}
```

***

### Step 3. エクスペリメントを作成・設定する <a href="#step-2-create-and-configure-an-experiement" id="step-2-create-and-configure-an-experiement"></a>

ログイン後、ダッシュボードページにアクセスし、以下の手順に従って実験を作成します。

1. **「エクスペリメント」ページに移動**します。
2. **「新しいエクスペリメントを作成」ボタン**をクリックし、「エンベデッドコンポーネント」を選択します。
3. エクスペリメント設定ページが表示されるので、以下の設定を行います：
   * エクスペリメント名に「キャンペーンバナー（期間限定）」と入力
   * ID Alias（エイリアス）に、先ほどコードに入力したカスタムIDを入力
   * 配信割合を「100%」に設定
   * 配信スケジュールで、特定の日時を選択
   * 配信期間で、配信する日数を入力

<figure><img src="/files/uCnjuTmHJK0JH2hG1S4o" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/FYPPgXDlNyequfe9X3WC" alt=""><figcaption></figcaption></figure>

次に、`「バリエーション設定」`の「コンポーネントを新規作成」をクリックし、埋め込みのデザインを行います。

{% hint style="warning" %}
Nubrickでは、テキストのColorを指定しない際、\
iOS, Androidの外観モードに合わせて文字色を変更する仕様となっております。

エディタ上では黒色のテキストも、アプリユーザーの端末がダークモードの場合は、文字色が白色になりますので、\
アプリ側でダークモードの対応をされていない場合は、お手数ですが、明示的にColorの指定をお願いいたします。
{% endhint %}

<figure><img src="/files/anlcW8mpAXQ8DPnwpZXv" alt=""><figcaption></figcaption></figure>

最後に、「確認」ボタンをクリックしてデザインを保存し、「エクスペリメントを保存」ボタンをクリックして設定を完了します。

<figure><img src="/files/f8GWlV7KbPCry9wwB9A2" alt=""><figcaption></figcaption></figure>

***

### Step 4. エクスペリメントを実行する <a href="#step-3-run-the-experiment" id="step-3-run-the-experiment"></a>

エクスペリメント設定ページに戻ると、作成したエクスペリメントの設定内容とそのアナリティクスが表示されます。

<figure><img src="/files/AJTWmGnLAWC8SOWwAvie" alt=""><figcaption></figcaption></figure>

**「エクスペリメントをデプロイ」ボタン**をクリックすると、エクスペリメントが開始され、対象期間にアプリに反映されます。

***

### Step 5. iOS/Androidアプリで確認する <a href="#step-4-check-it-on-your-iosandroid-app" id="step-4-check-it-on-your-iosandroid-app"></a>

エクスペリメントが反映されたら、実際にiOSまたはAndroidのアプリで埋め込みが表示されるか確認します（上記の設定では、特定の期間になっているので、開発環境では現在の期間またはImmediateを選択してご確認ください）。

アプリを起動すると、期間限定のキャンペーンバナーが、指定した位置に表示されるはずです。

<figure><img src="/files/zRuX7Bx6HeB1kOpT0w0f" alt="" width="375"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nubrick.app/start/quickstart-1/embed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
