---
title: "Gatsby"
description: "Add Pulse analytics to your Gatsby site using gatsby-ssr or the Gatsby Head API."
category: "ssg"
brandColor: "#663399"
officialUrl: "https://www.gatsbyjs.com/docs"
relatedIds: ["react", "nextjs", "hugo"]
date: "2026-03-28"
---

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

<CodeBlock filename="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"
    />,
  ])
}`}</CodeBlock>

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

<CodeBlock filename="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>
}`}</CodeBlock>

For more details, see the [Gatsby Head API docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/).
