DEV Community

Cover image for Vue + Google Firebase Analytics

Vue + Google Firebase Analytics

Aleksey Razbakov on January 12, 2020

Google Analytics App + Web is available when you enable Google Firebase Analytics. It's Google Analytics v2 with a new representation of data, whi...
Read full post
Collapse
 
tibetoine profile image
tibetoine •

Hello @aleksey,

Can you explain how you installed firebase/analytics ? I can't find this module on npm.

thanks

Collapse
 
razbakov profile image
Aleksey Razbakov •

It's part of firebase package. You can install it with

npm install --save firebase

Refer to official firebase documentation and firebase analytics

Collapse
 
tibetoine profile image
tibetoine • • Edited

Thanks for ur reply. But when i go here : firebase.google.com/docs/web/setup...

I can read that 'analytics' is not supported by nodejs.

firebase support

Am I wrong ?

Thread Thread
 
razbakov profile image
Aleksey Razbakov •

I had the same feeling when I was reading that page for the first time.

Nodejs is meant as a server side and web as a client side. You can install firebase package via npm, no problem with that.

If window and document objects are available in runtime you are in web mode. But if you are trying to run nodejs express server and to track analytic event on some http patch method to your server it won't work.

Thread Thread
 
tibetoine profile image
tibetoine •

Thanks again for ur time and ur reply.

My apologize, I don't understand. In ur article, you give that example :

import * as firebase from "firebase/app";
import "firebase/analytics";

// put this after firebase.initializeApp(...) 
// make sure it executes before any logEvent
firebase.analytics();

// alias
Vue.prototype.$analytics = firebase.analytics();

When I try this on my project I have this error:

This dependency was not found:

* firebase/analytics in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/NavBar.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save firebase/analytics

Even if i did a npm install firebase

So what should I do to set forebase/analytics in my nodejs/vuejs project ?

Thanks for ur help and ur time

Thread Thread
 
razbakov profile image
Aleksey Razbakov •

Have you initialized firebase?

import * as firebase from "firebase/app";
import "firebase/analytics";

const firebaseConfig = {
  apiKey: "xxx",
  // ...
};

firebase.initializeApp(firebaseConfig);
firebase.analytics();
Collapse
 
n1c0dev profile image
N1c0dev •

Hello @razbakov
Very useful post, thanks :)