Integrating Firebase analytics in a Vuepress website

Today I wanted to add some analytics to the documentation. At Liteflow we are using Firebase. One of the great features of Firebase is the support of multi-platform analytics allowing us to visualize data from any website related to liteflow (the website, the documentation, the console and this blog).

Any business needs to gather analytics on its audience to optimize the user experience and, of course, maximize profits from this audience.

We will see now how to add the support of Firebase analytics into a Vuepress website (that we use for the documentation and the blog).

Create a new Firebase application

The first step is to create an application in your Firebase project to have specific credentials to track this particular application.

Go to your Firebase dashboard, in the settings of your project and click on the button "Add app".

Once completed, you should have the configurations for your application that should look like:

const firebaseConfig = {
  apiKey: "__API_KEY__",
  authDomain: "PROJECT.firebaseapp.com",
  databaseURL: "https://PROJECT.firebaseio.com",
  projectId: "PROJECT",
  storageBucket: "PROJECT.appspot.com",
  messagingSenderId: "__MESSAGING_ID__",
  appId: "__APP_ID__",
  measurementId: "__MEASUREMENT_ID__"
};

Create a Vuepress plugin

The documentation is using Vuepress, which is a fantastic framework to create documentation, but there is no plugin yet for Firebase analytics.

Create a directory .vuepress/plugin/firebase with the two files:

index.js
enhanceAppFile.js
#index.js
const { path } = require('@vuepress/shared-utils')

module.exports = {
  name: 'firebase',
  enhanceAppFiles: path.resolve(__dirname, 'enhanceAppFile.js')
}

A few things to note here: Do not use require('path') to load your file and/or do not use an array for the enhanceAppFiles. For some reason, it messes with other plugins that cannot load anymore.

#enhanceAppFile.js
export default ({ router, isServer }) => {
  if (isServer) return
  if (!window.firebase) return
  window.firebase.initializeApp({
    apiKey: "__API_KEY__",
    authDomain: "PROJECT.firebaseapp.com",
    databaseURL: "https://PROJECT.firebaseio.com",
    projectId: "PROJECT",
    storageBucket: "PROJECT.appspot.com",
    messagingSenderId: "__MESSAGING_ID__",
    appId: "__APP_ID__",
    measurementId: "__MEASUREMENT_ID__"
  });
  window.firebase.analytics()
  router.afterEach(() => {
    window.firebase.analytics().logEvent('page_view');
  })
}

Make sure to skip the analytics on the server-side and also add a safe test for your Firebase instance. If you don't, Vuepress throws an error while compiling. The parameter in the initializeApp is the one from your Firebase application.

Use the plugin

Now that the plugin is ready, we can see how to add it.

Edit .vuepress/config.js

module.exports = {
  ...
  plugins: [
    require('./plugins/firebase'),
    // other plugins
  ],
  head: [
    ['script', { src: "https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js" }],
    ['script', { src: "https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js" }]
  ],
  ...
}

See the full tutorial on the Liteflow Blog