pavloko / gatsby-plugin-hotjar

Gatsby plugin to add Hotjar analytics to your site.

gatsby-plugin-hotjar

Easily add Hotjar Analytics to your Gatsby site.

Install

yarn add gatsby-plugin-hotjar

or

npm i gatsby-plugin-hotjar --save

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-hotjar`,
    options: {
      includeInDevelopment: true, // optional parameter to include script in development
      id: YOUR_HOTJAR_ID,
      sv: YOUR_HOTJAR_SNIPPET_VERSION,
    },
  },
];

To find your Hotjar ID, click the Tracking code button for your site. The Hotjar Snippet Version is in the tracking code, look for a line like:

h._hjSettings={hjid:[hotjar id],hjsv:6};

The version is the value of hjsv.

gatsby-plugin-hotjar's Issues

Licensing and forks

Hello there!

The gatsby-plugin-hotjar plugin still works nicely. But it does not provide any option to supply some custom data to comply with CMPs that do not feature automated blocking.
I want to create a fork lazybytez/gatsby-plugin-klaro-hotjar to support KIProtect Klaro, but I just saw that there is no license in the repository. As you can read in GitHub's ToS a repository without
a license can be read and forked, but it is not allowed to modify the source code or create alternative releases.

As I want to add the code necessary to use the plugin and publish the package for others to use on npm, it would be great if you might add some license that allows to fork, edit and publish the project (under a name like gatsby-plugin-klaro-hotjar). The original plugin will surely be linked in the description at the top of the README.md.

Giving error when adding code snippet

error We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.

Error: C:\work files\websites\codebase_website\gatsby-config.js:41
sv: <script>
^
SyntaxError: Unexpected token <

• v8-compile-cache.js:226 NativeCompileCache._moduleCompile
  [codebase_website]/[v8-compile-cache]/v8-compile-cache.js:226:18

• v8-compile-cache.js:172 Module._compile
  [codebase_website]/[v8-compile-cache]/v8-compile-cache.js:172:36

• loader.js:712 Object.Module._extensions..js
  internal/modules/cjs/loader.js:712:10

• loader.js:600 Module.load
  internal/modules/cjs/loader.js:600:32

• loader.js:539 tryModuleLoad
  internal/modules/cjs/loader.js:539:12

• loader.js:531 Function.Module._load
  internal/modules/cjs/loader.js:531:3

• loader.js:637 Module.require
  internal/modules/cjs/loader.js:637:17

• v8-compile-cache.js:159 require
  [codebase_website]/[v8-compile-cache]/v8-compile-cache.js:159:20

• get-config-file.js:26 getConfigFile
  [codebase_website]/[gatsby]/dist/bootstrap/get-config-file.js:26:20

• index.js:96 module.exports
  [codebase_website]/[gatsby]/dist/bootstrap/index.js:96:36

• build.js:75 build
  [codebase_website]/[gatsby]/dist/commands/build.js:75:13

• create-cli.js:173 cli.command.handler.getCommandHandler
  [npm]/[gatsby-cli]/lib/create-cli.js:173:14

• create-cli.js:108 argv
  [npm]/[gatsby-cli]/lib/create-cli.js:108:24

• create-cli.js:25 Object.args [as handler]
  [npm]/[gatsby-cli]/lib/create-cli.js:25:19

• command.js:238 Object.runCommand
  [npm]/[gatsby-cli]/[yargs]/lib/command.js:238:44

Towards a Content Security Policy

Looks like this script injects hotjar snippet into the head @ gatsby-ssr.js.
If setting the CSP, we would need to "unsafe-inline" for this to run. However, it appears that putting it into its own .js file and calling that file would make this script more secure.

Any thoughts ?

• References
  https://www.blackhillsinfosec.com/fix-missing-content-security-policy-website/
  https://scotthelme.co.uk/content-security-policy-an-introduction/

Here this hotjar script should added inside body tag instead of head. If it should add inside the head tag that will be better. :)

gatsby-plugin-hotjar/src/gatsby-ssr.js

Line 9 in 08e92c8

return setPostBodyComponents([

How to record custom Event?

Hi

Is there a way to record a custom Hotjar event with this script?

From their docs:

	.addEventListener('click', () => hj('event', 'clicked_cta'));

But I can't get a reference to hj. Any ideas?

T

Error "Uncaught SyntaxError: Unexpected token ','" when no details entered

I have set the plugin up on my local, but not added any details. Because of this I am getting an error.

If this is still being maintained, I would be happy to add a PR to get this fixed.

Can It be made async/defer

It is blocking the main thread that occupies about 150ms in the rendering

Allow increasing cache TTL

Doing a light house audit of our website, the following appeared:

I'm assuming this library could help configure it better?