リンクナビゲーションリクエストメッセージ

概要

リンクナビゲーションリクエストメッセージは、パートナーがランチャーで overrideLinkNavigation を true に設定した場合にのみ送信されます（インテグレーションランチャーオプションを参照）。このオプションを選択すると、Selection または Placement にサブスクライブするときに LINK_NAVIGATION_REQUEST メッセージを受け取ります。

例えば、ランチャーで overrideLinkNavigation を選択した後、ユーザーがリンクをクリックして別のページに移動するたびにイベントを受け取るために、次のコードでサブスクライブできます。

// Rokt スクリプトは既にロードされています

const selection = await launcher.selectPlacements({
  attributes: {
    // Rokt がカタログアイテムを取得するために必要な属性
    eventId: "eventId",
    venueName: "venueName",
    // その他の追加属性
    email: "email",
  },
});

selection.on("LINK_NAVIGATION_REQUEST").subscribe((event) => {
  // url プロパティを使用してナビゲーションリクエストを処理します
  window.open(event.body.url);
});

プロパティ

url

• url: string

overrideLinkNavigation が有効な場合に顧客がオファーリンクをクリックすると、新しいブラウジングタブが自動的に開かれることはありません。代わりに、Rokt SDK は url を文字列として含むイベントをパートナーに送信します。この url は、顧客体験の低下を避けるために、必要なブラウジングコンテキスト（合意されたウェブビューまたはネイティブブラウザ）で_即座に_開く必要があります。

iOS WKWebView

iOS アプリケーション内で WKWebView を使用している場合、overrideLinkNavigation と LINK_NAVIGATION_REQUEST を使用して、ユーザーを希望するユーザーエクスペリエンスに適した場所に誘導できます。これは、完全にウェブビューのユーザージャーニーがあり、ユーザーを標準ブラウザまたは類似のものに誘導する必要がある場合に適しています。

以下の例では、Web と iOS の実装間で共有されるメッセージ名として roktMessageHandler を使用しています。

JS 実装

ランチャーを作成する際には、overrideLinkNavigation を指定する必要があります。これは、Rokt が window.open() を使用して URL を即座に開くのを防ぐために必要です。

// Rokt スクリプトは既に読み込まれています
const launcher = await window.Rokt.createLauncher({ 
  accountId: "rokt-account-id",
  overrideLinkNavigation: true
});

さらに、LINK_NAVIGATION_REQUEST イベントをリッスンし、URL を開く方法を指定する必要があります。

selection.on("LINK_NAVIGATION_REQUEST").subscribe((event) => {
  // url プロパティを使用してナビゲーションリクエストを処理します
  // これは WKWebView の WKScriptMessageHandler プロトコルによってインターセプトされます
  window.webkit?.messageHandlers?.roktMessageHandler?.postMessage(body.url);
});

iOS実装

以下のiOS実装では、userContentControllerを合意されたメッセージ名roktMessageHandlerで登録するためにWKWebViewを使用しています。その後、プロトコルWKScriptMessageHandlerをuserContentController関数で実装し、合意されたメッセージ名に一致するURLオープンイベントをリッスンし、それをどのように開くかを選択します。

func webViewSetup() {
    let webView = WKWebView()
    // ここにWKWebViewの残りの設定を追加

    // 合意されたメッセージ名のリスナーを登録
    webView.configuration.userContentController.add(implOfWKScriptMessageHandler, name: "roktMessageHandler")
}

public func userContentController(_ contentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "roktMessageHandler" {
        if let urlString = message.body as? String,
            let url = URL(string: urlString) {

            // URLを開く場所を選択
            if #available(iOS 10.0, *) {
                UIApplication.shared.open(url)
            } else {
                UIApplication.shared.openURL(url)
            }
        }
    }
}

Android WebView

以下の例では、WebとAndroidの実装間で共有されるメッセージ名としてroktLinkOpenerを使用します。

JS実装

ランチャーを作成する際には、overrideLinkNavigationを指定する必要があります。これは、Roktがwindow.open()でURLを即座に開くのを防ぐために必要です。

// Roktスクリプトはすでに読み込まれています
const launcher = await window.Rokt.createLauncher({ 
  accountId: "rokt-account-id",
  overrideLinkNavigation: true
});

さらに、LINK_NAVIGATION_REQUESTイベントをリッスンし、URLを開く方法を指定する必要があります。

selection.on("LINK_NAVIGATION_REQUEST").subscribe((event) => {
  // urlプロパティを使用してナビゲーションリクエストを処理します
  if (window.roktLinkOpener && typeof window.roktLinkOpener.openLink === "function") {
    window.roktLinkOpener.openLink(url);
  }
});

Android実装

fun webViewSetup() {
    // 合意されたメッセージ名のリスナーを登録します
    webView.addJavascriptInterface(WebAppInterface(this), "roktLinkOpener")
}

class WebAppInterface(private val activity: AppCompatActivity) {
    @JavascriptInterface
    fun openLink(url: String) {
        // URLを開く場所を選択します
        val intent = Intent(Intent.ACTION_VIEW, url.toUri())
        activity.startActivity(intent)
    }
}

AndroidとiOSのJS検出

上記のAndroidとiOSの例は、iOSとAndroidそれぞれで同じ合意されたメッセージ名roktMessageHandlerとroktLinkOpenerを保持する単一のハンドラーに統合することができます。

selection.on("LINK_NAVIGATION_REQUEST").subscribe((event) => {
  const url = event.url;

  // iOS検出: WKWebViewメッセージハンドラーが存在する
  if (window.webkit && window.webkit?.messageHandlers && window.webkit?.messageHandlers?.roktMessageHandler) {
    window.webkit?.messageHandlers?.roktMessageHandler?.postMessage(body.url);
  }
  // Android検出: 注入されたJavaScriptインターフェースが存在する
  else if (window.roktLinkOpener && typeof window.roktLinkOpener.openLink === "function") {
    window.roktLinkOpener.openLink(url);
  }
  // フォールバック
  else {
    // URLを他の方法で処理する
  }
});