Mettre en oeuvre Target avec AEP Mobile SDK dans une application native avec des vues web

Cet article partage les bonnes pratiques pour implémenter Adobe Target dans une application mobile qui utilise du code natif avec des vues web à l’aide de Adobe Experience Platform Mobile SDK.

Cet article utilise un exemple d’application iOS à l’aide de Adobe Experience Platform Mobile SDK et d’une intégration Target écrite dans Swift à partir du référentiel GitHub.

Dans le monde réel, votre application d’entreprise utilise probablement des vues web dans votre application mobile. Un affichage web est un conteneur qui charge une page web à l’aide d’une URL. Le conteneur est similaire à une fenêtre de navigateur sans contrôle. Dans iOS, le conteneur d’affichage web fonctionne comme un navigateur Safari lors du traitement des pages web.

Conditions préalables

Pour commencer à utiliser Adobe Experience Platform Mobile SDK, vous devez effectuer certaines tâches préalables requises.

Pour plus d’informations, voir Adobe Target dans la documentation Adobe Experience Platform Mobile SDK.

Synchronisation du code natif avec les vues web

La difficulté lors de l'implémentation de Target dans une application native avec des vues web est que Adobe Experience Platform Mobile SDK a déjà généré tous les identifiants nécessaires au bon fonctionnement des solutions Adobe. Toutefois, les identifiants ne sont pas encore visibles par les vues web, car ces identifiants ne se trouvent pas dans l’environnement natif de la plateforme. Par conséquent, vous devez créer un pont pour transmettre certains identifiants SDK aux vues web afin que l’identité du visiteur persiste dans l’environnement web. Si vous ne le faites pas correctement, il en résulte des visites en double, ce qui affecte vos rapports.

Heureusement, Adobe Experience Platform Mobile SDK fournit une méthode pratique pour générer les paramètres Adobe requis pour que les vues web soient consommées et conservées pour le même visiteur, comme illustré dans l’exemple de code suivant :

Identity.appendTo(url: URL(string: url), completion: {appendedURL, error in
  print("appendedURL \(String(describing: appendedURL))")
  // load the url with ECID on the main thread
  DispatchQueue.main.async {
    let request = NSMutableURLRequest(url: appendedURL!)
    self.webView.load(request as URLRequest)
  }
});

Pour plus d’informations sur la méthode Identity.appendTo et pour voir un exemple d’utilisation de la méthode, voir Swift > Exemple dans la documentation du SDK mobile.

En utilisant Identity.appendTo, cette URL :

https://vadymus.github.io/ateng/at-order-confirmation/index.html?a=1&b=2

se transforme en :

https://vadymus.github.io/ateng/at-order-confirmation/index.html?a=1&b=2&adobe_mc=TS%3D1660667205%7CMCMID%3D69624092487065093697422606480535692677%7CMCORGID%3DEB9CAE8B56E003697F000101%40AdobeOrg

Comme vous pouvez le constater, un paramètre adobe_mc est ajouté à l’URL. Ce paramètre contient des valeurs codées pour :

Identity.getUrlVariables est une autre méthode Adobe Experience Platform Mobile SDK qui renvoie une chaîne correctement formée contenant les variables d’URL Experience Cloud Identity Service. Pour plus d’informations, voir getUrlVariables dans la référence de l’API Identity.

Transmettez l’ID de session Target pour une expérience de même session

Une étape supplémentaire est nécessaire pour que le parcours d’utilisateurs Target fonctionne parfaitement sur les vues natives et web. Cette étape consiste à extraire et à transmettre l’ID de session Target de Adobe Experience Platform Mobile SDK aux vues web de l’application mobile.

Target.getSessionId extrait l’ID de session qui peut être transmis à l’URL de l’affichage web en tant que paramètre mboxSession :

Target.getSessionId { (id, err) in
    // read Target sessionId
}

Test dans les vues web

Les liens d’aperçu web sont générés sur la page Activity detail en cliquant sur le lien Adobe QA pour afficher une fenêtre contextuelle permettant de copier chaque lien d’aperçu d’expérience, comme suit :

?at_preview_token=mhFIzJSF7JWb-RsnakpBqi_s83Sl64hZp928VWpkwvI&at_preview_index=1_1&at_preview_listed_activities_only=true

Les liens d’aperçu web contiennent des paramètres at_preview_index et at_preview_listed_activities_only supplémentaires. Copiez ces paramètres pour créer des liens d’aperçu compatibles avec les mobiles avec des paramètres de lien web.

Par exemple :

com.adobe.targetmobile://?at_preview_token=mhFIzJSF7JWb-RsnakpBqhBwj-TiIlZsRTx_1QQuiXLIJFdpSLeEZwKGPUyy57O_&at_preview_index=1_1&at_preview_listed_activities_only=true

Après avoir ouvert le lien dans un navigateur Safari iOS, votre application capture l’URL dans votre classe AppDelegate comme dans l’exemple suivant :

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
  print("url= \(String(describing: url.absoluteString))")
  //...

Maintenant que vous avez capturé tous les paramètres nécessaires dans l’application, vous pouvez les transmettre sur le web si nécessaire :

Identity.appendTo(url: URL(string: url), completion: {appendedURL, error in
  let urlWithWebPreviewLink = appendedURL + "&" + myPreviewLinkFromAppDelegate

La sortie finale du lien d’affichage web peut se présenter comme suit :

https://vadymus.github.io/ateng/at-order-confirmation/index.html?a=1&b=2&adobe_mc=TS%3D1660667205%7CMCMID%3D69624092487065093697422606480535692677%7CMCORGID%3DEB9CAE8B56E003697F000101%40AdobeOrg&at_preview_token=mhFIzJSF7JWb-RsnakpBqi_s83Sl64hZp928VWpkwvI&at_preview_index=1_1&at_preview_listed_activities_only=true