Contentful

Contentful is an enterprise headless CMS that delivers content via API. Since Contentful is headless, you'll add analytics-tube 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 analytics-tube 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.analytics.tube/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 analytics-tube 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="analytics-tube"
      src="https://app.analytics.tube/api/script.js"
      data-site-id="YOUR_SITE_ID"
      defer
    />
  ])
}