I have made an app using React (Web) and bundled it using Cordova.
I am using a plugin called 'react-ga' for tracking Google Analytics.
I initialise react-ga when the app is run using:
ReactGA.initialize('my-ga-uid', { debug: true, cookieDomain: 'auto' })
And create an event using something like:
ReactGA.event({
category: 'Test',
action: 'Test button pressed event.'
})
or,
ReactGA.set({ location.pathname })
ReactGA.pageview(location.pathname)
The analytics work fine in the browser and on dev builds, however when I bundle a build for iOS or Android, the analytics don't seem to be tracked?
Is there something wrong with my code? Do I need to initialise something else? Do I need a cordova plugin instead (although I want analytics to still work in a web browser)?
ReactGA.set({ checkProtocolTask: null }) // Disable file protocol checking.
You may need to create a GA property for your mobile app that is a separate property from your website. When you set up a new property, you have the option to choose between a website and a mobile app.
I was using ReactGA in an Android webview:
I needed to do the following:
ReactGA.set({ checkProtocolTask: null, checkStorageTask: null })
to get passed the following errors:
"Unallowed document protocol. Aborting hit"
"Storage not available. Aborting hit."
Related
I am using Google Auth OAuth 2.0 One Tap Sign and Sveltekit,
and I got some really weird behavior,
I followed this doc https://developers.google.com/identity/gsi/web/guides/overview with javascript
onMount(async () => {
const handleCredentialResponse = async (response) => {
console.log('Encoded JWT ID token: ' + response.credential);
};
google.accounts.id.initialize({
client_id: clientId,
callback: handleCredentialResponse,
});
google.accounts.id.renderButton(
document.getElementById('buttonDiv'),
{ theme: 'outline', size: 'large' } // customization attributes
);
google.accounts.id.prompt();
});
the code from the doc.
Sometimes it works everything goes well,
Sometimes I got
Uncaught (in promise) ReferenceError: google is not defined
And some mobile / mobile browsers I get
[GSI_LOGGER]: The given origin is not allowed for the given client ID.
but works on laptop
Hope someone can understand and help.
Do we have any way to check logs for investigation?
I got your code to successfully run without modification: https://google-signin-kit.vercel.app/ (This app is in "dev" mode so signin may only succeed with my Google account. If you clone my repo and set your Google client id, signin will work for you.)
I would check how my code is different from your code outside onMount(). For example, how did you include the Google javascript? I describe one major change below.
You also need to check your Google app settings. [GSI_LOGGER]: The given origin is not allowed... is fixed by adding the HTTPS app domain to your Google app "Authorized JavaScript origins." Non-HTTPS domains are not allowed. For example, these domains would not work:
https://google-signin-kit-leftium.vercel.app/ (Not added as Authorized JavaScript origin)
http://google-signin-kit.vercel.app/ (Not HTTPS, if Vercel did not automatically redirect to HTTPS)
Of course, raw IP addresses will not work, either.
localhost is a special exception, but not easy (impossible?) to access from mobile.
ReferenceError: google is not defined (sometimes) happens because onMount() runs before the Google script is loaded.
To get a consistent reproduction, USB debug/inspect Android Chrome and set "disable caching" and throttling to "Slow 3G." (I could not reproduce on desktop Chrome).
Fixed by removing defer async when including Google's script: <script src="https://accounts.google.com/gsi/client"></script>
It should also be possible to call a function after the script is loaded, but I got inconsistent results in SvelteKit. For some reason Kit doesn't always call the load function. Possibly a bug?
Ideally, the Google script should be imported, but I couldn't find a version of the Google script that was built for importing. You may be able to construct a library that you can import? Importing would compile the Google script code into your app, tree-shaking the unused portions. Thus saving a network request and bandwidth.
Another workaround is to have your onMount function check for the google variable. If google is still undefined, call your function again after a certain timeout.
I'm trying to integrate amplitude-js with React and Gatsby. Everything looks good when doing gatsby developer since it's happening inside the browser, but when I try gatsby build I get the following error because Gatsby build is happening on the server where we don't have window object:
WebpackError: window is not defined
amplitude.js:2428
~/amplitude-js/amplitude.js:2428:2
Here is my amplitude module:
import amplitude from 'amplitude-js';
amplitude.getInstance().init('API-KEY', null, {
// optional configuration options
saveEvents: true,
includeUtm: true,
includeReferrer: true,
});
Gatsby build is not working: window is not defined.
If if I'm not using this part anywhere in a project error is pointing to this part:
if (windowLocalStorageAvailable()) {
localStorage = window.localStorage;
} else if (window.globalStorage) { // <- here
// Firefox 2-3 use globalStorage
// See https://developer.mozilla.org/en/dom/storage#globalStorage
try {
This error happens because Amplitude JS SDK expects to be inside browser window object and have access to window context to collect properties like IP address, OS, Browser, device_id from the cookie, etc from it.
Does your app any type of backend you could sent events from?
To send data to Amplitude you are not required to use Amplitude SDK you have REST endpoint as well.
https://help.amplitude.com/hc/en-us/articles/360032842391-HTTP-API-V2
HTTP API also has 3rd party maintained nodejs wrapper https://github.com/crookedneighbor/amplitude
I'm having problems getting Branch.io to work in a Cordova powered Android app. I have a landing page that parses the data from branch.io deep links and forwards the user to the correct page. My javascript for this page contains:
function onDeviceReady() {
console && console.log("Device Ready");
initBranch();
}
function initBranch() {
branch.init(<branchKey>, function(err, data) {
console && console.log("branch init error: " + err);
//then the parsing and forwarding follows - omitted here
}
I then created a Branch.io deep link to this landing page in the web api and tested it in chrome which works.
Then i tried to move to the Cordova app...
I followed this guide to prepare the app for branch.io:
https://dev.branch.io/recipes/quickstart_guide/cordova/ (I installed the plugin and adapted the Manifest file.)
But when i try to open the same link that worked in chrome on my Android device the app opens correctly and the landing page loads, but i'm not forwared. Instead i see the following error in logcat:
I/chromium(19382): [INFO:CONSOLE(22)] "Device Ready"
[...]
I/chromium(19382): [INFO:CONSOLE(29)] "branch init error: Error: API request /v1/open missing parameter device_fingerprint_id"
Can anyone tell me what i'm doing wrong? I'm just getting to know Cordova and Branch.io so it's probably something small i'm overlooking.
Thanks,
Lif
A colleague of mine figured it out:
Branch.io creates an entry branch_session in the local storage of the android device. On my device this session was corrupted somehow and the device_fingerprint_id was empty:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":null,"browser_fingerprint_id":null,"link":"<link>","data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
After clearing the local storage* the session was freshly created, and now looks like this:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":"118176839880411216","browser_fingerprint_id":null,"link":<link>,"data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
And now deep linking works.
Kr,
Lif
* To clear the local storage i used chrome://inspect --> inspect webview, go to resources tab, choose "local storage" and the the correct url, then remove all values.
I developed PhoneGap app that integrates Google Analytics.
I used only "ga.js" javascript file. It is edited, replacing "file:" string with "_file:" string), and integrated in project.
I use instructions like this to register user actions:
window._gaq.push(["_trackEvent", "Application", "start"]);
...
window._gaq.push(["_trackEvent", "Pageview", pagecode]);
...
window._gaq.push(["_trackEvent", "Command", command, optLabel]);
It works fine in Android and iOS.
But it don't works in WP7: I don't receive any error, but
Can you help me?
I am trying to work with Meteor. Now I have the entire setup running in my localmachine with apache2 and the meteor.js also works when browsing the same URL from Android Emulator's Browser . Now the main problem is that I need the functionality in my android app from a local URL and here the page is not able to load the remote js. I am loading the following html using WebViews loadURL method after setting the javascript as enabled .The js embedded in the html will be something like this
<script type="text/javascript" src="http://meteor.mywebserver.com/meteor.js"></script>
<script type="text/javascript">
window.onload = function()
{
Meteor.host = "meteor.mywebserver.com";
alert(textStatus);
// Call the test() function when data arrives
Meteor.registerEventCallback("process", commentsUpdate);
// Join the demo channel and get last five events, then stream
Meteor.joinChannel("demo", 0);
Meteor.mode = 'longpoll';
// Start streaming!
Meteor.connect();
// Handle incoming events
function commentsUpdate(data)
{
alert(data);
};});
After searching around a lot I tried this stackoverflow answer
To no avail . Can anybody help me find a work around here , I cant use a local meteor.js as it wont work.
Thanks
This has since been addressed in Meteor by way of integrated Cordova, which you can read about here. Basically, you tell Meteor that you want to add the Android platform to your app, and it builds the Android project files for you. Your app will look as if it's running native, but it's really just running in a light app surrounding a "web view". In iOS this is done using WebKit, but I think in Android it depends on the version of the OS.
You will still need to deploy your app to the Play store, which requires signing the app and all.