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 Adobe 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 AEPEdgeIdentity.Identity.getUrlVariables 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 Identity for Edge Network extension API reference guide.
Validate
To execute the code:
-
Review the setup instructions section to connect your simulator or device to Assurance.
-
Go to the Settings in the app
-
Tap the View… button to show the Terms of Use.
-
In the Assurance UI, look for the Edge Identity Response URL Variables event from the com.adobe.griffon.mobile vendor.
-
Select the event and review the urlvariable field in the ACPExtensionEventData object, confirming the following parameters are present in the URL:
adobe_mc,mcmid, andmcorgid.
A sample
urvariablesfield can be seen below:-
Original (with escaped characters)
code language-html adobe_mc=TS%3D1636526122%7CMCMID%3D79076670946787530005526183384271520749%7CMCORGID%3D7ABB3E6A5A7491460A495D61%40AdobeOrg -
Beautified
code language-html adobe_mc=TS=1636526122|MCMID=79076670946787530005526183384271520749|MCORGID=7ABB3E6A5A7491460A495D61@AdobeOrg
-
Unfortunately, debugging the web session is limited. For example, you can’t use the Adobe Experience Platform Debugger in your browser to continue debugging the webview session.
VisitorAPI.js.Next: Identity