Overview

Understanding user interactions within mobile applications, particularly with interactive maps, is crucial for enhancing user engagement and tailoring experiences. Concept3D's interactive map product includes a powerful feature, the Analytics & Events passthrough, designed for mobile app developers. This feature facilitates the integration of events and data for Google Analytics within the Concept3D interactive map into native mobile applications, offering more profound insights into user behaviors.

Benefits of the Native Bridge

Integrating Concept3D's mobile web map events and analytics into native iOS and Android applications offers numerous advantages, including the ability to:

• Understand User Intent: Analyze combined data from the interactive map and your application to gain insights into user behaviors and preferences.
• Customize User Interface: If you are customizing your experience, you can display you own UI or content when the events occur.
• Enhance User Profiles: Enrich user data profiles with detailed interactions, enabling personalized experiences and improved user engagement.
• Inform Future Strategies: Use the insights obtained from the analytics to develop targeted strategies that encourage desired user behaviors and enhance overall app performance.

Events that Forward

• All custom google analytics events listed in Interactive Map Google Analytics Overview
• An additional custom event for Marker Click
• And additional custom event for Map Click

Implementation Details

Example For iOS:

• Swift Module: One option is to utilize the Swift Module pod from the nativeBridge developers for seamless communication between the WebView and your iOS application.
• Data Transmission Example:

What is sent from the WebView:

  window.webkit.messageHandlers.nativebridgeiOS.postMessage({
    topic: "trackPartnerEvent",
    data: {
      partner_name: "concept3d",
      event_name: {event_name},
      parameters: {
        label: {event_label},
        mapId: {map_id}
      },
    },
  });

Handler Example using the nativeBridge Pod:

webViewConnection.addHandler(for "trackPartnerEvent", {
    (input: InputDataType, connection) in {
        let message = "Received incoming: '\(input.inputMessage)'"
        let output = OutputData(outputMessage: message)
        connection.send(data: output, for: Topic.someTopic)
    }
})

You can implement your listener without using the nativeBridge Pod. That implementation would look something like this:

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
  let url: URL

  class Coordinator: NSObject, WKScriptMessageHandler {
    var parent: WebView

    init(parent: WebView) {
      self.parent = parent
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if let messageBody = message.body as? [String: Any] {
          print("Message received from \(message.name): \(messageBody)")
        } else {
          print("Message received from \(message.name) with unknown format")
        }
      }
  }

  func makeCoordinator() -> Coordinator {
    Coordinator(parent: self)
  }

  func makeUIView(context: Context) -> WKWebView {
    let configuration = WKWebViewConfiguration()
    let userContentController = WKUserContentController()

    userContentController.add(context.coordinator, name: "nativebridgeiOS")
    
    configuration.userContentController = userContentController
    let webView = WKWebView(frame: .zero, configuration: configuration)
    return webView
  }

  func updateUIView(_ webView: WKWebView, context: Context) {
    let request = URLRequest(url: url)
    webView.load(request)
  }
}