{"componentChunkName":"component---src-templates-post-js","path":"/blog/como-adicionar-hotjar-no-gatsby","result":{"data":{"markdownRemark":{"frontmatter":{"date":"30 de outubro de 2019","title":"Como adicionar hotjar no Gatsby","description":"Adicionando hotjar de maneira simples no Gatsby"},"html":"

Intro

\n

O Hotjar é simplesmente uma ferramenta de análise visual do seu site. Possui várias funcionalidade como gravar sessão do usuário, heatmaps, funis de conversão, surveys, etc...

\n

Adicionando hotjar com Gatsby

\n

Gatsby possui plugins para várias ferramentas e para o hojtar existe o gatsby-plugin-hotjar.

\n
// gatsby-config.js\n\n  plugins: [\n    {\n      resolve: `gatsby-plugin-hotjar`,\n      options: {\n        id: YOUR_HOTJAR_ID,\n        sv: YOUR_HOTJAR_SNIPPET_VERSION\n      }\n    }\n  ]
\n

Os dois campos necessários para adicionar pode ser achado muito fácil no seu dashboard do hotjar. Procurando por `Tracking code` você pode encontrar facilmente o `Site ID` e o `Snippet version` que são solicitados:

\n

\n \n require('dotenv').config({ path: `.env.${activeEnv}` })\n module.exports = {\n //...código omitido\n {\n resolve: `gatsby-plugin-hotjar`,\n options: {\n id: process.env.HOTJAR_ID,\n sv: process.env.HOTJAR_SNIPPET_VERSION\n }\n }\n

Pronto! Para verificar se a instalação esta funcionando é só acessar o dashboard do hotjar, selecionar `Tracking` no canto direito e depois `Verify installation`. Deve abrir seu site com o selo de verificação do hotjar.

","timeToRead":1}},"pageContext":{"locale":"en","title":"Como adicionar hotjar no Gatsby"}},"staticQueryHashes":["1886018365","764694655"]}