1. Giriş
Son Güncelleme: 2022-02-03
Ne öğreneceksin
- Android'de çok basit bir Web görünümü nasıl oluşturulur
- Web görünümü etkinlikleri Firebase'e nasıl gönderilir?
İhtiyacınız olan şey
- Analytics SDK'nın uygulandığı Firebase Projesi
- Android Studio sürüm 4.2+.
- Android 5.0+ sürümüne 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şturun
Etkinlik düzenine Web görünümü ekleme
Uygulamanıza düzende bir Web Görünümü 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()'a Web Görünümü ekleme
Web Görünümüne bir web sayfası yüklemek için loadUrl() işlevini kullanın. Web görünümü siyah etkinlikte 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 bunun işe yaraması için uygulamanızın İnternet erişiminin olması gerekir. İnternet erişimi elde etmek için bildirim dosyanızda İNTERNET iznini isteyin. Örneğin:
<uses-permission android:name="android.permission.INTERNET" />
Bir web sayfasını görüntüleyen temel bir Web Görünümü için ihtiyacınız olan tek şey budur.
Web Görünümlerinde Javascript Kullanımı
Web Görünümünüze 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. Bunu Web Görünümünüze eklenen Web Ayarları aracılığıyla 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 uygulanması
Javascript İşleyicisi
Google Analytics'i bir Web Görünümünde kullanmanın ilk adımı, etkinlikleri ve kullanıcı özelliklerini yerel koda iletmek için JavaScript işlevleri oluşturmaktır. Aşağıdaki örnek, bunun hem Android hem de Apple yerel koduyla uyumlu bir şekilde nasıl yapılacağını gösterir:
Bu örnekte, aşağıdakileri içeren script.js adında 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
Yerel Android kodunu JavaScript'ten çağırmak için, @JavaScriptInterface olarak işaretlenmiş yöntemlere sahip bir sınıf uygulayın: Aşağıdaki örnekte, AnalyticsWebInterfcae.java adında 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]
}
Artık Javascript arayüzünü kurdunuz, artık analitik olayları göndermeye hazırsınız.
4. Arayüz aracılığıyla Olayların Gönderilmesi
Burada görebileceğiniz gibi, Web görünümüm çok basittir; ikisi bir etkinliği günlüğe kaydedecek, diğeri ise bir kullanıcı özelliğini günlüğe kaydedecek üç düğmeye sahiptir:
Düğmelere tıkladığımda "script.js" dosyamı çağıracak ve aşağıdaki kodu çalıştıracak:
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'deki Web Görünümü etkinliklerinde hata ayıklama
Uygulamanızdaki Webview etkinliklerinde hata ayıklama, SDK'nızın herhangi bir yerel bölümündeki hata ayıklamayla aynı şekilde çalışır:
Hata Ayıklama modunu etkinleştirmek için lütfen Android stüdyo konsolunuzda aşağıdaki komutları kullanın:
adb shell setprop debug.firebase.analytics.app package_name
İşiniz bittiğinde Web görünümü etkinliklerinizi test edebilir ve hayata geç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. Bundan 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.
öğrendin
- Web Görünümü etkinlikleri Firebase'e nasıl gönderilir?
- Android'de basit bir Web görünümü nasıl kurulur ve oluşturulur