How to implement Google Analytics event tracking inside a React VR project? - javascript

This is loosely written to give a basic idea of what I'm trying achieve.
< VrButton onClick={props.userClick}>< /VrButton>
userClick={() => this.triggerTracking}
triggerTracking() {
ga('send', 'event', 'myEventCategory', 'myEventAction', 'myEventLabel');
}
I expect the code to trigger Google Analytics event tracking in the GA system when the user clicks on a button, but I get an error message - "ga is not a function".
I have GA set up in my index.html file, with the proper ID, and pulling in the latest analytics.js API.

React VR is all within a web worker context so it is not possible to access anything on your window without the use of native modules.
You can embed them directly in your client js and use the GA tracking functions as you normally would there. You will then call a function on your native module within your react VR app.
You can check out the documentation here: https://facebook.github.io/react-vr/docs/native-modules.html

Try using the window scope as:
window.ga('send', 'event', 'myEventCategory', 'myEventAction', 'myEventLabel');
I'm not familiar with React at all, but perhaps React causes some abstraction between the window and the react scope, making your ga() function unavailable.

Do next stps:
open the network debug tool of your browser.
reload your page
review loaded url list and check that www.google-analytics.com/analytics.js is loaded
If you does not see such url loaded - read google analitycks manual about how to setup google analytics on your page.
If you see such url replace url www.google-analytics.com/analytics.js with www.google-analytics.com/analytics_debug.js in your page, than reload and than go to console tab of your browser debugger and check the errors.

Related

Google Sign-In API Hang with uncaught error Failed to get parent origin from URL hash

I'm using Google Sign-In JavaScript client for months without problem.
But recently when user tapping on sign in button from webapp that added to homescreen, the signin pop-up just hang without showing any content.
When debugged via remote debugging, an error is displayed in console pane:
Uncaught Failed to get parent origin from URL hash!
originated from 4188232449-v2-idpiframe.js:136 (javascript loaded internally by google library).
I'm sure it's not programming/config error since the same webapp was previously working for months without problem, and I haven't modified any code.
I've tried google search for this particular problem and browse Google documentation for any recent changes in Google Sign-In API without any luck.
Is it bug from Google API Javascript client library, glitch from recent Chrome browser update on Android, or there is some changes in API usage that I doesn't yet aware?
Library used is https://apis.google.com/js/platform.js
This is init param for gapi.auth2.init():
{
client_id: GAPI_CID, // defined as constant
cookiepolicy: 'single_host_origin',
prompt: 'select_account',
ux_mode: 'popup',
fetch_basic_profile: true
}
Any insight will be much appreciated. Thank you.
P.S.: This problem is different with Uncaught Failed to get parent origin from URL hash since on that case the problem is caused by misconfiguration of required credential in Google API console.
If you never had succedded in integrating sign-in flow with your app, perhaps answer from that post can help you.
Otherwise, if you have had successfully integrated sign-in flow for some time but recently problem suddenly/erratically appears with symptom of blank screen on popped-up window, than you have same problem with me.
I can confirm we are experiencing the same problems at my company since recently. It seems a bit erratic, not 100% of the time. But for some users, some time, they are met with an empty sign-in popup with the url pointing to "https://accounts.google.com/o/oauth2/iframe" but nothing happens.
Not a complete answer yet, but this may be a reasonable workaround for some. I updated the ux_mode to use redirect and it is partially working now.
auth2 = gapi.auth2.init({
client_id: '1234.apps.googleusercontent.com',
scope: 'profile email',
ux_mode: 'redirect',
redirect_uri: 'https://blahblah.io/oauth2callback'
})
NOTE: it seems redirect_uri is required, contrary to Google's docs. This isn't a perfect drop-in replacement, but it solves the "URL hash!" error
This blog post and the Git Repo in it could also be helpful for anyone attempting to use redirect
My electron app started to fail today for the same reason. Been debugging quite a lot and I think found the reason, but don't know how to solve it, why it happened, or if it is electron or google's fault.
In my electron app, I have 2 webviews, one for the main content and another one for google popup dialogs.
So when google needs to open the authentication, it generates this IFRAME:
<iframe id="ssIFrame_google"
sandbox="allow-scripts allow-same-origin" aria-hidden="true"
src="https://accounts.google.com/o/oauth2/iframe#origin=https%3A%2F%2Fxxxx.com&rpcToken=dxxd318480305.4777704"
style="... display: none;"></iframe>
Mind that the URL has HASH parameters: your origin and the token.
However, when on the electron side I capture the new-window event in order to open the URL myself in another webview, the event I receive LACKS the hash parameters:
event {
type : "new-window",
url:"https://accounts.google.com/o/oauth2/iframe",
.
.
}
So what google's iframe is complaining about (I debugged it) is exactly that it can't find the origin and rpctoken parameters that should be in the hash parameters.
For a reason I don't understand (I haven't updated electron) the new-window event does not receive the full url anymore.
Using #howMuchCheeseIsTooMuchCheese answer below I have changed the flow to use the redirect callback, then capture that callback myself and restart the application. It is not ideal, but at least I can login into my applications.

Google Drive JavaScript SDK - Share Dialog Not Working

I have an application (POARDS) set up using the Google Drive SDK.
I am mainly processing this application's data in PHP, but a few features (such as the share dialog) use the JavaScript API.
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript">
init = function() {
s = new gapi.drive.share.ShareClient('737617002551');
s.setItemIds(["ncle837jp4berdbjftouwixsjub1fvt2"]);
}
window.onload = function() {
gapi.load('drive-share', init);
}
</script>
The issue is that when I try to launch the share dialog using s.showSettingsDialog(); the sharing system malfunctions. A blank modal with a loading message pops up, and after a few seconds, I recieve the following error message:
Sorry, sharing is unavailable at this time. Please try again later.
Upon further investigation, an error message in the development console is also available:
Refused to display 'https://drive.google.com/share…' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'
The message appears twice: once when the gapi.load(); call is made, and again when the s.showSettingsDialog(); call is made. In the Google documentation, it says that the share modal only has three requirements:
The user is signed in to Google
The user has installed your app
The URL of the page that launches the dialog must have the same origin as the Open URL registered for the app.
However, as far as I can tell, my application matches these three rules. Thus, the dialog should appear like normal.
Share dialog has strict requirements related to Content Security Policy. Your application must follow those strict requirements. Any deviation will cause issues like this with the Share dialog.
This link may assist you in further understanding those requirements: https://developer.chrome.com/extensions/contentSecurityPolicy

Google Analytics: setting _trackPageview onLoad

Does anyone know why this:
$('document').ready(function(){
_gaq.push(['_trackPageview', '/my-custom-url']);
});
..wouldn't get picked up by GA?
We have an embedded service which displays different states of a page (same URL), depending on where the user is in the journey - hence the need to set a custom URL for each phase.
The code looks fine but without knowing your domain and seeing the GA set up script it's hard to guess.
I'd suggest installing the Google Analytics Debugger Chrome Extension. This might let you know if the gaq had any issues getting setup.

google contextual gadget not loading google app script first time > Need to implement Authorization flow

I have google contextual gagdet installed in my domain, and that contextual; gadget is fetching data from external google App script whose url is something like this :
https://script.google.com/macros/s/AKfycbzP2A1SlTFxXVy39b5KmvNLFDSTeDveR49od-Wno2VFdcdT9m0/exec
I am calling this script from google contextual gadget using following jsonp ajax call
$.ajax({
url: app_script_url,
dataType: 'jsonp'
});
but when my gadget is loaded after opening any email, I seem following error in my console log:
SyntaxError: syntax error
<html><head><title>Authorization needed</title><style>.auth-
So basically what I want is, When loading the gadget in my gmail message when first time gadget is loaded and if user do not have authorization access, then it should ask use to authorize the script using some button or link, Similar to what is shown when you click on this link > https://script.google.com/macros/s/AKfycbzP2A1SlTFxXVy39b5KmvNLFDSTeDveR49od-Wno2VFdcdT9m0/exec
Till now I have tried many approaches like I tried the approach from this link
https://developers.google.com/gadgets/docs/oauth
I tried the example shown in this link, I replaced url shown in fetchData() function with the above one, but I was not sure what oAuth parameters to use. so in a way I am now stuck to implement authorization flow.
Let me know if anyone has any idea on this.
Thanks in advance!!
Dean
Your link about 'gadgets' has nothing to do with apps script its a completely different thing called google gadgets (from igoogle).
Your problem is likely that you havent published the gas correctly. Either publish it as anonymous access or make the ajax call authenticated. In any case do not publish the script to run as the user accesing the script.

Check firebug from page to get results of net panel

How can I access the Firebug API from my webpage to get output of the net panel?
My intention is to embed a small script in my webpage to show the time taken for DomContentLoaded
The only Firebug API you can access from a web page is the console object.
http://getfirebug.com/wiki/index.php/Console_API
This object is explicitly injected into every web page for logging into the Console panel.
If you want to access information in the Net panel you need to create a Firefox/Firebug extension or use an existing extension such as NetExport that allows to export all data collected by the Net panel: http://www.softwareishard.com/blog/netexport/
There are other options:
1) You can register a listener for "DOMContentLoad" event and measure the time yourself
2) You can use web timing specification http://dev.w3.org/2006/webapi/WebTiming/
This already works in Chrome and implementation for Firefox is in progress, see:
https://bugzilla.mozilla.org/show_bug.cgi?id=570341
Honza

Categories

Resources