I'm using react-ga for Google Analytics:
import ReactGA from "react-ga";
ReactGA.initialize("UA-XXXXXXXXX-X", { debug: true });
ReactGA.pageview("/example");
ReactGA.event({
category: "Test",
action: "Click",
label: "Example"
});
This results in the following output:
Which makes me think that everything worked, but Google Analytics doesn't show the event on my dashboard. I also tried the following:
ReactGA.ga("send", "event", "Test", "Click", "Example");
Which gave the same output, but with nothing showing up on my GA dashboard. I've waited over half an hour and my GA dashboard still doesn't show the data. Is there something I'm doing wrong?
Note: The pageview does go through and shows up on my GA dashboard just fine.
instead of ReactGA.pageview("/example");
Try Using
ReactGA.pageview(window.location.pathname);
I am assertive it will work.
and have look at the documentation of ReactGa
https://www.npmjs.com/package/react-ga
Scroll Down to ReactGA.event(args)
There must be an issue with your args
Looks like I was just impatient. It took a while but the events did eventually show up on my GA dashboard.
Related
Let's say an user with user_id(1000) and email(user101#example.com) logged into the reactjs based web application and browsed a few pages for 2mins and then moved to other application tabs/windows for 30mins and came back to the web application and browsed the app for 5more mins on April 1st 2021.
I would like track/get this user's time spent report in the Google Analytics report saying user101#example.com with user_id(1000) has spent 7mins on April 1st 2021. Is there a way to track the same via GA if possible with react-ga, if it is possible how can we do it?
As of now with react-ga I'm tracking the userid property like the below:
ReactGA.set({userId});
If it is not possible via Google Analytics, is there any service provider that has this kind of feature?
Note: I have gone through existing q/a but unable to find/figure out the solution.
I was able use another tracker Riveted, which by it's definition:
Riveted helps fix this by measuring the amount of time users are
actively engaged (e.g., clicking, scrolling, using the keyboard) and
then reporting the data to Google Analytics in frequent intervals.
More on it's page.
While Riveted is written with a direct global variable, we need to work around to make it available for the react project using exports-loader.
Here is what I could achieve:
Get the riveted.js locally as a file
Ensure to install the exports-loader via npm install exports-loader --save
Import the same with the location of revited.js as:
import riveted from 'exports-loader?exports=riveted!./riveted.js';
After you have initialised ReactGA.initialize(configs);
If you check the source code of riveted, you will notice it's using the same ga object of window.ga and thus the google analytics once initialised via ReactGA.initialize should be enough.
The react-ga provides an ability to extend ga. They state ga can be accessed via ReactGA.ga() method. This gives developers the flexibility of directly using ga.js features that have not yet been implemented in ReactGA. No validations will be done by ReactGA as it is being bypassed if this approach is used.
Then the ga allows writing a custom plugin
So with all that here is what the code looks like:
import React, { PureComponent } from 'react';
import ReactGA from '../../src';
import riveted from 'exports-loader?exports=riveted!./riveted.js';
export default class App extends PureComponent {
constructor(props, context) {
super(props, context);
this.state = {
reactGaInitialised: false,
configs: [DEFAULT_CONFIG]
};
}
initReactGA = (event) => {
const { configs } = this.state;
ReactGA.initialize(configs);
// Send initial test view
ReactGA.pageview('test-init-pageview');
function TrackerCustomPlugin() {
this.riveted = riveted;
}
TrackerCustomPlugin.prototype.init = riveted.init;
let ga = ReactGA.ga();
ga('provide', 'riveted', TrackerCustomPlugin);
ga('require', 'riveted');
ReactGA.plugin.execute('riveted', 'init', {
reportInterval: 10, // Default: 5
idleTimeout: 20, // Default: 30
nonInteraction: true // Default: true
});
};
Here is how the events are sent to GA from my local:
And the GA Dashboard showing Time Spent:
I want to use firebase analytics in react native. I have added the lib,
but when i use the await analytics().logEvent("event_name") it returns null and event is also not added in firebase analytic console.
Any one have any idea what's wrong?
<Button
title="Add To Basket"
onPress={async () =>
await analytics().logEvent('basket', {
id: 3745092,
item: 'mens grey t-shirt',
description: ['round neck', 'long sleeved'],
size: 'L',
})
}
/>
I had the same issue when I started with analytics.
Firebase says it takes around 24 hours for the events to be visible on console.
Also the logEvent has a return type of void, hence you see null being returned. So don't worry regarding that aspect unless you have an error.
So, I would suggest you to wait for the changes to be reflected.
For Development purposes we would need to see Realtime events, and Firebase has DebugView for that. For details, refer this document:
https://firebase.google.com/docs/analytics/debugview
Hellow there! I am using the wdio/cli so I created the wdio.conf.js with this command, then I start doing the test. But the issues is when have more than one test in a single or multiple test files.
In the test file I have something like this:
beforeEach(async function() {
$('~home').waitForDisplayed(81000, false);
});
Where home tag is a tag in the first view when the app runs in first screen. And appear this error:
element ("~home") still not displayed after 10000ms
So need to do kind of driver.resetApp()/ But dont know how to do it, what import do I need to do etc.
Did you try resetApp? You can't user driver as "main object" - Everything is under browser variable. Try this
//async
await browser.resetApp();
//sync
browser.resetApp();
Check Appium doc + wdio documentation.
I am using a Blumix free account to develop a chat-bot using watson conversation.
How do I add a clickable URL in the response, or automatically call a URL in browser?
I have edited the "advanced response" using the suggestions as described on this page but could not get it work.
How can I achieve that?
I don't know if I understood your question correctly, but.. if you wants add some url inside flows Conversation Service (IBM Watson), try it:
1º: Add the url with tag <a target> and href= your URL inside flows. See the example:
JSON:
"output": {
"text": "This is a link <a target=\"_blank\" href= \"https://www.choosemyplate.gov\">Food and nutrition Guide</a>.\n<br/><br/>Talk to you later, bye for now!"
},
2º See that it did not work inside the Conversation, because it will be your browser that will render the html.
3º If you open with your browser, it works, see:
See that the link is showing up, and this will work for other things in html, like button, for example...
But if you can: based on user input should access a url:
This is done by using two features: Context.request skip_user_input
A request is a special context variable that has args, name and result. It is used to tell the calling app that it should do some action based on this variable.
Setting skip_user_input is optional. In many cases, you might want to execute some business logic in your application and then provide its results via result. Setting skip_user_input to true, will tell Watson Conversation to not wait for input from the user. Thus, your condition on the next node should be based on the content inside result.
{
"output": {},
"context": {
"request": {
"args": {
"url_to_invoke": "your_url"
},
"name": "Call_A_URL",
"result": "context.response"
},
"skip_user_input": true
}
}
Reference: IBM Professional #Dudi: here.
I have an application where I'm trying to use ember-routemanager. (I'm using rake-pipeline as my build environment, but I don't think that's relevant. Or is it?) The problem is, the app seems to be ignoring routes in the location bar.
This jsfiddle shows the state manager setting up and entering the entry state properly. After two and a half seconds, the script runs App.stateManager.set('location', 'desktop'); which according to the ember-routemanager README should move me to the state with "desktop" as its route parameter (right?). But it doesn't.
(This is as close as I can get to cloning the problem in jsfiddle, where I can't easily put a path in the location bar. When I do that on my development environment, e.g. http://localhost:9292/desktop or http://localhost:9292/#desktop , it's clear that the app is not consuming the path; it returns "Entity not found: /desktop".)
Note that another version of the same fiddle which uses goToState instead of setting location works just fine.
What am I doing wrong?
Code:
Sylvius.stateManager = Ember.RouteManager.create({
initialState: 'launch',
enableLogging: true,
wantsHistory: true,
launch: Em.ViewState.create({
view: Sylvius.LaunchView,
}),
desktop: Em.ViewState.create({
view: Sylvius.DesktopView,
route: 'desktop',
sectionSelected: Em.State.create({
route: ':sectionSlug',
enter: function(manager, transition) {
console.log('We found the slug: ' + Sylvius.stateManager.getPath('params.sectionSlug'));
}
})
})
});
You're defining a route like /desktop/:sectionSlug for your sectionSelected state. If you invoke Sylvius.stateManager.set('location', 'desktop/123'); then it works as expected.
If you want a state which handles the route '/desktop' you have to create a new state without a route property, see http://jsfiddle.net/pangratz666/NMgKH/:
index: Em.State.create({
enter: function(manager, transition){
this._super();
console.log('invoked for /desktop');
}
})