How to insert Hotjar code to nuxt project

Question

I want to add hotjar to my nuxt project. I know that for adding google analytics I need to add it as a plugin according to the documentation of nuxt: https://nuxtjs.org/faq/google-analytics. But I don't know what is the best way to add htjar to the project.

Answer 1

I did it the same way as the google-analytics documentation.

1. Add hotjar to plugins in your nuxt.config:

   plugins: [ {src: '~/plugins/hotjar.js', mode: 'client'} ]

2. Add a hotjar.js file to your plugins directory with your tracking code inside.

I'm also curious if there is a better way

Answer 2

For Nuxt3 you can use vue-hotjar-next, for Nuxt2 you can use vue-hotjar.

Install the package:

npm install vue-hotjar-next

Create a new plugin in your plugins directory (plugins/vue-hotjar-next.client.js, note the .client part):

import VueHotjar from "vue-hotjar-next";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueHotjar, {
        id: <YOUR_SITE_ID_AS_A_NUMBER>,
        isProduction: process.env.IS_PRODUCTION, // <-- or simply true/false
    });
});

Use it in your nuxt.config.ts:

export default defineNuxtConfig({
    plugins: [
        "~/plugins/vue-hotjar-next.client.js",
    ]
}

Wait around 15-60 minutes for the data to show up in the Hotjar dashboard. You can verify it's working by checking the network tab in your dev tools and looking for a successful GET call hotjar-<site_id>.