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...
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();
Thread Thread
 
tibetoine profile image
tibetoine

Yes. Error comes on the second line with :

import "firebase/analytics";

Can you share a project where this works ?

Thread Thread
 
razbakov profile image
Aleksey Razbakov

I updated the setup section with step by step commands to setup vue app. I executed it step by step and checked that it works. Let me know if it works for you.

Thread Thread
 
tibetoine profile image
tibetoine

Sorry,
I still have the same problem importing firebase/analytics

if you have time to check : github.com/tibetoine/friends-party

Thread Thread
 
razbakov profile image
Aleksey Razbakov

Please follow updated setup section from the beginning. I added also versions and package.json for comparison.

In your project you only need to update firebase version, the one you use is too old and doesn't have analytics. Go to package.json and update it to:

"firebase": "^7.9.1",
Collapse
 
n1c0dev profile image
N1c0dev

Hello @razbakov
Very useful post, thanks :)