Bu sayfa, Cloud Translation API ile çevrilmiştir.

Android Web Görünümü'nde Firebase için Google Analytics'i Uygulama

1. Giriş

Last Updated: 2022-02-03

Neler öğreneceksiniz?

Android'de çok basit bir WebView oluşturma
Web görünümü etkinliklerini Firebase'e gönderme

Gerekenler

Analytics SDK'sının uygulandığı Firebase projesi
Android Studio 4.2 veya sonraki sürümler
Android 5.0 veya sonraki bir sürümün yüklü olduğu Android Emulator.
Java programlama diline aşina olmak
JavaScript programlama dili hakkında bilgi sahibi olmak

2. Android'de basit bir web WebView'u oluşturma

Etkinlik düzenine WebView ekleme

Düzeninizdeki uygulamanıza WebView eklemek için etkinliğinizin düzen XML dosyasına aşağıdaki kodu ekleyin:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".WebActivity"
>
  <WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  />
</androidx.constraintlayout.widget.ConstraintLayout>;

onCreate() içinde WebView ekleme

Bir web sayfasını WebView'da yüklemek için loadUrl() işlevini kullanın. WebView, siyah etkinlik üzerinde oluşturulmalıdır. Örneğin, bunu onCreate yönteminde uygulayacağım :

public class WebActivity extends AppCompatActivity {
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        // Navigate to site
        myWebView.loadUrl("https://bittererhu.glitch.me");
 }
}

Ancak bu özelliğin çalışması için uygulamanızın internete erişimi olması gerekir. İnternete erişmek için manifest dosyanızda INTERNET izni isteyin. Örneğin:

<uses-permission android:name="android.permission.INTERNET" />

Bir web sayfasını görüntüleyen temel bir WebView için ihtiyacınız olan tek şey budur.

WebView'larda JavaScript kullanma

WebView'nizde yüklemeyi planladığınız web sayfası JavaScript kullanıyorsa WebView'niz için JavaScript'i etkinleştirmeniz gerekir. JavaScript etkinleştirildikten sonra uygulama kodunuz ile JavaScript kodunuz arasında arayüzler de oluşturabilirsiniz.

JavaScript, WebView'da varsayılan olarak devre dışıdır. Bunu, WebView'unuza eklenen WebSettings üzerinden etkinleştirebilirsiniz. WebSettings'i getSettings() ile alabilir, ardından setJavaScriptEnabled() ile JavaScript'i etkinleştirebilirsiniz.

Örneğin:

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Güncellenen Etkinlik :

public class WebActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        WebView myWebView = (WebView) findViewById(R.id.webview);
        if(myWebView != null) {
            WebSettings webSettings = myWebView.getSettings();
            webSettings.setJavaScriptEnabled(true);
        }
        // Navigate to site
        myWebView.loadUrl("https://bittererhu.glitch.me");
  }
}

3. JavaScript köprülü arayüzünü uygulama

JavaScript işleyicisi

Google Analytics'i WebView'da 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, bunun hem Android hem de Apple yerel koduyla uyumlu olacak şekilde nasıl yapılacağı gösterilmektedir:

Bu örnekte, aşağıdaki kodu içeren script.js adlı bir JavaScript dosyası oluşturdum :

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.");
  }
}

Yerel arayüz

JavaScript'ten yerel Android kodunu çağırmak için @JavaScriptInterface ile işaretlenmiş yöntemlere sahip bir sınıf uygulayın. Aşağıdaki örnekte AnalyticsWebInterfcae.java adlı yeni bir Java sınıfı oluşturdum:

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) {
        // ...
    }
}

Once you have created the native interface, register it with your WebView so that it is visible to JavaScript code running in the WebView:

// 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);
}

Son Kod :

// [START analytics_web_interface]
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) {
        // [START_EXCLUDE]
        if (TextUtils.isEmpty(json)) {
            return new Bundle();
        }

        Bundle result = new Bundle();
        try {
            JSONObject jsonObject = new JSONObject(json);
            Iterator<String> keys = jsonObject.keys();

            while (keys.hasNext()) {
                String key = keys.next();
                Object value = jsonObject.get(key);
                if (value instanceof String) {
                    result.putString(key, (String) value);
                } else if (value instanceof Integer) {
                    result.putInt(key, (Integer) value);
                } else if (value instanceof Double) {
                    result.putDouble(key, (Double) value);
                } else {
                    Log.w(TAG, "Value for key " + key + " not one of [String, Integer, Double]");
                }
            }
        } catch (JSONException e) {
            Log.w(TAG, "Failed to parse JSON, returning empty Bundle.", e);
            return new Bundle();
        }
        return result;
        // [END_EXCLUDE]
    }

JavaScript arayüzünü ayarladınız. Artık analiz etkinlikleri göndermeye başlayabilirsiniz.

4. Arayüz üzerinden etkinlik gönderme

Burada görebileceğiniz gibi WebView'ım çok basit. İkisi etkinlik kaydeden, diğeri ise kullanıcı özelliği kaydeden üç düğmesi var :

Düğmeleri tıkladığımda "script.js" dosyam çağrılacak ve aşağıdaki kod yürütülecek :

document.getElementById("event1").addEventListener("click", function() {
    console.log("event1");
    logEvent("event1", { foo: "bar", baz: 123 });
});

document.getElementById("event2").addEventListener("click", function() {
  console.log("event2");
    logEvent("event2", { size: 123.456 });
});

document.getElementById("userprop").addEventListener("click", function() {
    console.log("userprop");
    setUserProperty("userprop", "custom_value");
});

Son script.js dosyası :

/* If you're feeling fancy you can add interactivity 
    to your site with Javascript */

// prints "hi" in the browser's dev tools console
console.log("hi");

// [START log_event]
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.");
  }
}
// [END log_event]

// [START set_user_property]
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.");
  }
}
// [END set_user_property]

document.getElementById("event1").addEventListener("click", function() {
    console.log("event1");
    logEvent("event1", { foo: "bar", baz: 123 });
});

document.getElementById("event2").addEventListener("click", function() {
  console.log("event2");
    logEvent("event2", { size: 123.456 });
});

document.getElementById("userprop").addEventListener("click", function() {
    console.log("userprop");
    setUserProperty("userprop", "custom_value");
});

Bu, etkinlikleri Analytics'e göndermenin temel yoludur.

5. Firebase'de WebView etkinliklerinde hata ayıklama

Uygulamanızdaki WebView etkinliklerinin hata ayıklaması, SDK'nızın yerel kısımlarının hata ayıklamasıyla aynı şekilde yapılır :

Hata Ayıklama modunu etkinleştirmek için lütfen Android Studio konsolunuzda aşağıdaki komutları kullanın:

adb shell setprop debug.firebase.analytics.app package_name

İşlemi tamamladıktan sonra test edebilir ve WebView etkinliklerinizin gerçekleştiğini görebilirsiniz :

6. Tebrikler

Tebrikler, Android uygulamanızda başarıyla bir web görünümü oluşturdunuz. Uygulamanızda web görünümleri aracılığıyla gerçekleşen önemli dönüşüm hunisi etkinliklerini gönderebilir ve ölçebilirsiniz. Bu özellikten en iyi şekilde yararlanmak için Google Ads'e bağlanmanızı ve bu etkinlikleri dönüşüm olarak içe aktarmanızı da öneririz.

Bu kursta öğrendikleriniz:

Web görünümü etkinliklerini Firebase'e gönderme
Android'de basit bir WebView nasıl ayarlanır ve oluşturulur?

Android Web Görünümü'nde Firebase için Google Analytics'i Uygulama Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.