Back to Integrations

Gatsby Integration

Use the Gatsby SSR API or the Gatsby Head API to add Pulse to your site.


Method 1: gatsby-ssr.js

Use the onRenderBody hook to inject the Pulse script into every page's <head>.

gatsby-ssr.js
import React from "react"

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="pulse-analytics"
      defer
      data-domain="your-site.com"
      src="https://pulse.ciphera.net/script.js"
    />,
  ])
}

Method 2: Gatsby Head API (v4.19+)

If you're on Gatsby 4.19 or later, you can use the Head export in any page or template component.

src/pages/index.tsx
import React from "react"

export function Head() {
  return (
    <script
      defer
      data-domain="your-site.com"
      src="https://pulse.ciphera.net/script.js"
    />
  )
}

export default function IndexPage() {
  return <h1>Hello World</h1>
}

For more details, see the Gatsby Head API docs.

Related Integrations: React, Next.js, Hugo