DEV Community

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

tibetoine • Feb 24 '20

Hello @aleksey,

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

thanks

Aleksey Razbakov • Feb 24 '20

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

npm install --save firebase

Refer to official firebase documentation and firebase analytics

tibetoine • Feb 24 '20 • 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.

Am I wrong ?

Aleksey Razbakov • Feb 25 '20

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.

tibetoine • Feb 25 '20

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

Aleksey Razbakov • Feb 26 '20

Have you initialized firebase?

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

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

firebase.initializeApp(firebaseConfig);
firebase.analytics();

tibetoine • Feb 26 '20

Yes. Error comes on the second line with :

import "firebase/analytics";

Can you share a project where this works ?

Aleksey Razbakov • Feb 26 '20

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.