WebView'da Analytics kullanma

Etkinlikleri günlüğe kaydetme veya kullanıcı özelliklerini ayarlama çağrılarının Google Analytics hizmetine gönderilebilmesi için önce yerel koda yönlendirilmesi gerekir.

JavaScript işleyicisini uygulama

WebView'da Google Analytics kullanmanın ilk adımı, etkinlikleri ve kullanıcı özelliklerini yerel koda yönlendirmek için JavaScript işlevleri oluşturmaktır. Aşağıdaki örnekte, bu işlemin hem Android hem de Apple yerel koduyla uyumlu bir şekilde nasıl yapılacağı gösterilmektedir: 
function logEvent(name, params) {
  if (!name) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android interface
    window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.firebase) {
    // Call iOS interface
    var message = {
      command: 'logEvent',
      name: name,
      parameters: params
    };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS interface found
    console.log("No native APIs found.");
  }
}

function setUserProperty(name, value) {
  if (!name || !value) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android interface
    window.AnalyticsWebInterface.setUserProperty(name, value);
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.firebase) {
    // Call iOS interface
    var message = {
      command: 'setUserProperty',
      name: name,
      value: value
   };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS interface found
    console.log("No native APIs found.");
  }
}

WebView'unuzdan JavaScript işleyicisini çağırma

Önceki adımda tanımladığınız JavaScript işlevlerini çağırarak etkinlikleri doğru şekilde günlüğe kaydedebilir ve WebView içinden kullanıcı özelliklerini ayarlayabilirsiniz. Aşağıdaki örnekte, bir satın alma işleminin nasıl doğru şekilde kaydedileceği ve örnek olarak bir kullanıcı özelliğinin nasıl ayarlanacağı gösterilmektedir: 
function logEventExample() {
   
   // Log an event named "purchase" with parameters
   logEvent("purchase", {
      content_type: "product",
      value: 123,
      currency: "USD",
      quantity: 2,
      items: [{
        item_id: "sample-item-id",
        item_variant: "232323"
      }],
      transaction_id: "1234567"
   });
}

function logUserPropertyExample() {
   // Set a user property named 'favorite_genre'
   setUserProperty("favorite_genre", "comedy")    
}

Yerel arayüzü uygulama

iOS veya Android için yerel bir arayüz uygulayabilirsiniz.

iOS

JavaScript'ten yerel Apple kodunu çağırmak için WKScriptMessageHandler protokolüne uygun bir mesaj işleyici sınıfı oluşturun. userContentController:didReceiveScriptMessage: geri çağırma işlevinde Google Analytics çağrıları yapabilirsiniz:

Swift

Not: Bu Firebase ürünü, watchOS hedefinde kullanılamaz. 
func userContentController(_ userContentController: WKUserContentController,
                         didReceive message: WKScriptMessage) {
  guard let body = message.body as? [String: Any] else { return }
  guard let command = body["command"] as? String else { return }
  guard let name = body["name"] as? String else { return }

  if command == "setUserProperty" {
    guard let value = body["value"] as? String else { return }
    Analytics.setUserProperty(value, forName: name)
  } else if command == "logEvent" {
    guard let params = body["parameters"] as? [String: NSObject] else { return }
    Analytics.logEvent(name, parameters: params)
  }
}

Objective-C

- (void)userContentController:(WKUserContentController *)userContentController
      didReceiveScriptMessage:(WKScriptMessage *)message {
  if ([message.body[@"command"] isEqual:@"setUserProperty"]) {
    [FIRAnalytics setUserPropertyString:message.body[@"value"] forName:message.body[@"name"]];
  } else if ([message.body[@"command"] isEqual: @"logEvent"]) {
    [FIRAnalytics logEventWithName:message.body[@"name"] parameters:message.body[@"parameters"]];
  }
}

Son olarak, mesaj işleyiciyi web görünümünün kullanıcı içeriği denetleyicisine ekleyin:

Swift

Not: Bu Firebase ürünü, watchOS hedefinde kullanılamaz. 
self.webView.configuration.userContentController.add(self, name: "firebase")

Objective-C

Not: Bu Firebase ürünü, watchOS hedefinde kullanılamaz. 
[self.webView.configuration.userContentController addScriptMessageHandler:self
                                                                     name:@"firebase"];

Android

JavaScript'ten yerel Android kodunu çağırmak için @JavaScriptInterface ile işaretlenmiş yöntemleri içeren bir sınıf uygulayın:

public class AnalyticsWebInterface {

    public static final String TAG = "AnalyticsWebInterface";
    private FirebaseAnalytics mAnalytics;

    public AnalyticsWebInterface(Context context) {
        mAnalytics = FirebaseAnalytics.getInstance(context);
    }

    @JavascriptInterface
    public void logEvent(String name, String jsonParams) {
        LOGD("logEvent:" + name);
        mAnalytics.logEvent(name, bundleFromJson(jsonParams));
    }

    @JavascriptInterface
    public void setUserProperty(String name, String value) {
        LOGD("setUserProperty:" + name);
        mAnalytics.setUserProperty(name, value);
    }

    private void LOGD(String message) {
        // Only log on debug builds, for privacy
        if (BuildConfig.DEBUG) {
            Log.d(TAG, message);
        }
    }

    private Bundle bundleFromJson(String json) {
        // ...
    }

}

Yerel arayüzü oluşturduktan sonra WebView'da çalışan JavaScript koduna görünür olması için WebView'a kaydedin:

// Only add the JavaScriptInterface on API version JELLY_BEAN_MR1 and above, due to
// security concerns, see link below for more information:
// https://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    mWebView.addJavascriptInterface(
            new AnalyticsWebInterface(this), AnalyticsWebInterface.TAG);
} else {
    Log.w(TAG, "Not adding JavaScriptInterface, API Version: " + Build.VERSION.SDK_INT);
}

iOS'te bir WebView'da uygulama içi satın alma işlemlerini manuel olarak günlüğe kaydetme

Analytics SDK'sı 12.5.0 veya sonraki sürümleri kullanarak bir WebView'da uygulama içi satın alma etkinliklerini manuel olarak günlüğe kaydedebilirsiniz.

function logManualPurchaseEvent() {
  // For manually tracking in-app purchases within a WebView, log the in-app purchase event:
  logEvent("in_app_purchase", {
    currency: "USD",
    price: 0.99,
    product_id: "prod_123",
    product_name: "Product 123",
    quantity: 1,
    value: 0.99,
  });
}

SDK'nın, mümkün olduğunda uygulama içi satın alma işlemlerini otomatik olarak günlüğe kaydetmeye devam edeceğini ve manuel olarak günlüğe kaydedilen uygulama içi satın alma etkinliklerini tekilleştirmeyeceğini unutmayın.

Sonraki adımlar

Google Analytics'ın WebView'da tamamen işlevsel bir uygulaması için analytics-webview örneğine bakın.