ÃÛ¶¹ÊÓƵ

Handle WebViews

Learn how to handle data collection with WebViews in a mobile app.

Prerequisites

  • Successfully built and run app with SDKs installed and configured.

Learning objectives

In this lesson, you will:

  • Understand why you must take special consideration for WebViews in your app.
  • Understand the code required to prevent tracking issues.

Potential tracking issues

If you send data from the native portion of the app and from a WebView within the app, each generates their own Experience Cloud ID (ECID), which results in disconnected hits and inflated visit / visitor data. More information about the ECID can be found in the ECID overview.

To solve for that undesirable situation, it’s important to pass the user’s ECID from the native portion of your app to a WebView you might want to use in your app.

The AEP Edge Identity extension used within the WebView collects the current ECID and adds it to the URL instead of sending a request to ÃÛ¶¹ÊÓƵ for a new ID. The implementation then uses this ECID to request the URL.

Implementation

Navigate to Luma > Luma > Views > Info > TermsOfServiceSheet, and locate the func loadUrl() function in the final class SwiftUIWebViewModel: ObservableObject class. Add the following call to handle the web view:

// Handle web view
AEPEdgeIdentity.Identity.getUrlVariables {(urlVariables, error) in
    if let error = error {
        print("Error with Webview", error)
        return;
    }

    if let urlVariables: String = urlVariables {
        urlString.append("?" + urlVariables)
        guard let url = URL(string: urlString) else {
            return
        }
        DispatchQueue.main.async {
            self.webView.load(URLRequest(url: url))
        }
    }
    Logger.aepMobileSDK.info("Successfully retrieved urlVariables for WebView, final URL: \(urlString)")
}

The API sets up the variables for the URL to contain all relevant information, like ECID, and more. In the example, you are using a local file but the same concepts apply to remote pages.

You can learn more about the Identity.getUrlVariables API in the .

Validate

To execute the code:

  1. Review the setup instructions section to connect your simulator or device to Assurance.

  2. Go to the Settings in the app

  3. Tap the ³Õ¾±±ð·É… button to show the Terms of Use.

    {width="300/"} {width="300/"}

  4. In the Assurance UI, look for the Edge Identity Response URL Variables event from the com.adobe.griffon.mobile vendor.

  5. Select the event and review the urlvariable field in the ACPExtensionEventData object, confirming the following parameters are present in the URL: adobe_mc, mcmid, and mcorgid.

    webview validation

    A sample urvariables field can be seen below:

    • Original (with escaped characters)

      code language-html
      adobe_mc=TS%3D1636526122%7CMCMID%3D79076670946787530005526183384271520749%7CMCORGID%3D7ABB3E6A5A7491460A495D61%40ÃÛ¶¹ÊÓƵOrg
      
    • Beautified

      code language-html
      adobe_mc=TS=1636526122|MCMID=79076670946787530005526183384271520749|MCORGID=7ABB3E6A5A7491460A495D61@ÃÛ¶¹ÊÓƵOrg
      

Unfortunately, debugging the web session is limited. For example, you can’t use the ÃÛ¶¹ÊÓƵ Experience Platform Debugger in your browser to continue debugging the webview session.

NOTE
Visitor stitching via these URL parameters is supported in the Platform Web SDK (versions 2.11.0 or later) and when using VisitorAPI.js.
SUCCESS
You have now set up your app to show content based on a URL in a webview using the same ECID as the ECID already issued by the ÃÛ¶¹ÊÓƵ Experience Platform Mobile SDK.
Thank you for investing your time in learning about ÃÛ¶¹ÊÓƵ Experience Platform Mobile SDK. If you have questions, want to share general feedback, or have suggestions on future content, share them on this

Next: Identity

recommendation-more-help
9fed61f5-c338-47ad-8005-0b89a5f4af8b