CODEWITHSUNDEEP
nuxt.jshotjar
Shadi Farzankia
Shadi Farzankia

Reputation: 737

How to insert Hotjar code to nuxt project

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.

Upvotes: 4

Views: 4386

Answers (4)

stevec
stevec

Reputation: 52797

I arrived here after continually getting the error:

hotjar Tracking code not found 
Please check you’ve correctly pasted the Hotjar tracking code into your site’s header.

But I was sure I had done everything correctly.

I had uBlock Origin (an adblocker) in my browser, so the hotjar script wasn't being run. Hotjar don't tell you this in their instructions but the site must be accessed by at least one browser with adblockers turned off.

Once I visited the site with a broswer without adblockers, hotjar verification worked immediately. Hope this saves someone else some time.

Upvotes: 1

Rens
Rens

Reputation: 745

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

Upvotes: 1

Narges Pms
Narges Pms

Reputation: 550

I wondered if we could put the script into the head property of the nuxt.config.js according to manual setting of Hotjar that said it should be on the .

I think we could use this for doing so, but I am not sure. I will look forward to any suggestions.

Upvotes: 0

Urzelll
Urzelll

Reputation: 126

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

Upvotes: 3

Related Questions