実装ガイド

Nubrick のエディタで作成された埋め込みエクスペリメントを、アプリ内の特定の場所に埋め込むことができます。

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

基本的な使い方

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

class YourUIView: UIView {
    init(frame: CGRect) {
        super.init(frame: frame)

        let uiview = nubrick
            .experiment
            .embeddingUIView("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOME_ID>")
        uiview.frame = CGRect(x: 0, y: 0, width: 200, height: 200) // recommended: set the frame
        self.addSubview(uiview)
    }
}

height も指定することを推奨しています。

import 'package:flutter/material.dart';
import 'package:nubrick_flutter/embedding.dart';

Widget build(BuildContext context) {
  return Column(
    children: [
      NubrickEmbedding("<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>", height: 200),
    ],
  );
}

イベントハンドラーの追加

埋め込みタイプのエクスペリメントに、イベントハンドラーを追加することができます。

nubrick
    .experiment
    .embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOME_ID>") { event in
        print(event)
    }
    .frame(height: 200)

import io.nubrick.nubrick.Nubrick

Nubrick
  .client
  .experiment
  .Embedding(
    "<EXPERIMENT_ID> or <EXPERIMENT_CUSTOME_ID>",
    onEvent = { event ->
      println("Event: ${event.name}, deepLink: ${event.deepLink}")
    }
  )

ローディング状態のカスタマイズ

読み込み中、失敗、完了の各フェーズでビューをカスタマイズできます。

AsyncEmbeddingPhase を使って各フェーズをハンドリングします。

nubrick
    .experiment
    .embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOME_ID>", onEvent: nil) { phase in
        switch phase {
        case .loading:
            Text("loading")
        case .notFound:
            Text("not found")
        case .failed:
            Text("error")
        case .completed(let component):
            component.frame(height: 200)
        }
    }

EmbeddingPhase を使って各フェーズをハンドリングします。

let uiview = nubrick
    .experiment
    .embeddingUIView("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOME_ID>", onEvent: nil) { phase in
        switch phase {
        case .loading:
            return UILabel(text: "loading")
        case .notFound:
            return UILabel(text: "not found")
        case .failed:
            return UILabel(text: "error")
        case .completed(let component):
            return component
        }
    }

content パラメータを使って EmbeddingLoadingState をハンドリングします。

import io.nubrick.nubrick.Nubrick
import io.nubrick.nubrick.component.EmbeddingLoadingState

Nubrick
  .client
  .experiment
  .Embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOME_ID>") { state ->
    when (state) {
      is EmbeddingLoadingState.Loading -> {
        CircularProgressIndicator()
      }
      is EmbeddingLoadingState.Completed -> {
        state.view()
      }
      is EmbeddingLoadingState.NotFound -> {
        Text("Not found")
      }
      is EmbeddingLoadingState.Failed -> {
        Text("Error")
      }
    }
  }

builder を使って各フェーズをハンドリングします。

NubrickEmbedding(
  "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
  builder: (context, phase, child) {
    case ExperimentPhase.loading:
      return const SizedBox(height: 200, child: Center(child: CircularProgressIndicator()));
    case ExperimentPhase.completed:
      return const SizedBox(height: 200, child: child);
    case ExperimentPhase.notFound:
      return const SizedBox(height: 200, child: Center(child: Text("Experiment not found.")));
    default:
      return const SizedBox.shrink();
  },
),

引数の渡し方

arguments としてパラメータを渡すと、コンポーネント内で展開される動的な変数として利用することができます。

nubrick
    .experiment
    .embedding(
        "<EXPERIMENT_ID> or <EXPERIMENT_CUSTOME_ID>",
        arguments: ["item_id": itemId]
    )
    .frame(height: 200)

Previousアプリ内埋め込み (Embeddable Experiment)Nextプロダクトツアー (Product Tour)

Last updated 20 days ago

hashtag基本的な使い方

hashtagイベントハンドラーの追加

hashtagローディング状態のカスタマイズ

hashtag引数の渡し方

基本的な使い方

イベントハンドラーの追加

ローディング状態のカスタマイズ

引数の渡し方