1. Giriş
Son güncelleme tarihi: 03.02.2022
Neler öğreneceksiniz?
- Android'de çok basit bir Web Görünümü nasıl oluşturulur?
- 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 ve sonraki sürümlere sahip bir Android Emülatör.
- Java programlama diline aşinalık.
- JavaScript programlama diline aşinalık.
2. Android'de basit bir web web görünümü oluşturma
Etkinlik düzenine Web Görünümü ekleme
Düzende uygulamanıza bir WebView eklemek için aşağıdaki kodu etkinliğinizin düzen XML dosyasına 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şlevinde Web Görünümü ekleme
WebView'da bir web sayfası yüklemek için loadUrl() işlevini kullanın. Web Görünümü siyah etkinliğinde oluşturulmalıdır. Örneğin, bunu onCreate yöntemine 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 bunun için uygulamanızın internete erişimi olması gerekir. İnternet erişimi elde etmek için manifest dosyanızda INTERNET iznini isteyin. Örneğin:
<uses-permission android:name="android.permission.INTERNET" />
Bir web sayfasını görüntüleyen temel bir WebView için tüm ihtiyacınız olan budur.
Web Görünümlerinde JavaScript Kullanma
WebView'da yüklemeyi planladığınız web sayfası JavaScript kullanıyorsa Web Görünümünüz için JavaScript'i etkinleştirmeniz gerekir. JavaScript etkinleştirildikten sonra, uygulama kodunuz ile JavaScript kodunuz arasında arayüzler de oluşturabilirsiniz.
JavaScript, Web Görünümü'nde varsayılan olarak devre dışıdır. Bu özelliği, Web Görünümünüze bağlı Web Ayarları'ndan etkinleştirebilirsiniz. WebSettings'i getSettings() ile alabilir, ardından JavaScript'i setJavaScriptEnabled() ile 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 İşleyici
Google Analytics'i bir Web Görünümü'nde 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 şekilde nasıl yapılacağı gösterilmektedir:
Bu örnekte, komut dosyası.js adında aşağıdakileri içeren 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 işaretli 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);
}
Nihai 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 ve analiz etkinlikleri göndermeye hazırsınız.
4. Arayüz üzerinden Etkinlik Gönderme
Burada görebileceğiniz gibi Web Görünümüm çok basit. Biri etkinlik kaydedecek, diğeri ise kullanıcı özelliğini günlüğe kaydedecek üç düğme var :
Düğmeleri tıkladığımda "script.js" dosyamı çağırır dosyasını açın ve şu kodu yürütün :
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");
});
Nihaiscript.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");
});
Analytics'e etkinlik göndermenin temel yöntemi budur.
5. Firebase'de Web Görünümü etkinliklerinde hata ayıklama
Uygulamanızdaki Web Görünümü etkinliklerinde hata ayıklama, SDK'nızın yerel bölümlerinde hata ayıklama ile aynı şekilde çalışı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
Tamamladıktan sonra, Web Görünümü etkinliklerinizi test edebilir ve bunların nasıl canlandığını görebilirsiniz :
6. Tebrikler
Tebrikler, Android uygulamanızda başarıyla bir web görünümü oluşturdunuz. Uygulamanızda gerçekleşen ve web görünümleri aracılığıyla gerçekleşen önemli dönüşüm hunisi etkinliklerini gönderebilir ve ölçebilirsiniz. Ayrıca 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ı öneririz.
Öğrendikleriniz
- Web Görünümü etkinliklerini Firebase'e gönderme
- Android'de basit bir Web Görünümü nasıl kurulur ve oluşturulur?