Add Google Analytics to Gridsome

Integrating Google Analytics into your Gridsome application can provide you with useful insight on user behavior. Here is how to add Google Analytics, step by step.

Let's dive in!

Before we dig in I want to show you something. I promise it's worth it...

Google Analytics is great, but also complex and a bit clunky. If you just want a straightforward dashboard with the insights you need, GA is not a great place to start. Additionally, Google doesn't care about privacy and GA requires an annoying cookie banner.

That's why I built Simple Analytics, a privacy-friendly and simple analytics tool - no personal data, no cookies, just the insights you need in a straightforward dashboard.

Here is how it looks vs GA. Feel free to check our live analytics to get an idea for your project. (It is free btw)

All right, enough about us. Now let's get into answering your question!

Can you spot the difference between the dashboards?

Integrating Google Analytics

Set up Google Analytics

Create a Google Analytics account, if you haven't already.
Set up a new GA property for your app.
Inspect the property and retrieve your Measurement ID. You will need it later.

Install the Gridsome Plugin

Gridsome offers plugins that simplify integrating third-party services. Install the Gridsome plugin for Google Analytics:

npm install @gridsome/plugin-google-analytics

Configure the Google Analytics plugin in your gridsome.config.js file with your GA Measurement ID:

module.exports = {
  // Other configurations...

  plugins: [
    // Other plugins...
    {
      use: '@gridsome/plugin-google-analytics',
      options: {
        id: 'YOUR_MEASUREMENT_ID' // Replace with your Google Analytics Measurement ID
      }
    }
  ],
}

(Optional) Implement Event Tracking For tracking specific events like button clicks or form submissions, you can directly use the GA methods in your components or pages:

export default {
  methods: {
    trackEvent() {
      if (typeof window !== 'undefined' && window.gtag) {
        window.gtag('event', 'your_event_name', {
          // Event parameters
        });
      }
    }
  }
}

(Optional) Create New Properties

To track multiple apps, create new GA properties and use the corresponding Measurement IDs. This allows GA to track apps individually.

Test and Verify

After deploying your application, test to ensure that GA is tracking page views and events correctly. The Google Analytics Debugger for Chrome is a useful tool for this purpose.

Final Thoughts

Adding Google Analytics to your app can give you great insights. However, ask yourself: is Google Analytics the right tool for you?

GA is an overpowered solution for straightforward analytics. If you're looking for a simple and intuitive dashboard with the insights you need, there are better alternatives. Yes, I’m talking about my own product (Simple Analytics), but there are others out there as well.

I hated using Google Analytics for my projects. It's clunky, there are hundreds of dashboards and it doesn't look appealing. Also Google doesn't care about privacy or ethics. That's why I decided to build my own and more intuitive web analytics tool.

If this resonates with you, feel free to give Simple Analytics a spin. You just need to add the script to your app and off you go. This takes about one minute- and there is a free version as well!

Enjoy!

Google Analytics Glossary