Google Analytics on Gridsome applications
Tags: javascript, webdev, vue, analytics
Published: 2022-04-10 19:42:25

> Photo by [Olya Kobruseva](https://www.pexels.com/@olyakobruseva/) on [Pexels](https://www.pexels.com/photo/laptop-beside-eyeglasses-and-smartphone-7887842/).

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](https://analytics.google.com).

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

![Google Analytics Dashboard](https://pantelis.theodosiou.me/assets/static/analytics-dashboard.9c90303.ab0ab1af0cbe97e357f8d905c105679c.png)

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

![Create property](https://pantelis.theodosiou.me/assets/static/create-property.9c90303.3114c243a71932870d6c9a7018ce9e97.png)

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

![Tracking ID](https://pantelis.theodosiou.me/assets/static/tracking-id.1a02756.42954d98d2a16c30be1b1ee16dcafacc.png)

## Configure the Gridsome website to send analytics data

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

```js
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.

```js
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](https://developers.google.com/analytics/devguides/collection/gtagjs/events) and more detailed information, read the Google Analytics [documentation](https://developers.google.com/analytics/devguides/collection/gtagjs/pages).

---

If you found this post helpful or enjoyed it, consider supporting me by [buying me a coffee](https://www.buymeacoffee.com/ptheodosiou). Your support helps me create more valuable content. ☕ Thank you!