Contentful

Contentful is an enterprise headless CMS that delivers content via API. Since Contentful is headless, you'll add Rybbit Analytics to your frontend application rather than to Contentful itself.

Contentful only manages and delivers your content - it doesn't serve your website. The tracking script goes in your frontend framework (Next.js, Gatsby, Nuxt, etc.).

How to Add Rybbit with Contentful

Choose the guide that matches your frontend framework:

React-based Frontends

Next.js - Most common choice with Contentful
Gatsby - Has official Contentful plugin
Remix
Vite + React

Vue-based Frontends

Nuxt
Vite + Vue

Other Frontends

Astro
SvelteKit
Angular

Quick Example: Next.js with Contentful

If you're using Next.js (the most common Contentful frontend), add the tracking script to your root layout:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://app.rybbit.io/api/script.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Replace YOUR_SITE_ID with your actual Site ID from your Rybbit dashboard.

Quick Example: Gatsby with Contentful

If you're using Gatsby, add to your gatsby-ssr.js:

import React from 'react'

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="rybbit"
      src="https://app.rybbit.io/api/script.js"
      data-site-id="YOUR_SITE_ID"
      defer
    />
  ])
}