アプリ埋め込みガイド

この機能は genser discovery 専用 です。

アプリ埋め込みは、顧客のアプリ内に genser discovery を WebView（または iframe）で表示し、genser のヘッダーなしでアプリ画面になじませ、商品詳細をオーバーレイで表示する機能です。

顧客側で行うのは 「アプリで開いた」という信号を送ること だけです。ヘッダーの非表示や商品詳細のオーバーレイは genser が自動で処理 します。

1. 連携方法

「アプリで開いた」という信号を送る方法です。信号に使う値（トークン・パラメータ）は genser と協議して決定 します。

WebView の UserAgent に協議したトークンを追加します。

let config = WKWebViewConfiguration()
// UAの末尾に「アプリ名/バージョン + 協議したトークン」形式で追加（GenserApp は例）
config.applicationNameForUserAgent = "MyApp/1.0.0 GenserApp"
let webView = WKWebView(frame: .zero, configuration: config)

WebView の UserAgent に協議したトークンを追加します。

val defaultUA = webView.settings.userAgentString
// 重複追加を防止：まだ含まれていない場合のみ追加
if (!defaultUA.contains("GenserApp")) {
    webView.settings.userAgentString = "$defaultUA MyApp/1.0.0 GenserApp"
}

埋め込み URL に協議したパラメータを追加します。

https://<genser discovery のアドレス>?embed=1    // 例：実際の値は genser と協議

信号が伝わると、埋め込み画面でのみ genser のヘッダーが非表示になります。信号のない通常アクセスでは通常どおり表示されます。

2. 表示画面

信号が伝わると以下のように動作します。◇ 自動適用 は genser が自動で処理する部分、◇ 適用ガイド は顧客側のアプリで少し実装していただく部分です。

顧客（パートナー）アプリのヘッダーは そのまま維持 され、genser 画面自体のヘッダーだけが 自動で非表示 になります。これによりロゴが重複せず、genser 画面がアプリに自然になじみます。顧客側で行う作業はありません。

ここに表示される商品詳細は 顧客側の商品詳細ページ（PDP） です。商品を選ぶと顧客の PDP が新しい画面で開きますが、その際 全画面遷移ではなくオーバーレイ（レイヤー）で表示していただく と、上の画像のようにアプリを離れずに滑らかにつながります。

次のように、顧客の PDP をオーバーレイで開くよう実装していただければ大丈夫です。

iOS — モーダルシートで present

let vc = UIViewController()
let web = WKWebView(frame: vc.view.bounds)
web.load(URLRequest(url: pdpURL))          // 顧客の PDP アドレス
vc.view.addSubview(web)
vc.modalPresentationStyle = .pageSheet     // シートで現れるオーバーレイ
present(vc, animated: true)

Android — BottomSheet で表示

val dialog = BottomSheetDialog(context)
val web = WebView(context).apply { loadUrl(pdpUrl) }  // 顧客の PDP アドレス
dialog.setContentView(web)
dialog.show()

Web アプリ / iframe — 固定オーバーレイレイヤー

<!-- 全画面遷移ではなくオーバーレイレイヤーで -->
<div class="pdp-overlay">        <!-- position:fixed; inset:0; background:rgba(0,0,0,.5) -->
  <iframe src="/products/123"></iframe>   <!-- 顧客の PDP -->
</div>

3. 導線ボタンの配置

AI 検索への導線ボタンは 顧客がアプリに直接配置 します（推奨事項）。次の 2 つから選んでください。

検索窓の下に独立した AI 導線ボタンを配置します。

検索窓の右にコンパクトな AI ボタンを配置します。

よくある質問

ネイティブアプリだけですか？ Web アプリでも使えますか？

Web をレンダリングできる環境（WebView または iframe）であれば、どちらでも使えます。信号の送り方を環境に合わせて（UA トークンまたは URL パラメータ）選ぶだけです。

通常の Web ブラウザのアクセスでもヘッダーは非表示になりますか？

いいえ。協議した埋め込み信号がある場合のみ非表示になります。信号のない通常アクセスでは通常どおり表示されます。

識別値が他のサービスと重複しませんか？

トークン・パラメータの値は顧客ごとに genser と協議して固有に決めるため、他のサービスと重複しません。

商品詳細がオーバーレイではなく全画面で表示されます。

オーバーレイは、アプリが商品詳細をモーダルシート（iOS）または BottomSheet（Android）で開くときに表示されます。全画面で開くと通常の画面遷移になります。

iframe でも埋め込めますか？

可能です。ただし iframe はクロスドメインの Cookie・ストレージ制約（特に iOS）があり、ログインセッションが必要な画面は別途検討が必要です。UserAgent を指定できる WebView 方式のほうが安定します。

関連ドキュメント: その他表示設定 · ウィジェット・デザイン設定

Previousウィジェット・デザイン Nextユーザー行動データの収集

Last updated 7 days ago