I'm using gtag.js. I have no problem sending this:
gtag('event', 'aaa', {
'event_category': 'bbb',
'event_label': error
});
and checking it under Realtime > Events panel on https://analytics.google.com.
But I don't know where to check after I sending:
gtag('event', 'exception', {
'description': error,
'fatal': true // set to true if the error is fatal
});
gtag('event', 'timing_complete', {
'name': 'load',
'value': Math.round(performance.now()),
'event_category': 'JS Dependencies'
});
These two special events are documented here: https://developers.google.com/analytics/devguides/collection/gtagjs/exceptions. But there's no UI to check them?
Related
I'm working in angular 8 and added google analytics in order to lend better services to the user. but it is continuously showing the following error:
Following is service added to use google analytics in the project:
gaservice.service.ts
import { Injectable } from '#angular/core';
declare let gtag:Function;
#Injectable({
providedIn: 'root'
})
export class GoogleAnalyticsService {
constructor(){}
public eventEmitter(
eventCategory: string,
eventAction: string,
eventLabel: string = null,
eventValue: number = null ){
gtag('event', eventAction, {
'event_category': eventCategory,
'event_label': eventLabel,
'value': eventValue
});
}
}
Use
(<any>window).gtag(..)
or
window['gtag'](...)
I think what I may do is create a function:
export const gtag = () => window['dataLayer'].push(arguments)
This is because I'm using GTM with GA4 but it doesn't define window.gtag for me (See Google Analytics Web+App event config: Error 'gtag is not defined').
I'm doing a GET request to a firebase database and when i console log the data the GET request brings it logs "uncaught exception: Object".
.
I've already did the POST http request and didn't have any problem, didn't tried any solution as i cant think of one, it doesn't even give me the line of the error.
<script>
export default {
data:() => ({
blogs:[]
}),
methods:{
},
created(){
this.$http.get('https://recetapp-b43f2.firebaseio.com/posts.json').then(function(data){
console.log(data);
})
}
}
</script>
I expect the data showing the actual JSON files instead of the error.
Try
created() {
this.$http.get("https://recetapp-b43f2.firebaseio.com/posts.json").then(res => {
console.log(JSON.parse(res.data));
});
}
https://recetapp-b43f2.firebaseio.com/posts.json returns 401 (Unauthorized), so you shall rather catch the this.$http (assume Axios) with:
mounted() {
this.$http.get("https://recetapp-b43f2.firebaseio.com/posts.json")
.then(response => { console.log(response.data); })
.catch(e => { console.log(e); })
}
I've made a simple app with phone authentication (sms).
My problem splits to two, the first part is that the verification code (sms) is always wrong somehow (I do get it, however it doesn't pass the confirmation), and the second part (as stated in the title) is that the user can still access the main activities even if authentication failed.
the function is invoked via a button.
the function is :
signIn(){
const appVerifier = this.recaptchaVerifier;
const phoneNumberString = "+972" + this.phoneNumber.substring(1,10);
firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
.then( confirmationResult => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
let prompt = this.alertCtrl.create({
title: 'Enter the Confirmation code',
inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
buttons: [
{ text: 'Cancel',
handler: data => { console.log('Cancel clicked'); }
},
{ text: 'Send',
handler: data => {
confirmationResult.confirm(data.confirmationCode)
.then(function (result) {
// User signed in successfully.
this.uid = result.user.uid
this.addUser(this.fullName, this.uid);
console.log(result.user);
// ...
}).catch(function (error) {
console.log("Invalid code") // always getting here
});
}
}
]
});
prompt.present();
}).catch(function (error) {
console.log("SMS not sent")
});
}
UPDATE (app.component)
the decision is made in the constructor of app.component.ts
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
var that = this
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
that.rootPage = TabsPage; // even though auth failed, he comes here
} else {
that.rootPage = LoginPage;
}
});
});
}
I dont see it in your code but anywhere you call a method to push the main App-Page. You only should show the main App-Page after User successfully logged in. If this dont work maybe the user comes inside of your app, because the Firebase function is asynchron.
I am trying to figure out if it is possible to add events to a user's google calendar server side via Firebase.
I have read this and this which seems to be what I am trying to achieve but it explains that the user which I'd like to add events to their calendar should share
their calendar with the account I create for my application.
Is that true or am I misunderstanding something?
I also appreciate it if there is any guide for JavaScript/NodeJS.
No. Firebase does not have any built in functionality for adding events to Google calendars. But it's not particularly difficult to connect the two APIs. Below are a couple additional ideas.
Use Functions
One elegant solution would be to use Functions to achieve this by triggering a Functions event by any means (HTTP, a database write, etc) and calling the Calendar API accordingly.
The steps would look something like the following:
When authenticating to Google OAuth on the client, add the calendar scope ('https://www.googleapis.com/auth/calendar')
When triggering the function, send the calendar payload and the Google OAuth token
Inside Cloud Functions for Firebase, your trigger would look something like this:
// Example combined from these docs:
// https://developers.google.com/calendar/v3/reference/events/insert#examples
// https://cloud.google.com/solutions/authentication-in-http-cloud-functions#writing_the_cloud_function
// https://firebase.google.com/docs/functions/http-events
//using another name other than "google" seems to cause error!!
const {google} = require('googleapis');
const calendar = google.calendar('v3');
const functions = require('firebase-functions');
// This example assumes an HTTP call
exports.addToCalendar = functions.https.onRequest((req, res) => {
const eventData = req.query.eventData;
const accessToken = getAccessToken(req);
return addToCalendar(eventData, accessToken).then(() => {
res.stats(200).send('yay');
}).catch(e => res.status(e.code).send({error: e.message}));
});
function addEventToGoogleCalendar(eventData, accessToken) {
const authClient = getOauthClient(accessToken);
return new Promise((resolve, reject) => {
calendar.events.insert({
auth: authClient,
calendarId: 'primary',
resource: eventData,
}, function(err, event) {
if (err) {
console.error(err);
reject(err);
}
else {
resolve();
}
});
});
}
function getOauthClient(accessToken) {
var oauth = new google.auth.OAuth2();
oauth.setCredentials({access_token: accessToken});
return oauth;
}
function getAccessToken(req) {
const header = req.get('Authorization');
if (header) {
var match = header.match(/^Bearer\s+([^\s]+)$/);
if (match) {
return match[1];
}
}
return null;
}
And here's some alternative Functions triggers for Realtime Database and Firestore:
// Alternative: Realtime DB trigger
exports.addToCalendar = functions.database.ref('/addToCalendar/{pushId}')
.onWrite((event) => {
const data = event.data.val();
return addToCalendar(data.eventData, data.token)
// clear from queue after write
//.then(() => event.ref().remove());
});
// Alternative: Firestore DB trigger
exports.addToCalendar = functions.firestore.document('addToCalendar/{pushId}')
.onCreate((event) => {
const data = event.data.data();
return addTocalendar(data.eventData, data.token)
// clear from queue after write
//.then(() => event.data.ref.remove());
});
An example eventData object would look something like this:
var event = {
'summary': 'Google I/O 2015',
'location': '800 Howard St., San Francisco, CA 94103',
'description': 'A chance to hear more about Google\'s developer products.',
'start': {
'dateTime': '2015-05-28T09:00:00-07:00',
'timeZone': 'America/Los_Angeles',
},
'end': {
'dateTime': '2015-05-28T17:00:00-07:00',
'timeZone': 'America/Los_Angeles',
},
'recurrence': [
'RRULE:FREQ=DAILY;COUNT=2'
],
'attendees': [
{'email': 'lpage#example.com'},
{'email': 'sbrin#example.com'},
],
'reminders': {
'useDefault': false,
'overrides': [
{'method': 'email', 'minutes': 24 * 60},
{'method': 'popup', 'minutes': 10},
],
},
};
Use Zapier
Zapier provides a trigger for integrating Firebase and Google Calendar: https://zapier.com/apps/firebase/integrations/google-calendar
I am having this problem where I make HTTP Request to the API and in case of error ( specially error 500) the JS just breaks or goes into infinite loop and I should close the window and re-open the page. What I need is a message to pop up and in very generic way explain what happened. How should I handle this kind of error any ideas?
Example Request:
this.$http.get('people', { params }).then(({ data }) => {
this.setFetching({
fetching: false
})
})
then accepts a second callback to handle errors. You can also supply a .catch in addition to a .then to handle more severe failures.
new Vue({
el: '#app',
data: {
fetching: true
},
mounted() {
this.$http.get('people')
.then(() => {
this.setFetching({
fetching: false
})
},
(err) => {
console.log("Err", err);
})
.catch((e) => {
console.log("Caught", e);
})
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
<div id="app">
</div>