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

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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