# 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.