Gatsby

How to install Clarity on Gatsby

Step 1

Navigate to the root of your Gatsby project.

Step 2

Open your preferred command line and run one of the following commands
npm install gatsby-plugin-clarity
or
yarn add gatsby-plugin-clarity

Step 3

Navigate to gatsby-config.js.

Step 4

Locate your Clarity ID and copy it.

1. From the Clarity dashboard, go to Settings.
2. From the left menu, click Setup.
3. Under Installation methods, select Install on third-party platforms.
4. Select View all platforms -> Gatsby. Your Clarity ID is at the top of the page (for example, 555u86t011).

Step 5

Add the following to your plugins array

{
   resolve: `gatsby-plugin-clarity`,
   options: {
   clarity_project_id: YOUR_PROJECT_ID,
   // Boolean value for enabling clarity while developing
   // true will enable clarity tracking code on both development and production environments
   // false will enable clarity tracking code on production environment only
   enable_on_dev_env: true
   },
}

Step 6

The Clarity tracking code is now installed.

Verify your installation

FAQ

For more answers, refer to Setup FAQ.

Explore more

Heatmaps overview

Recordings overview

Dashboard overview

Visit Clarity

Case studies

Demo

Sign in

Blog

Benchmarks