How can I separate Firebase event analytics by platform? - javascript

We have an iOS app, an Android app and a Web app, all utilizing Firebase for analytics. In Firebase, these are listed under the Prod 'project' as different apps within the same project.
I noticed for our list of events, it seems our apps are sharing similar events. Such as when a user logs in, etc.
But how can I dig into those event analytics and see what platform each event was triggered from? How can I check how login events come from Web alone?
Obviously I could make a custom event called 'Web Login Event' but that seems like it would go against our Event naming standards and possibly clutter our list of Events. Any way to separate event analytics by platform (app) out of the box?

Firebase, despite having a robust data structure, provides extremely poor toolset to access the data and query it properly.
You want to connect your Firebase to GA4. Once done, you will have all your data in a proper space for analysis since GA4's data structure was completely copied from that of Firebase. Since GA4 is still a new and certainly buggy product, it is advised to only use the explorer and change the data retention setting to the maximum that's allowed to you. By default, it's just 2 months.
Now that should solve your analysis requirements, but if you need to go even deeper than that, you can always link your GA4 property to BQ and then have the full power of SQL at your feet.

Related

How to reliably reconstruct the DOM in real-time to do co-browsing (mirroring webpage usage)

There are some SaaS tools [1, 2] that give you a plugin to run on your site, so that you can view how your users are interacting with your website remotely.
I'm guessing this works by streaming DOM updates back to a remote server, but I'm not sure of that. I'm really interested in how this technology works, and whether or not there are tools out there to do similar tasks.
Here's the question: How do they do it? How can we reliably "co-browse" through the use of an installed Javascript snippet? I know of some solutions using WebRTC, but the browser support doesn't seem to be there yet
This is known as session replay.
I'm guessing this works by streaming DOM updates back to a remote server
No, it probably doesn't care about DOM updates. The script would capture every single input event, including key presses, mouse moves, mouse clicks, scroll events etc. Those are what UX designers are usually care about when evaluating their page design. They also might capture the initial state of the DOM.
If those plugins are just for data acquisition (like in A/B tests), I don't think the plugin scripts do actually live-stream those events. It probably captures them, stores them in some compressed data structure, and sends it to the service provider when the user leaves the page or in regular intervals.
Live streaming would certainly be possible, and it seems to be that this is what that co-browsing plugin does. (There's apparently also a back channel - a huge security risk! - to trigger mouse clicks etc remotely). WebRTC (which also could feed the complete video) might one approach, but a web socket would be enough.
Some documentation on how togetherjs in particular does it can be found at https://togetherjs.com/docs/#technology-overview.

Sending data SAP Fiori launchpad webapp/SAPUI5 webapp from client side javascript

This is a general question I have as I am exploring the world of automating some tasks in my workplace.
We have a portal/launchpad environment on our businesses website which has apps shown as tiles.
One of these apps when opened has a homepage that has a bunch of search fields and selectors to interface with (I assume) SAP data.
Ultimately my goal is to be able to send a number to a specific search field on a client-side local webapp (just plain old HTML/jquery stuff) and execute a search for that number in the sapui webapp.
I am getting to an competent level with javascript/HTML/CSS but am completely lost as to where to start with this type of issue as the MVC stuff is completely alien to me.
All my experience has been in creating completely client-side web apps with mostly interface with a local MS Access database.
Is what I am suggesting even possible?
So far I can open the homepage by executing the following code that someone else in the organization used:
window.open('https://fiori.mycompany.com/sap/bc/ui5_ui5/sap/z_cs_ch/index.html
Is it possible to add some form of string after a ?.... at the end of the url?
Again I am completely new to this and looking at the development guides in sapui website isn't shedding any light on it either. Possibly because I don't really know exactly what I am looking for!
Any help /guidance is greatly appreciated.
EDIT:
After comments below I can see the request sent to server is in the following format:
Request GET /sap/opu/odata/sap/someotherlocation/SearchTerm('<variable to search for>')?$format=json HTTP/1.1
Am I right in thinking I could potentially send an ajax request to do something similar? If so, how do I go about it?
Thanks again
There are possibilties to achieve that but i think it's not a real good solution, to fill fields in another web application and to trigger the search.
It would be better if you know the backend service which is used by this Fiori App, and to integrate directly the service. If it's an Fiori App i might be an OData /REST Service. Odata/REST Service also can be called by HTML/jquery JavaScript stuff too.
In order to determine the Service URL and the payload which is used by the web app with the search field, just use Chrome Debugger Tools (or other Browser Debug Tools) and check under Network which server address and which payload parameters are sent to the server, when you trigger the search manually. Hope that helps you little bit.
In the whole Fiori concept, it is definitely possible to have applications to call other applications and to get them to open up exactly at the point the user expects it. E.g. from a order click on a product to be brought to the material master, and have the material master app exactly show the product the user clicked on.
As you mentioned, this would indeed require the target application (that is navigated to) to support some parameters. You mentioned in your question already that you wondered if it would be possible to add a "?...." section to the URL. Fiori apps definitely support this concept, but how it is implemented depends very much on the app itself. In my previous example it could be as easy as e.g. adding ?product_id=abcde though.
Fiori also has very nice extensibility concepts built-in. So if your target app doesn't exactly support the parameters you intend to pass, you could easily extend the app to support it, without having to rewrite of copy the entire app (which would be a disaster when you receive updated from the original developer).
To navigate from one Fiori app to the other, it is advised to use the toExternal method of the CrossApplicationNavigation service, which comes with the Fiori launchpad. This service allows you to specify parameters such as the app you'd like to navigate to, the intent (display, create etc), parameters (such as product ID) and a app specific route (e.g. /supplierdetails to see the supplier details of a product).
The CrossApplicationNavigation service is officially documented in the SAPUI5 SDK, but I'm afraid that the SDK doesn't contain a very elaborate description. However, if you Google for it, you'll find extensive information and examples on SCN and Stackoverflow on this topic as well.
As promised here is what I got to work - actually got the overall method from an answer on here somewhere else.
This will send back enough detail that I can at least show the user some updates however after searching around I believe what I really need to be able to do is batch requests... I'm looking into Apache Olingo to see if that's possible.
function orderSmmary(SO) {
var uri = "https://fiori.<company>.com/sap/opu/odata/sap/<environment>/Details('"+ SO + "')?$format=json";
var http_request = new XMLHttpRequest();
http_request.onreadystatechange = function() {
if (http_request.readyState == 4 ) {
var data = JSON.parse(http_request.responseText);
// Do lots of awesome stuff with response
}
}
http_request.open('GET',uri, true);
http_request.setRequestHeader("Authorization", "Negotiate");
http_request.send();
}
Again this is an entirely clientside solution from completely outside any flori environment so I am hoping to stay completely javascript based.

Best practice for on/off line data synchronization using AngularJS and Symfony 2

I'm building a relatively complex and data heavy web application in AngularJS. I'm planning to use php as a RESTful backend (with symfony2 and FOSRESTbundle). I have spent weeks looking around for different solutions to on/off line synchronization solutions and there seem to be many half solutions (see list below for some examples). But non of them seem to fit my situation perfectly. How do I go about deciding which strategy will suite me?
What issues that might determine “best practices” for building an on/off line synchronization system in AngularJS and symfony 2 needs some research, but on the top of my head I want to consider things like speed, ease of implementation, future proof (lasting solution), extensibility, resource usage/requirements on the client side, having multiple offline users editing the same data, how much and what type of data to store.
Some of my requirements that I'm presently aware of are:
The users will be offline often and then needs to synchronize (locally created) data with the database
Multiple users share some of the editable data (potential merging issues needs to be considered).
User's might be logged in from multiple devices at the same time.
Allowing large amount of data to be stored offline(up to a gigabyte)
I probably want the user to be able to decide what he wants to store locally.
Even if the user is online I probably want the user to be able to choose whether he uses all (backend) data or only what's available locally.
Some potential example solutions
PouchDB - Interesting strategies for synchronizing changes from multiple sources
Racer - Node lib for realtime sync, build on ShareJS
Meteor - DDP and strategies for sync
ShareJS - Node.js operational transformation, inspired by Google Wave
Restangular - Alternative to $resource
EmberData - EmberJS’s ORM-like data persistence library
ServiceWorker
IndexedDB Polyfill - Polyfill IndexedDB with browsers that support WebSQL (Safari)
BreezeJS
JayData
Loopback’s ORM
ActiveRecord
BackBone Models
lawnchair - Lightweight client-side DB lib from Brian Leroux
TogetherJS - Mozilla Labs’ multi-client state sync/collaboration lib.
localForage - Mozilla’s DOMStorage improvement library.
Orbit.js - Content synchronization library
(https://docs.google.com/document/d/1DMacL7iwjSMPP0ytZfugpU4v0PWUK0BT6lhyaVEmlBQ/edit#heading=h.864mpiz510wz)
Any help would be much appreciated :)
You seem to want a lot of stuff, the sync stuff is hard... I have a solution to some of this stuff in an OSS library I am developing. The idea is that it does versioning of local data, so you can figure out what has changed and therefore do meaningful sync, which also includes conflict resolution etc. This is sort-of the offline meteor as it is really tuned to offline use (for the London Underground where we have no mobile data signals).
I have also developed an eco system around it which includes a connection manager and server. The main project is at https://github.com/forbesmyester/SyncIt and is very well documented and tested. The test app for the ecosystem will be at https://github.com/forbesmyester/SyncItTodoMvc but I have yet to write virtually any docs for it.
It is currently using LocalStorage but will be easy to move to localForage as it actually is using a wrapper around localStorage to make it an async API... Another one for the list maybe?
To work offline with your requeriments I suggest to divide problem into two scenarios: content (html, js, css) and data (API REST).
The content
Will be stored offline by appcache for small apps or for advanced cases with the awesome serviceworkers. Chrome 40+.
The data
Require solve the storage and synchronization and It becames a more difficult problem.
I suggest a deep reading of the Differential Synchronization algorimth, and take next tips in consideration:
Frontend
Store the resource and shadow (using for example url as key) into the localstorage for small apps or into more advanced alternatives (pouchdb,indexdb,...). With the resource you could work offline and when needs synchronize with the server use jsonpath to get diffs between the resource-shadow and to send it to server the PATCH request.
Backend
At backend take in consideration storage the shadow copies into redis.
The two sides (Frontend/Backend) needs to identify the client node, to do so you could use x- syn-token at HTTP header (send it in all request of the client with angular interceptors).
https://www.firebase.com/
it's reliable and proven, and can be used as a backend and sync library for what you're after. but, it costs, and requires some integration coding.
https://goinstant.com/ is also a good hosted option.
In some of my apps, I prefer to have both: syncing db source AND another main database. (mogno/express, php/mysql, etc..). then each db handles what's its best with, and it's features (real-time vs. security, etc...). This is true regardless to sync-db provider (be it Racer or Firebase or GoInstant ...)
The app I am developing has many of the same requirements and is being built in AngularJS. In terms of future proofing, there are two main concerns that I have found, one is hacking attempts requiring encryption and possible use of one time keys and an backend key manager and the other is support for WebSQL being dropped by the standards consortium in preference to indesedDB. So finding an abstraction layer that can support both is important. The solution set I have come up with is fairly straight forward. Where offline data is is loaded first into the UI and a request goes out to the REST Server if in an online state. As for resolving data conflicts in a multi user environment, that becomes a business rule decision. My decision was to simplify the matter and not delve into data mergers but to use a microtime stamp comparison to determine which version should be kept and pushed out to clients. When in offline mode, store data as a dirty write and the push to server when returning to an online state.
Or use ydn-db, which I am evaluating now as it has built in support for AWS and Google cloud storage built in.
Another suggestion:
Yjs leverages an OT-like algorithm to share a wide range of supported data types, and you have the option to store the shared data in IndexedDB (so it is available for offline editing).

Webapp able to work offline !

I have to design an webapp that has the capability of working offline.
So there are many working points that in normal mode work online , connected to a central server.
Now there are moments when for different reasons , the central server might not be available.
(no internet ,server crash etc) so then is needed to enter in offline work mode.
Is not required to work fully just to do some work because clients should not wait , so invoicing should be possible (concrete case).
A custom solution I already have in mind but I am wondering if you know a framework or something that does such things already.
Thank you !
We wrote a desktop app for hundreds of employees to use on their laptops. It used database replication to merge the data from the laptop copy of the database to the server copy of the database. The amount of data contained in the database was significant -- product information, customer contact information, and so on. That was all needed for the rep to be able to create sales orders and invoices and the like. It was crucial that the rep be able to use the software all the time, not just once in a while when they had connectivity. However, this approach does have its challenges -- if the local databases don't get synched up frequently, data at both ends becomes stale, plus you have to deal with conflicing updates.
If the amount of database information needed locally for working disconnected isn't huge, you definitely can take advantage of the new HTML5 offline storage and use a website.
I think that the critical factors here are how much data the user needs when they are working offline, how fresh the data needs to be, and what percentage of time they will be working online vs. offline.
If your app is html/javascript, use the HTML5 application manifest. See the following resources
http://www.w3.org/TR/offline-webapps/
http://www.webreference.com/authoring/languages/html/HTML5-Application-Caching/
You can use Google Gears.
Here is another link: http://www.scriptol.com/ajax/google-gears.php

Silverlight HTML-JS-DOM Bridge : Real world use cases?

I've seen a lot of stuff online that shows proof of concept tutorials of how Silverlight can be used to enhance web pages by handing tasks off to it to make use of threading, manipulate the DOM, achieve Comet-like functionality etc.
It all seems very interesting, however, has any one got any real world use cases to share as I can't seem to find many.
Sure. I have used the HTML DOM interaction for several reasons.
First, when migration an existing ASP.NET application to Silverlight. In the architecture we worked with, the application was very heavily AJAX-based with plenty of callbacks. Instead of reinventing the wheel for Silverlight, we were able to use the DOM interaction to provide a bridge so the Silverlight control could callback in a similar fashion. This meant using the ASP.NET security and viewstate information to fetch information from the server and pull into the Silverlight application. We were already returning data in a JSON format so it was straightforward to parse back into the Silverlight application.
Another example is interaction with third-party controls and services. For example, Google Analytics provides rich page tracking features. This project provides a prime example:
http://silverlightanalytics.codeplex.com/
Where the application can integrate and even though you are running in Silverlight, you are essentially tracking clicks, actions, and page views.
Another place I've used this is when Silverlight isn't used as an application, but instead more of a part or a control on the page. While Silverlight controls can communicate with each other using the local communication, this doesn't work with other non-Silverlight controls. By using the HTML-DOM bridge you can easily build JavaScript-based communicatin between the components. Maybe the Silverlight control, for example, is an interactive world map that allows you to browse to a region. When you select the region, it raises a JavaScript event that the other controls listen to and update based on that reason.
You can also use Silverlight as a control like a Captcha control where your form uses the DOM bridge to validate user input into the Silverlight application.
I've seen tag cloud applications where the Silverlight control uses the DOM interaction to walk the current page and then generate an animated cloud of tags based on this.
Hopefully those provide some real world examples.
One thing I've used the DOM-Bridge for is to raise events. The html pages that host my application subscribe to these events and react consequently.
For example, my application receives and displays sales data coming from a WCF webservice. When the data changes, an event is raised so that the rest of the page can display other things.
If you can't use ASP.Net, asking and receiving data from a webservice is much easier and less error-prone in Silverlight than in Javascript (and is also faster because you can use the optimized "binary-xml" encoder).
I think the DOM bridge is most useful when you distribute a silverlight app to be embedded in arbitrary websites where you can't make assumptions on the backend environment but need to provide ability to interact with the SL app.

Categories