Google Analytics on Gridsome applications

Photo by Olya Kobruseva on Pexels.

Analytics, as we all know, is an essential component of any website. Google Analytics is the most effective free tool available. This article demonstrates how to integrate Google Analytics into a Gridsome site.

I was trying to add Google Analytics using one of the available plugins, but they don't work as I expected. So, I thought "Why don't you go with the traditional manual way?" The existing plugins have some limitations and if you are stuck in the same place and you wanted to also customize your analytics with custom events, follow along.

Create Universal tracking on Google analytics

Go to Google Analytics.

Navigate to the Admin section (by clicking on the small gear icon in the bottom left), then select "Create Property."

Complete the form. Because we're collecting analytics for the website, make sure "Create a Universal Analytics property" is enabled.

When you finish the setup, you will be redirected to a page that contains setup scripts and your tracking ID.

Configure the Gridsome website to send analytics data

Paste the following code into the main.js file. Make sure to include your tracking ID.

export default function (Vue, { router, head, isClient }) {
  // Global site tag (gtag.js) - Google Analytics
  head.script.push({
    src: "https://www.googletagmanager.com/gtag/js?id=UA-********-*", // replace it with your tracking id
    async: true,
  });

  if (isClient) {
    // Google Analytics
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    if (typeof window.gtag === "undefined") window.gtag = gtag; // So we can you gtag() on our components
    gtag("js", new Date());
    gtag("config", "UA-********-*");
  }

  // rest code...
}

Note: It is necessary to check for if it's isClient because the window will not function during the build.

When someone visits your website, you should see an increase in "Active users" on your Google Analytics dashboard after you build and deploy your Gridsome application.

Let's say we want to count the number of share of a specific blog post. Add the following code on respective component's share function.

async share() {
    // ...code
    const key = this.to; // Where to share (eg. Facebook, LinkedIn)
    // Google Analytics Event
    const params = {
        method: key,
        content_type: "article",
        item_id: location.href,
    };
    gtag("event", "share", params);
	// code... 
}

Counting only share events may not be sufficient, but when you add gtag.js to your site, the snippet includes a config command that sends a pageview by default.

For more events and more detailed information, read the Google Analytics documentation.