---
# System prepended metadata

title: Dataroid Entegrasyonu - WebView
tags: [Dataroid]

---

# Dataroid Entegrasyonu - WebView

### WebView MiniApp’e Neden Dataroid Entegre Edilmeli?

WebView MiniApp’inizin kabuk uygulama içerisindeki kullanıcı hareketlerinin takip edilebilmesi ve bu hareketlerin sistemsel olarak raporlanabilmesi gibi özellikleri kullanmak için Dataroid entegrasyonu yapılmalıdır.

### WebView MiniApp’e Dataroid Entegrasyonu için Kod Örneği
Dataroid beslemesinin tetikleneceği herhangi bir html element üzerinde aşağıdaki gibi bir yapı kurulabilir.

```html
<button onclick="triggerDataroidTrack">DataroidTrack</button>
```

Örnek olarak buton tıklandığında aşağıdaki function tetiklenerek dataroid besleme işlemi başlatılacaktır.

```js
function triggerDataroidTrack() {
    try {
        let dataroidParam = {
            eventName: "app_viewStart",
            params: {
                app_name: "WebViewAppName",
                viewLabel: "WebViewApp PageName",
            },
        };
        const message = {
            callFunction: {
                functionName: "dataroidTrack",
                param: dataroidParam,
            },
        };
        postAppMessage(JSON.stringify(message));
    } catch (err) {
        console.log("Error accoured while triggered dataroidTrack");
    }
}
```

Dataroid besleme işlemi kabukta tamamladığında aşağıdaki function tetiklenecek ve bunun içerisinde dönüş yapılan response içeriğine dair bilgi alınabilir olacaktır.

```js
function functionCallback(functionName, result) {
    switch (functionName) {
        case "dataroidTrack":
            setDataroidTrack(result);
            break;
        default:
            break;
    }
}
```
Yukarıdaki generic function diğer tüm kabuk tetiklemelerinde kabuğun yanıt döneceği alan olduğu için buradaki isim ve parametreler ile tanımlanması gerekmektedir.

Aşağıdaki function, yukarıdaki generic function içerisindeki kurguda belirtildiği hali ile eklenerek aşağıdaki kod ile gelen yanıt işlenebilir olacaktır.

```js
function setDataroidTrack(result) {
    const parsedResult = JSON.parse(result);
    console.log("Dataroid Track Result:", parsedResult);
}
```
Aşağıdaki function WebView MiniApp ile kabuk arasındaki haberleşmenin ana yapısı olduğu için aşağıdaki içerik ile eklenmesi gerekmektedir.

```js
// Function to post message to native app
function postAppMessage(message) {
    if (window.webkit !== undefined) {
        if (window.webkit.messageHandlers.miniapp !== undefined) {
            window.webkit.messageHandlers.miniapp.postMessage(message);
        }
        if (window.miniapp !== undefined) {
            window.miniapp.postMessage(message);
        }
    }
}
```
## MiniApp'e Dataroid Entegrasyonunda Kullanılabilir Event'ler ve Event Kuralları
1. **app_buttonclick Eventi**
MiniApp üzerindeki tüm butonların click eventinde beslenmelidir.
 
```json
dataroidParam = {
    eventName: "app_buttonclick",
    params: {
        button_name:"buttonName", //buton üzerinde yazan isim girilmeli
        app_name: "WebViewAppName", //miniapp adı girilmeli
        viewLabel: "WebViewApp PageName", //ekran ismi girilmeli
    },
};
```

2. **app_checkbox Eventi**
MiniApp üzerindeki tüm checkbox larda checkbox seçimi sonrasında alınan aksiyonda beslenmelidir. Her checkbox seçiminde beslenmemelidir.
 
```json
dataroidParam = {
    eventName: "app_checkbox",
    params: {
        text:"checkboxName", //checkbox'ta yazan metin girilmeli
        app_name: "WebViewAppName", //miniapp adı girilmeli
        viewLabel: "WebViewApp PageName", //ekran ismi girilmeli
        header: "checkboxHeader", //Checkbox'ın işlevini açıklayan bilgi girilmeli
    },
};
```

3. **app_inputEntry Eventi**
MiniApp üzerindeki tüm textfield larda textfield girişi bittikten sonra alınan aksiyonda beslenmelidir.
 
```json
dataroidParam = {
    eventName: "app_inputEntry",
    params: {
        text:"textfieldContent", //input' a girilen veri beslenmeli
        app_name: "WebViewAppName", //miniapp adı girilmeli
        viewLabel: "WebViewApp PageName", //ekran ismi girilmeli
        header: "textfieldHeader", //input' un işlevini açıklayan bilgi girilmeli
    },
};
```
4. **app_comboSelect Eventi**
MiniApp üzerindeki tüm combobox veya selectbox larda seçim yapıldıktan sonra alınan aksiyonda beslenmelidir.
 
```json
dataroidParam = {
    eventName: "app_comboSelect",
    params: {
        text:"selectedContent", //kullanıcının ekranda seçtiği değer verilmeli
        app_name: "WebViewAppName", //miniapp adı girilmeli
        viewLabel: "WebViewApp PageName", //ekran ismi girilmeli
        header: "comboHeader", //combo' nun işlevini açıklayan bilgi girilmeli
    },
};
```

5. **app_tx_completed Eventi**????
Miniapplerde httpCall yapılmadığı durumlarda alınan aksiyonun başarılı olması durumunda beslenecek eventtir. app_httpCall eventi ile aynı anda beslenmemelidir.
 
```json
dataroidParam = {
    eventName: "app_tx_completed",
    params: {
        app_name: "WebViewAppName", //miniapp adı girilmeli
        trx: "transactionInfo", //yapılan işlemin başarılı şekilde bittiğini ifade eden veri girilmeli
    },
};
```

6. **app_viewStart Eventi**
MiniApp lerde her bir başarılı sayfa açılışında beslenecek olan eventtir.
 
```json
dataroidParam = {
    eventName: "app_viewStart",
    params: {
        app_name: "WebViewAppName", //miniapp adı girilmeli
        viewLabel: "WebViewApp PageName", //ekran ismi girilmeli
    },
};
```

7. **app_popup Eventi**
MiniApp lerde popup açıldığı durumlarda beslenir. Kullanıcının popup üzerinde aldığı aksiyon bittikten sonra beslenir.
 
```json
dataroidParam = {
    eventName: "app_popup",
    params: {
        app_name: "WebViewAppName", //miniapp adı girilmeli
        viewLabel: "WebViewApp PageName", //ekran ismi girilmeli
        header: "popupHeader", //popup' ın başlığındaki bilgi girilmeli
        text:"popupContent", //popup içeriğindeki veri girilmeli
        buttonPressed : "buttonName", //ekranda basılan buton adı girilmeli, popup dışına basarak kapatıldı ise N/A beslenir.
    },
};
```

8. **app_httpCall Eventi**
MiniApp lerde http istekleri yapıldığında dönen cevaptan sonra beslenir. Başarılı veya başarısız tamamlansada event beslenmelidir.
 
```json
dataroidParam = {
    eventName: "app_httpCall",
    params: {
        app_name: "WebViewAppName", //miniapp adı girilmeli
        successCode: true/false, //işlem başarı durumuna göre true/false beslenmeli
        errorCode: "errorCode", //successCode false ise servisten dönen hata kodu beslenmeli
        errorMessage:"errorMessage", //successCode false ise servisten dönen hata mesajı beslenmeli
        requestUrl : "requestUrl", //http isteğin gittiği adres verilmeli
    },
};
```

9. **app_paymentCompleted Eventi**
MiniApp lerde yapılan ödeme işleminden sonra işlem başarılı veya başarısız olarak beslenmelidir.
 
```json
dataroidParam = {
    eventName: "app_paymentCompleted",
    params: {
        app_name: "WebViewAppName", //miniapp adı girilmeli
        trx: "orderId", //ödeme işlemine ait orderId girilmeli
        productInfo: "productInfo", //ürün/hizmet adı
        totalAmount: 1234,55, //işlem tutarı
        currencyCode : "TRY", //döviz cinsi verilmeli(TRY, USD, EUR vb.)
        successCode: true/false, //işlem başarı durumu beslenmeli
        errorCode:"errorCode", //successCode false ise ödeme hatasının kodu verilmeli
        errorMessage: "errorMessage", //successCode false ise ödeme hatasının mesajı verilmeli
        
    },
};
```



### WebView MiniApp’e Dataroid Entegrasyonu Nasıl Yapılır?
WebView MiniApp’inizde SuperPortal’de sürüm çıkışında **Dataroid Track** iznini verdikten sonra uygulamanız içerisinde uygun olan kısımlarında event’leri ekleyerek entegrasyonu gerçekleştirebilirsiniz.

![image](https://hackmd.io/_uploads/HkISo9Bieg.png)

### WebView MiniApp’e Dataroid Entegrasyonu Yaparken Dikkat Etmeniz Gerekenler
Webview MiniApp’inize Dataroid Entegrasyonu yapmak için 2 önemli konu bulunmaktadır.
* Sürüm içerisinde **Dataroid Track** consent’inin seçili olması gerekmektedir.
* Kullanacağınız event isimleri ve parametre isimleri dokümanda belirtildiği şekilde verilmesi gerekmektedir.

### WebView MiniApp’lerde Dataroid Entegrasyon Sorunu Yaşanırsa Ne Yapılmalı?
WebView MiniApp’inize Dataroid entegrasyonu yaparken karşılaştığınız sorun veya entegrasyon ile ilgili sorularınız için superapp@softtech.com.tr veya dbbsuperapp@isbank.com.tr den ulaşabilirsiniz.