Back to Blog

Cookieless Analytics in Gatsby

In this tutorial, you will learn to add Hardal to your Gatsby.js app for cookieless tracking using our official Gatsby plugin.

BD
Berkay Demirbas
CTO
Gatsby
15.01.2023

Gatsby is a powerful, open-source framework for building fast and dynamic websites and web applications. One of the key features of Gatsby is its plugin system, which allows developers to easily add new functionality to their projects without having to build everything from scratch. In this blog post, we'll take a closer look at how to integrate a Gatsby plugin into your project and the benefits that this can provide.

If you are using Gatsby for your web2 or web3 apps like dApps, user tracking and analytics can provide a huge advantage with cookieless and privacy-first using Hardal's next-gen web analytics method.

You can easily integrate Hardal to your Gatsby project using our official plugin gatsby-plugin-hardal.

To add Hardal tracking snippet into your Gatsby project, you have to add this plugin.

npm install --save gatsby-plugin-hardal

//or

yarn add gatsby-plugin-hardal

Sign up for a free account at Hardal's website and setup an event tracking profile.

  • Click Add Website
  • Choose your event type as Landing Page or any web2 based event type.

Go to Tracker in your website settings. Then copy your website ID at the bottom.

Website ID is your website's unique ID in Hardal.

alt

  • After the installation, you should make sure paste Hardal Website ID to your gatsby-config.js file.
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-hardal`,
    options: {
      websiteId: "<PASTE_YOUR_WEBSITE_ID>",
      srcUrl: "https://app.usehardal.com/hardal.js",
      includeInDevelopment: true,
      autoTrack: true,
      builtInEvents: false, // get your built-in events like scroll, rage click, etc.
      respectDoNotTrack: true,
      eventModel: "web2", // web3 is coming soon!
    },
  },
];

This options can be used to configure the behavior of the plugin and customize it to fit the needs of your project. Here is an explanation of each of the options in this example:

websiteId: This is a string that is used to identify your website within the plugin's system. It should be replaced with the actual ID of your website.

srcUrl: This is the URL of the tracker. The plugin will use this URL to send the tracking data.

includeInDevelopment: A boolean value that specifies if the plugin should track events during development.

autoTrack: A boolean value that specifies if the plugin should automatically track events without the need for manual configuration.

builtInEvents: A boolean value that specifies if the plugin should track built-in events like scroll, rage click, etc.

respectDoNotTrack: A boolean value that specifies if the plugin should respect the user's browser's "Do Not Track" setting.

eventModel: A string value that specifies the event model that the plugin should use. The possible values are "web2" and "web3" (web3 event model will be available coming soon).

Note that, this plugin also in beta as well as Hardal.

So, all contributions are welcome. 🌭 You can create a new issue on GitHub

Happy cookieless analytics! 🍪