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

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

このセクションで学ぶこと

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

---

Step 1. やりたいことを思い浮かべる

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

• 期間限定キャンペーン

  • 「期間限定」というバナー

  • アプリの画面のファーストビューに埋め込む

  

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

---

Step 2. アプリ側でコードを1行挿入する

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

エクスペリメントに関するドキュメントを参考に、アプリ内でキャンペーンを挿入したい部分に、NativebrikExperimentのコードを挿入します。

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

struct YourView: View {
    @EnvironmentObject var nativebrik: NativebrikClient
    var body: some View {
        nativebrik
            .experiment
            .embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOME_ID>")
            .frame(height: 200) // recommended: set the frmae size
    }
}

---

Step 3. エクスペリメントを作成・設定する

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

1. 「エクスペリメント」ページに移動します。

2. 「新しいエクスペリメントを作成」ボタンをクリックし、「エンベデッドコンポーネント」を選択します。

3. エクスペリメント設定ページが表示されるので、以下の設定を行います：

   • エクスペリメント名に「キャンペーンバナー（期間限定）」と入力

   • ID Alias（エイリアス）に、先ほどコードに入力したカスタムIDを入力

   • 配信割合を「100%」に設定

   • 配信スケジュールで、特定の日時を選択

   • 配信期間で、配信する日数を入力

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

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

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

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

---

Step 4. エクスペリメントを実行する

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

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

---

Step 5. iOS/Androidアプリで確認する

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

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