How to add Google analytics in Gatsby

How to add Google analytics in Gatsby

Three easy steps to add website tracking to your website

ByMario Kandut

honey pot logo

Europeโ€™s developer-focused job platform

Let companies apply to you

Developer-focused, salary and tech stack upfront.

Just one profile, no job applications!

Adding Google Analytics in Gatsby is quite easy and can be done in just a few minutes. There are two possible ways to add Google Analytics.

What you need first is a Google Analytics account. Start with setting up an account HERE.

1. Get your tracking ID from Google Analytics

๐Ÿ’ฐ The Pragmatic Programmer: journey to mastery. ๐Ÿ’ฐ One of the best books in software development, sold over 200,000 times.

After signing up for a Google Analytics account, create a property and get your tracking ID from the Tracking Code section under the Tracking Info menu. The tracking ID looks like this UA-12341234-1.

2. Add website tracking

Now you have two options:

In most cases the official plugin should be sufficient. Only if you have customized the html.js already, (script injection, etc.) you can add the tracking code there.

Add Google Analytics via official plugin

Install the plugin.

npm install gatsby-plugin-google-gtag

Add the plugin to your gatsby-config.js file:

module.exports = {
  plugins: [
    // All other plugins
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
          'ADD-YOUR-TRACKING-CODE-HERE', // Google Analytics / GA
          // optional
          'OPTIONAL----AW-CONVERSION_ID', // Google Ads / Adwords / AW
          'OPTIONAL----DC-FLOODIGHT_ID', // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
        // This object gets passed directly to the gtag config command
        // This config will be shared across all trackingIds
        gtagConfig: {
          optimize_id: 'OPT_CONTAINER_ID',
          anonymize_ip: true,
          cookie_expires: 0,
        // This object is used for configuration specific to this plugin
        pluginConfig: {
          // Puts tracking script in the head instead of the body
          head: false,
          // Setting this parameter is also optional
          respectDNT: true,
          // Avoids sending pageview hits from custom paths
          exclude: ['/preview/**', '/do-not-track/me/too/'],

All configuration options can be found in the plugin docs.

Add Google Analytics in html.js

If you have already a html.js file, skip the next paragraph.

Gatsby uses a React component to server render the <head> and other parts of the HTML outside of the core Gatsby application. Most sites should use the default html.js shipped with Gatsby and customizing html.js is not supported within a Gatsby Theme.

If you need to insert custom HTML into the <head> or <footer> of each page on your site, you can use html.js.

Copy the default html.js:

cp .cache/default-html.js src/html.js

Then add the website tracking code from Google Analytics:

    __html: `
    window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-12341234-1');

IMPORTANT: I recommend using an environment variable to store your GA_TRACKING_ID.

3. Build and Test.

The plugin only works in production mode. Hence, to test the correct firing of events run: gatsby build && gatsby serve. After deploying your website confirm that website tracking is working in Google Analytics.

๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Congratulations! You have successfully added Google Analytics to your website. ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut.

If you want to know more about Gatsby, have a look at these Gatsby Tutorials.

References (and Big thanks): Gatsby Docs

Scroll to top โ†‘