Message de Demande de Navigation par Lien

Vue d'ensemble

Le message de Demande de Navigation par Lien est envoyé uniquement lorsqu'un partenaire spécifie overrideLinkNavigation comme vrai sur leur lanceur (voir Options du Lanceur d'Intégration). Une fois cette option activée, vous recevrez un message LINK_NAVIGATION_REQUEST en vous abonnant à une Sélection ou un Placement.

Par exemple, après avoir opté pour overrideLinkNavigation sur le lanceur, vous pouvez vous abonner avec le code suivant pour recevoir des événements chaque fois qu'un utilisateur clique sur un lien pour naviguer vers une autre page.

// Script Rokt déjà chargé

const selection = await launcher.selectPlacements({
  attributes: {
    // attributs requis par Rokt pour récupérer les éléments du catalogue
    eventId: "eventId",
    venueName: "venueName",
    // tout attribut supplémentaire
    email: "email",
  },
});

selection.on("LINK_NAVIGATION_REQUEST").subscribe((event) => {
  // Gérer la demande de navigation en utilisant la propriété url
  window.open(event.body.url);
});

Propriétés

url

• url: string

Si un client clique sur un lien d'offre lorsque overrideLinkNavigation est activé, un nouvel onglet de navigation ne s'ouvrira pas automatiquement. Au lieu de cela, le SDK Rokt enverra un événement contenant l'url sous forme de chaîne de caractères qui doit être gérée par le partenaire. Cette url doit être ouverte immédiatement dans le contexte de navigation requis (vue web ou navigateur natif comme convenu), pour éviter toute dégradation de l'expérience client.

iOS WKWebView

Si vous utilisez WKWebView dans votre application iOS, vous pouvez utiliser overrideLinkNavigation et LINK_NAVIGATION_REQUEST pour diriger vos utilisateurs vers l'emplacement approprié pour l'expérience utilisateur souhaitée. Cela est utile lorsque vous avez un parcours utilisateur entièrement en vue web et que vous devez diriger l'utilisateur vers son navigateur standard ou similaire.

Dans l'exemple ci-dessous, nous utilisons roktMessageHandler comme nom de message partagé entre l'implémentation Web et iOS.

Implémentation JS

Lors de la création de votre lanceur, vous devrez spécifier overrideLinkNavigation, ce qui est nécessaire pour empêcher Rokt d'ouvrir immédiatement l'URL avec window.open().

// Script Rokt déjà chargé
const launcher = await window.Rokt.createLauncher({ 
  accountId: "rokt-account-id",
  overrideLinkNavigation: true
});

De plus, vous devez écouter l'événement LINK_NAVIGATION_REQUEST et spécifier comment gérer l'ouverture de l'URL.

selection.on("LINK_NAVIGATION_REQUEST").subscribe((event) => {
  // Gérer la demande de navigation en utilisant la propriété url
  // Cela sera intercepté par le protocole WKScriptMessageHandler de WKWebView
  window.webkit?.messageHandlers?.roktMessageHandler?.postMessage(body.url);
});

Implémentation iOS

Dans l'implémentation iOS ci-dessous, nous utilisons WKWebView pour enregistrer le userContentController pour le nom de message convenu roktMessageHandler. Ensuite, nous implémentons le protocole WKScriptMessageHandler avec la fonction userContentController pour écouter les événements d'ouverture d'URL qui correspondent au nom de message convenu et choisir comment les ouvrir.

func webViewSetup() {
    let webView = WKWebView()
    // Le reste de votre configuration WKWebView ici

    // Enregistrer l'écouteur pour le nom de message convenu
    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) {

            // Choisir où ouvrir l'URL
            if #available(iOS 10.0, *) {
                UIApplication.shared.open(url)
            } else {
                UIApplication.shared.openURL(url)
            }
        }
    }
}

Android WebView

Dans l'exemple ci-dessous, nous utilisons roktLinkOpener comme nom de message partagé utilisé entre l'implémentation Web et Android.

Implémentation JS

Lors de la création de votre lanceur, vous devrez spécifier overrideLinkNavigation, ce qui est nécessaire pour empêcher Rokt d'ouvrir immédiatement l'URL avec window.open().

// Script Rokt déjà chargé
const launcher = await window.Rokt.createLauncher({ 
  accountId: "rokt-account-id",
  overrideLinkNavigation: true
});

De plus, vous devez écouter l'événement LINK_NAVIGATION_REQUEST et spécifier comment gérer l'ouverture de l'URL.

selection.on("LINK_NAVIGATION_REQUEST").subscribe((event) => {
  // Gérer la demande de navigation en utilisant la propriété url
  if (window.roktLinkOpener && typeof window.roktLinkOpener.openLink === "function") {
    window.roktLinkOpener.openLink(url);
  }
});

Implémentation Android

fun webViewSetup() {
    // Enregistrer l'écouteur pour le nom de message convenu
    webView.addJavascriptInterface(WebAppInterface(this), "roktLinkOpener")
}

class WebAppInterface(private val activity: AppCompatActivity) {
    @JavascriptInterface
    fun openLink(url: String) {
        // Choisir où ouvrir l'URL
        val intent = Intent(Intent.ACTION_VIEW, url.toUri())
        activity.startActivity(intent)
    }
}

Détection JS pour Android et iOS

Les exemples Android et iOS ci-dessus peuvent être combinés en un seul gestionnaire qui conserve les mêmes noms de messages convenus, roktMessageHandler et roktLinkOpener pour iOS et Android respectivement.

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

  // Détection iOS : le gestionnaire de messages WKWebView existe
  if (window.webkit && window.webkit?.messageHandlers && window.webkit?.messageHandlers?.roktMessageHandler) {
    window.webkit?.messageHandlers?.roktMessageHandler?.postMessage(body.url);
  }
  // Détection Android : l'interface JavaScript injectée existe
  else if (window.roktLinkOpener && typeof window.roktLinkOpener.openLink === "function") {
    window.roktLinkOpener.openLink(url);
  }
  // Solution de repli
  else {
    // Traiter l'URL d'une autre manière
  }
});