diff --git a/app/integrations/[slug]/page.tsx b/app/integrations/[slug]/page.tsx new file mode 100644 index 0000000..f9ce901 --- /dev/null +++ b/app/integrations/[slug]/page.tsx @@ -0,0 +1,111 @@ +/** + * @file Dynamic route for individual integration guide pages. + * + * Handles all 50 integration routes via [slug]. + * Exports generateStaticParams for static generation and + * generateMetadata for per-page SEO (title, description, OG, JSON-LD). + */ + +import type { Metadata } from 'next' +import { notFound } from 'next/navigation' +import { integrations, getIntegration } from '@/lib/integrations' +import { getGuideContent } from '@/lib/integration-guides' +import { IntegrationGuide } from '@/components/IntegrationGuide' + +// * ─── Static Params ─────────────────────────────────────────────── +export function generateStaticParams() { + return integrations.map((i) => ({ slug: i.id })) +} + +// * ─── SEO Metadata ──────────────────────────────────────────────── +interface PageProps { + params: Promise<{ slug: string }> +} + +export async function generateMetadata({ params }: PageProps): Promise { + const { slug } = await params + const integration = getIntegration(slug) + if (!integration) return {} + + const title = `How to Add Pulse Analytics to ${integration.name} | Pulse by Ciphera` + const description = integration.seoDescription + const url = `https://pulse.ciphera.net/integrations/${integration.id}` + + return { + title, + description, + keywords: [ + `${integration.name} analytics`, + `${integration.name} Pulse`, + 'privacy-first analytics', + 'website analytics', + 'Ciphera Pulse', + integration.name, + ], + alternates: { canonical: url }, + openGraph: { + title, + description, + url, + siteName: 'Pulse by Ciphera', + type: 'article', + }, + twitter: { + card: 'summary', + title, + description, + }, + } +} + +// * ─── Page Component ────────────────────────────────────────────── +export default async function IntegrationPage({ params }: PageProps) { + const { slug } = await params + const integration = getIntegration(slug) + if (!integration) return notFound() + + const content = getGuideContent(slug) + if (!content) return notFound() + + // * HowTo JSON-LD for rich search snippets + const jsonLd = { + '@context': 'https://schema.org', + '@type': 'HowTo', + name: `How to Add Pulse Analytics to ${integration.name}`, + description: integration.seoDescription, + step: [ + { + '@type': 'HowToStep', + name: `Open your ${integration.name} project`, + text: `Navigate to your ${integration.name} project and locate the file where you manage the HTML head or layout.`, + }, + { + '@type': 'HowToStep', + name: 'Add the Pulse tracking script', + text: 'Insert the Pulse analytics script tag with your data-domain attribute into the head section of your page.', + }, + { + '@type': 'HowToStep', + name: 'Deploy and verify', + text: 'Deploy your changes and visit your Pulse dashboard to verify that page views are being recorded.', + }, + ], + tool: { + '@type': 'HowToTool', + name: 'Pulse by Ciphera', + url: 'https://pulse.ciphera.net', + }, + } + + return ( + <> + - - - - -`} - - -

Method 2: angular.json Scripts Array

-

- Alternatively, reference an external script in your angular.json build configuration. However, for analytics scripts that need defer and data-* attributes, Method 1 is simpler and recommended. -

- -

Configuration Options

- - - ) -} diff --git a/app/integrations/astro/page.tsx b/app/integrations/astro/page.tsx deleted file mode 100644 index 004c687..0000000 --- a/app/integrations/astro/page.tsx +++ /dev/null @@ -1,60 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function AstroIntegrationPage() { - const integration = getIntegration('astro') - if (!integration) return notFound() - - return ( - -

- Astro makes it easy to add third-party scripts. Drop the Pulse snippet into your base layout and you're done. -

- -
- -

Base Layout (Recommended)

-

- Add the script to the <head> of your base layout file so it loads on every page. -

- - -{`--- -// Base layout used by all pages ---- - - - - - - - - - My Astro Site - - - - -`} - - -

Using Astro's Script Integration

-

- You can also configure the script in your astro.config.mjs using the injectScript API of an Astro integration, but the layout approach above is simpler for most projects. -

- -

Astro + View Transitions

-

- If you use Astro's View Transitions, the Pulse script persists across navigations automatically since it is loaded in the <head> with defer. -

- - ) -} diff --git a/app/integrations/gatsby/page.tsx b/app/integrations/gatsby/page.tsx deleted file mode 100644 index 5191b88..0000000 --- a/app/integrations/gatsby/page.tsx +++ /dev/null @@ -1,65 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function GatsbyIntegrationPage() { - const integration = getIntegration('gatsby') - if (!integration) return notFound() - - return ( - -

- Add Pulse to your Gatsby site using the gatsby-ssr API or the Gatsby Head API. -

- -
- -

Method 1: gatsby-ssr.js (Recommended)

-

- Use the onRenderBody API to inject the script into every page's <head>. -

- - -{`import React from "react" - -export const onRenderBody = ({ setHeadComponents }) => { - setHeadComponents([ - `} - - -
    -
  1. Click Save.
    2. -
- -

Theme-Level Integration (Alternative)

-

- If you prefer, you can also add the script directly to your Ghost theme's default.hbs file, just before the closing </head> tag. This approach requires re-uploading the theme whenever you make changes. -

- -

Important Notes

- - - ) -} diff --git a/app/integrations/hugo/page.tsx b/app/integrations/hugo/page.tsx deleted file mode 100644 index 2aa0b6f..0000000 --- a/app/integrations/hugo/page.tsx +++ /dev/null @@ -1,65 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function HugoIntegrationPage() { - const integration = getIntegration('hugo') - if (!integration) return notFound() - - return ( - -

- Add Pulse to your Hugo site by placing the script in a partial or directly in your base template. -

- -
- -

Method 1: Partial (Recommended)

-

- Create an analytics partial and include it in your base template's <head>. -

- - -{`{{ if not .Site.IsServer }} - -{{ end }}`} - - -

- Then include the partial in your baseof.html: -

- - -{` - - - - - {{ .Title }} - - {{ partial "analytics.html" . }} - - - {{ block "main" . }}{{ end }} - -`} - - -

Method 2: Direct Insertion

-

- If you prefer, add the script tag directly to the <head> of your baseof.html without creating a partial. -

- -

- The if not .Site.IsServer guard ensures the script is excluded during local development with hugo server. -

- - ) -} diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx deleted file mode 100644 index 5704ab3..0000000 --- a/app/integrations/nextjs/page.tsx +++ /dev/null @@ -1,87 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function NextJsIntegrationPage() { - const integration = getIntegration('nextjs') - if (!integration) return notFound() - - return ( - -

- The best way to add Pulse to your Next.js application is using the built-in next/script component. -

- -
- -

Using App Router (Recommended)

-

- Add the script to your root layout file (usually app/layout.tsx or app/layout.js). -

- - -{`import Script from 'next/script' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - - - My React App - - -
- -`} - - -

Method 2: Programmatic Injection

-

- If you need to load the script dynamically (e.g., only in production), you can use a useEffect hook in your main App component. -

- - -{`import { useEffect } from 'react' - -function App() { - useEffect(() => { - // Only load in production - if (process.env.NODE_ENV === 'production') { - const script = document.createElement('script') - script.defer = true - script.setAttribute('data-domain', 'your-site.com') - script.src = 'https://pulse.ciphera.net/script.js' - document.head.appendChild(script) - } - }, []) - - return ( -
-

Hello World

-
- ) -}`} - - - ) -} diff --git a/app/integrations/remix/page.tsx b/app/integrations/remix/page.tsx deleted file mode 100644 index a7d7bcc..0000000 --- a/app/integrations/remix/page.tsx +++ /dev/null @@ -1,71 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function RemixIntegrationPage() { - const integration = getIntegration('remix') - if (!integration) return notFound() - - return ( - -

- Add Pulse to your Remix application by placing the script tag in your root route's <head>. -

- -
- -

Root Route (Recommended)

-

- In Remix, the app/root.tsx file controls the HTML shell. Add the Pulse script inside the <head> section. -

- - -{`import { - Links, - Meta, - Outlet, - Scripts, - ScrollRestoration, -} from "@remix-run/react" - -export default function App() { - return ( - - - - - - - - {/* Pulse Analytics */} - `} - - -

Method 2: Custom Pixels (Shopify Plus)

-

- If you are on Shopify Plus, you can also use Customer Events > Custom Pixels to add the script. Go to Settings > Customer events and create a new custom pixel. -

- -

Important Notes

- - - ) -} diff --git a/app/integrations/squarespace/page.tsx b/app/integrations/squarespace/page.tsx deleted file mode 100644 index a428a61..0000000 --- a/app/integrations/squarespace/page.tsx +++ /dev/null @@ -1,52 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function SquarespaceIntegrationPage() { - const integration = getIntegration('squarespace') - if (!integration) return notFound() - - return ( - -

- Add Pulse to your Squarespace site using the built-in Code Injection feature — no plugins needed. -

- -
- -

Code Injection (Recommended)

-
    -
  1. In your Squarespace dashboard, go to Settings > Developer Tools > Code Injection.
    2. -
  2. In the Header field, paste the following snippet:
    3. -
- - -{``} - - -
    -
  1. Click Save.
    2. -
- -

Important Notes

- - - ) -} diff --git a/app/integrations/svelte/page.tsx b/app/integrations/svelte/page.tsx deleted file mode 100644 index b123581..0000000 --- a/app/integrations/svelte/page.tsx +++ /dev/null @@ -1,70 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function SvelteIntegrationPage() { - const integration = getIntegration('svelte') - if (!integration) return notFound() - - return ( - -

- Integrating Pulse with Svelte or SvelteKit takes less than a minute. Just add the script tag to your HTML entry point. -

- -
- -

Svelte (Vite)

-

- For a standard Svelte project scaffolded with Vite, add the script to the <head> of your index.html. -

- - -{` - - - - - - - - - My Svelte App - - -
- - -`} - - -

SvelteKit

-

- In SvelteKit, add the script to your root layout's <svelte:head> block so it loads on every page. -

- - -{` - - - -`} - - -

- Alternatively, you can add the script to src/app.html directly in the <head> section. -

- - ) -} diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx deleted file mode 100644 index c9278df..0000000 --- a/app/integrations/vue/page.tsx +++ /dev/null @@ -1,53 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function VueIntegrationPage() { - const integration = getIntegration('vue') - if (!integration) return notFound() - - return ( - -

- Integrating Pulse with Vue.js is straightforward. Add the script to your index.html file. -

- -
- -

index.html (Vue CLI & Vite)

-

- Add the script tag to the <head> section of your index.html file. This works for both Vue 2 and Vue 3 projects created with Vue CLI or Vite. -

- - -{` - - - - - - - - - My Vue App - - -
- - -`} - - -

- Looking for Nuxt.js? Check the dedicated Nuxt integration guide. -

- - ) -} diff --git a/app/integrations/webflow/page.tsx b/app/integrations/webflow/page.tsx deleted file mode 100644 index a6a3e93..0000000 --- a/app/integrations/webflow/page.tsx +++ /dev/null @@ -1,55 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function WebflowIntegrationPage() { - const integration = getIntegration('webflow') - if (!integration) return notFound() - - return ( - -

- Add Pulse to your Webflow site by pasting a single snippet into your project's custom code settings. -

- -
- -

Project-Level Custom Code (Recommended)

-
    -
  1. Open your Webflow project and go to Project Settings.
    2. -
  2. Navigate to the Custom Code tab.
    3. -
  3. In the Head Code section, paste the following snippet:
    4. -
- - -{``} - - -
    -
  1. Click Save Changes and publish your site.
    2. -
- -

Page-Level Custom Code

-

- If you only want to track specific pages, you can add the script to individual page settings instead of the project-level settings. Go to the page's settings panel and paste the snippet in the Head Code section. -

- -

Important Notes

- - - ) -} diff --git a/app/integrations/wix/page.tsx b/app/integrations/wix/page.tsx deleted file mode 100644 index db49e28..0000000 --- a/app/integrations/wix/page.tsx +++ /dev/null @@ -1,54 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function WixIntegrationPage() { - const integration = getIntegration('wix') - if (!integration) return notFound() - - return ( - -

- Add Pulse to your Wix site using the Custom Code feature in your site settings. -

- -
- -

Custom Code (Recommended)

-
    -
  1. In your Wix dashboard, go to Settings > Custom Code (under “Advanced”).
    2. -
  2. Click + Add Custom Code.
    3. -
  3. Paste the following snippet:
    4. -
- - -{``} - - -
    -
  1. Set the code to load in the Head of All pages.
    2. -
  2. Click Apply.
    3. -
- -

Important Notes

- - - ) -} diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx deleted file mode 100644 index c8d9a6b..0000000 --- a/app/integrations/wordpress/page.tsx +++ /dev/null @@ -1,46 +0,0 @@ -'use client' - -import { IntegrationGuide } from '@/components/IntegrationGuide' -import { CodeBlock } from '@/components/CodeBlock' -import { getIntegration } from '@/lib/integrations' -import { notFound } from 'next/navigation' - -export default function WordPressIntegrationPage() { - const integration = getIntegration('wordpress') - if (!integration) return notFound() - - return ( - -

- You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin. -

- -
- -

Method 1: Using a Plugin (Easiest)

-
    -
  1. Install a plugin like “Insert Headers and Footers” (WPCode).
    2. -
  2. Go to the plugin settings and find the “Scripts in Header” section.
    3. -
  3. Paste the following code snippet:
    4. -
- - -{``} - - -

Method 2: Edit Theme Files (Advanced)

-

- If you are comfortable editing your theme files, you can add the script directly to your header.php file. -

-
    -
  1. Go to Appearance > Theme File Editor.
    2. -
  2. Select header.php from the right sidebar.
    3. -
  3. Paste the script tag just before the closing </head> tag.
    4. -
- - ) -} diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx index 48f4c81..8379a41 100644 --- a/components/CodeBlock.tsx +++ b/components/CodeBlock.tsx @@ -1,5 +1,3 @@ -'use client' - /** * @file Reusable code block component for integration guide pages. * diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx index 236fb8e..e78c408 100644 --- a/components/IntegrationGuide.tsx +++ b/components/IntegrationGuide.tsx @@ -1,16 +1,14 @@ -'use client' - /** * @file Shared layout component for individual integration guide pages. * * Provides the background atmosphere, back-link, header (logo + title), - * and prose-styled content area used by every integration sub-page. + * prose-styled content area, and a related integrations section. */ import Link from 'next/link' -import { ArrowLeftIcon } from '@ciphera-net/ui' +import { ArrowLeftIcon, ArrowRightIcon } from '@ciphera-net/ui' import { type ReactNode } from 'react' -import { type Integration } from '@/lib/integrations' +import { type Integration, getIntegration } from '@/lib/integrations' interface IntegrationGuideProps { /** Integration metadata (name, icon, etc.) */ @@ -20,7 +18,8 @@ interface IntegrationGuideProps { } /** - * Renders the full-page layout for a single integration guide. + * Renders the full-page layout for a single integration guide, + * including related integrations at the bottom. */ export function IntegrationGuide({ integration, children }: IntegrationGuideProps) { // * Scale the icon up for the detail-page header (w-10 h-10) @@ -30,6 +29,12 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp ) + // * Resolve related integrations from IDs + const relatedIntegrations = integration.relatedIds + .map((id) => getIntegration(id)) + .filter((i): i is Integration => i !== undefined) + .slice(0, 4) + return (
{/* * --- ATMOSPHERE (Background) --- */} @@ -63,6 +68,37 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
{children}
+ + {/* * --- Related Integrations --- */} + {relatedIntegrations.length > 0 && ( +
+

+ Related Integrations +

+
+ {relatedIntegrations.map((related) => ( + +
+ {related.icon} +
+
+ + {related.name} + + + {related.description} + +
+ + + ))} +
+
+ )}
) diff --git a/lib/integration-guides.tsx b/lib/integration-guides.tsx new file mode 100644 index 0000000..94b11be --- /dev/null +++ b/lib/integration-guides.tsx @@ -0,0 +1,2632 @@ +/** + * @file Integration guide content — full JSX guide for every supported platform. + * + * Each guide is keyed by the integration slug and rendered on the + * `/integrations/[slug]` page. + * + * * 50 guides across 7 categories. + */ + +import { type ReactNode } from 'react' +import { CodeBlock } from '@/components/CodeBlock' + +// * ─── Guide registry ───────────────────────────────────────────────────────── + +const guides: Record = { + /* ──────────────────────────────────────────────────────────────────────────── + * 1. Next.js + * ──────────────────────────────────────────────────────────────────────────── */ + 'nextjs': ( + <> +

+ The best way to add Pulse to your Next.js application is using the + built-in next/script component. +

+ +
+ +

Method 1: App Router

+

+ Add the Pulse script to your root layout so it loads on every page. +

+ {`import Script from 'next/script' + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + + + My React App + + +
+ +`} + +

Method 2: Programmatic injection via useEffect

+

+ If you prefer to inject the script programmatically (e.g. only in + production), use a useEffect hook. +

+ {`import { useEffect } from 'react' + +function App() { + useEffect(() => { + if (process.env.NODE_ENV === 'production') { + const script = document.createElement('script') + script.defer = true + script.setAttribute('data-domain', 'your-site.com') + script.src = 'https://pulse.ciphera.net/script.js' + document.head.appendChild(script) + } + }, []) + + return

Hello World

+}`} + +

+ Related Integrations:{' '} + Next.js,{' '} + Remix,{' '} + Gatsby,{' '} + Preact +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 3. Vue.js + * ──────────────────────────────────────────────────────────────────────────── */ + 'vue': ( + <> +

+ Add the script to your index.html — works for both Vue CLI + and Vite-based projects. +

+ +
+ +

Add the Pulse script to index.html

+

+ Both Vue CLI and Vite use an index.html as the entry point. + Simply add the Pulse script inside the <head> tag. +

+ {` + + + + + + + + My Vue App + + +
+ + +`} + +

+ Looking for Nuxt? Check the dedicated{' '} + Nuxt guide. +

+ +

+ Related Integrations:{' '} + Nuxt,{' '} + VitePress +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 4. Angular + * ──────────────────────────────────────────────────────────────────────────── */ + 'angular': ( + <> +

+ Add the script to your src/index.html — the single entry + point for all Angular applications. +

+ +
+ +

Add the Pulse script to index.html

+

+ Place the Pulse script inside the <head> tag of your + Angular app's src/index.html. +

+ {` + + + + + + + + My Angular App + + + + + +`} + +

+ For more details, see the{' '} + + Angular docs + . +

+ +

+ Related Integrations:{' '} + React,{' '} + Vue.js +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 5. Svelte + * ──────────────────────────────────────────────────────────────────────────── */ + 'svelte': ( + <> +

+ Add the script to your index.html for Vite-based Svelte, or + use <svelte:head> in SvelteKit. +

+ +
+ +

Method 1: Svelte (Vite)

+

+ For standard Svelte projects using Vite, add the Pulse script to your{' '} + index.html. +

+ {` + + + + + + + + My Svelte App + + +
+ + +`} + +

Method 2: SvelteKit

+

+ In SvelteKit, use <svelte:head> in your root layout + to add the script to every page. +

+ {` + + + +`} + +

+ Alternatively, you can add the script directly to{' '} + src/app.html in your SvelteKit project. +

+ +

+ Related Integrations:{' '} + Astro,{' '} + Vue.js +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 6. Nuxt + * ──────────────────────────────────────────────────────────────────────────── */ + 'nuxt': ( + <> +

+ Configure Pulse analytics in your nuxt.config for a + framework-native setup. +

+ +
+ +

Method 1: Nuxt 3

+

+ Add the Pulse script via the app.head option in your Nuxt 3 + config. +

+ {`export default defineNuxtConfig({ + app: { + head: { + script: [ + { + defer: true, + 'data-domain': 'your-site.com', + src: 'https://pulse.ciphera.net/script.js', + }, + ], + }, + }, +})`} + +

Method 2: Nuxt 2

+

+ In Nuxt 2, use the head property in your config. +

+ {`export default { + head: { + script: [ + { + defer: true, + 'data-domain': 'your-site.com', + src: 'https://pulse.ciphera.net/script.js', + }, + ], + }, +}`} + +

+ For more details, see the{' '} + + Nuxt head config docs + . +

+ +

+ Related Integrations:{' '} + Vue.js,{' '} + Next.js,{' '} + VitePress +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 7. Remix + * ──────────────────────────────────────────────────────────────────────────── */ + 'remix': ( + <> +

+ Add the Pulse script to your app/root.tsx so it's + included on every route. +

+ +
+ +

Add script to app/root.tsx

+

+ The root route is the top-level layout in Remix. Add the Pulse script + inside the <head> section. +

+ {`import { + Links, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from '@remix-run/react' + +export default function App() { + return ( + + + + + + + + + {title} + + + + +`} + +

+ If you're using Astro's View Transitions, the script will + persist across navigations by default since it's in the{' '} + <head>. +

+ +

+ For more details, see the{' '} + + Astro scripts docs + . +

+ +

+ Related Integrations:{' '} + Svelte,{' '} + Hugo,{' '} + Eleventy +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 9. Solid.js + * ──────────────────────────────────────────────────────────────────────────── */ + 'solidjs': ( + <> +

+ Add the Pulse script to your index.html like any Vite-based + project. +

+ +
+ +

Add the Pulse script to index.html

+

+ Solid.js uses Vite under the hood, so simply add the Pulse script to + your HTML entry file. +

+ {` + + + + + + + + My Solid App + + +
+ + +`} + +

+ Related Integrations:{' '} + React,{' '} + Qwik,{' '} + Preact +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 10. Qwik + * ──────────────────────────────────────────────────────────────────────────── */ + 'qwik': ( + <> +

+ Add the Pulse script to your root entry component so it loads on every + page. +

+ +
+ +

Add to src/root.tsx

+

+ In Qwik, add the Pulse script to the <head> section + of your root component. +

+ {`import { component$ } from '@builder.io/qwik' +import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city' + +export default component$(() => { + return ( + + + + + + + My Preact App + + +
+ + +`} + +

+ Related Integrations:{' '} + React,{' '} + Solid.js +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 12. HTMX + * ──────────────────────────────────────────────────────────────────────────── */ + 'htmx': ( + <> +

+ Since HTMX is used with server-rendered HTML, add the Pulse script to + your server's base template. +

+ +
+ +

Add to your base HTML template

+

+ HTMX works with any backend — Django, Flask, Laravel, Rails, Express, + and more. Add the Pulse script to whichever base template your server + renders. +

+ {` + + + + + + + + + My HTMX App + + + + +`} + +

+ See the backend-specific guides for template syntax details:{' '} + Django,{' '} + Flask,{' '} + Laravel,{' '} + Rails,{' '} + Express. +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 13. Ember.js + * ──────────────────────────────────────────────────────────────────────────── */ + 'ember': ( + <> +

+ Add the Pulse script to your app/index.html. +

+ +
+ +

Add the Pulse script to index.html

+

+ Ember uses app/index.html as its entry point. Add the + script inside the <head> tag. +

+ {` + + + + + + + + My Ember App + + {{content-for "head"}} + + + + {{content-for "body"}} + + + +`} + +

+ For more details, see the{' '} + + Ember docs + . +

+ +

+ Related Integrations:{' '} + React,{' '} + Angular +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 14. Laravel + * ──────────────────────────────────────────────────────────────────────────── */ + 'laravel': ( + <> +

+ Add the Pulse script to your Blade layout template with a production + guard. +

+ +
+ +

Add to your Blade layout

+

+ Use Laravel's @production directive to only load the + script in production. +

+ {` + + + + + + @production + + @endproduction + + @yield('title') + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + @yield('content') + +`} + +

+ For more details, see the{' '} + + Laravel @production docs + . +

+ +

+ Related Integrations:{' '} + Django,{' '} + Rails,{' '} + WordPress +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 15. Django + * ──────────────────────────────────────────────────────────────────────────── */ + 'django': ( + <> +

+ Add the Pulse script to your base template with a debug guard. +

+ +
+ +

Add to your base template

+

+ Use Django's template tags to only load the script when{' '} + DEBUG is False. +

+ {` + + + + + + {% if not debug %} + + {% endif %} + + {% block title %}My Django App{% endblock %} + + + {% block content %}{% endblock %} + +`} + +

+ Make sure to pass debug to the template context via{' '} + settings.DEBUG, or use a context processor to make it + available globally. +

+ +

+ For more details, see the{' '} + + Django template docs + . +

+ +

+ Related Integrations:{' '} + Flask,{' '} + Laravel,{' '} + HTMX +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 16. Ruby on Rails + * ──────────────────────────────────────────────────────────────────────────── */ + 'rails': ( + <> +

+ Add the Pulse script to your application layout with a production + environment guard. +

+ +
+ +

Add to your application layout

+

+ Use an if guard to only load the script in production. +

+ {` + + + + + + <% if Rails.env.production? %> + + <% end %> + + <%= yield(:title) || "My Rails App" %> + <%= csrf_meta_tags %> + <%= stylesheet_link_tag "application" %> + + + <%= yield %> + +`} + +

+ For more details, see the{' '} + + Rails layout docs + . +

+ +

+ Related Integrations:{' '} + Laravel,{' '} + Django,{' '} + Jekyll +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 17. Flask + * ──────────────────────────────────────────────────────────────────────────── */ + 'flask': ( + <> +

+ Add the Pulse script to your Jinja2 base template with a debug guard. +

+ +
+ +

Add to your base template

+

+ Use Jinja2's conditional to only load the script when{' '} + DEBUG is off. +

+ {` + + + + + + {% if not config.DEBUG %} + + {% endif %} + + {% block title %}My Flask App{% endblock %} + + + {% block content %}{% endblock %} + +`} + +

+ For more details, see the{' '} + + Flask template docs + . +

+ +

+ Related Integrations:{' '} + Django,{' '} + HTMX,{' '} + Express +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 18. Express + * ──────────────────────────────────────────────────────────────────────────── */ + 'express': ( + <> +

+ Add the Pulse script to your template engine's layout (EJS, Pug, + Handlebars) or serve it via static HTML. +

+ +
+ +

Method 1: EJS template

+

+ If you use EJS as your template engine, add the script to your layout + with a production guard. +

+ {` + + + + + + <% if (process.env.NODE_ENV === 'production') { %> + + <% } %> + + <%= title %> + + + <%- body %> + +`} + +

Method 2: Static HTML

+

+ If you serve static HTML files via Express, add the script directly. +

+ {` + + + + + + + + My Express App + + +

Hello World

+ +`} + +

+ Related Integrations:{' '} + Flask,{' '} + Next.js,{' '} + React +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 19. Gatsby + * ──────────────────────────────────────────────────────────────────────────── */ + 'gatsby': ( + <> +

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

+ {`import React from "react" + +export const onRenderBody = ({ setHeadComponents }) => { + setHeadComponents([ + +{{ end }}`} + +

Method 2: Include the partial in your base layout

+

+ Add the partial to your baseof.html layout. +

+ {` + + + + + {{ partial "analytics.html" . }} + {{ .Title }} + + + {{ block "main" . }}{{ end }} + +`} + +

+ For more details, see the{' '} + + Hugo partials docs + . +

+ +

+ Related Integrations:{' '} + Jekyll,{' '} + Eleventy,{' '} + Astro +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 21. Eleventy + * ──────────────────────────────────────────────────────────────────────────── */ + 'eleventy': ( + <> +

+ Add the Pulse script to your base Nunjucks or Liquid layout. +

+ +
+ +

Add to your base layout

+

+ Place the Pulse script inside the <head> of your + shared base template. +

+ {` + + + + + + + + {{ title }} + + + {{ content | safe }} + +`} + +

+ For more details, see the{' '} + + Eleventy layouts docs + . +

+ +

+ Related Integrations:{' '} + Hugo,{' '} + Jekyll,{' '} + Astro +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 22. Jekyll + * ──────────────────────────────────────────────────────────────────────────── */ + 'jekyll': ( + <> +

+ Add the Pulse script to your default layout or an _includes{' '} + partial. +

+ +
+ +

Method 1: Create an analytics include

+

+ Create a reusable include with a production environment guard. +

+ {`{% if jekyll.environment == "production" %} + +{% endif %}`} + +

Method 2: Include in your default layout

+

+ Reference the include in your default layout's{' '} + <head>. +

+ {` + + + + + {% include analytics.html %} + {{ page.title }} + + + {{ content }} + +`} + +

+ For more details, see the{' '} + + Jekyll includes docs + . +

+ +

+ Related Integrations:{' '} + Hugo,{' '} + Eleventy,{' '} + GitHub Pages +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 23. Docusaurus + * ──────────────────────────────────────────────────────────────────────────── */ + 'docusaurus': ( + <> +

+ Add the Pulse script via the scripts array in your + Docusaurus config. +

+ +
+ +

Configure in docusaurus.config.js

+

+ Docusaurus supports a scripts config option that injects + script tags into every page. +

+ {`module.exports = { + scripts: [ + { + src: 'https://pulse.ciphera.net/script.js', + defer: true, + 'data-domain': 'your-site.com', + }, + ], + // ... rest of config +}`} + +

+ For more details, see the{' '} + + Docusaurus scripts config docs + . +

+ +

+ Related Integrations:{' '} + VitePress,{' '} + MkDocs,{' '} + Gatsby +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 24. VitePress + * ──────────────────────────────────────────────────────────────────────────── */ + 'vitepress': ( + <> +

+ Add the Pulse script via VitePress's head config + option. +

+ +
+ +

Configure in .vitepress/config.ts

+

+ VitePress lets you inject tags into the <head> of + every page via the head array. +

+ {`import { defineConfig } from 'vitepress' + +export default defineConfig({ + head: [ + [ + 'script', + { + defer: '', + 'data-domain': 'your-site.com', + src: 'https://pulse.ciphera.net/script.js', + }, + ], + ], +})`} + +

+ For more details, see the{' '} + + VitePress head config docs + . +

+ +

+ Related Integrations:{' '} + Docusaurus,{' '} + Vue.js,{' '} + Nuxt +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 25. Hexo + * ──────────────────────────────────────────────────────────────────────────── */ + 'hexo': ( + <> +

+ Add the Pulse script to your Hexo theme's layout file. +

+ +
+ +

Edit your theme's layout

+

+ Open the layout file for your active theme and add the Pulse script + inside the <head>. +

+ {` + + + + + + + + <%= config.title %> + <%- css('css/style') %> + + + <%- body %> + <%- js('js/script') %> + +`} + +

+ Alternatively, you can use Hexo's after_render filter + to inject the script programmatically. +

+ +

+ For more details, see the{' '} + + Hexo templates docs + . +

+ +

+ Related Integrations:{' '} + Hugo,{' '} + Jekyll,{' '} + Eleventy +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 26. MkDocs + * ──────────────────────────────────────────────────────────────────────────── */ + 'mkdocs': ( + <> +

+ Add the Pulse script to your MkDocs site using a custom template + override. +

+ +
+ +

Step 1: Create a custom template override

+

+ To include the data-domain attribute, create a template + override file. +

+ {`{% extends "base.html" %} + +{% block extrahead %} + +{% endblock %}`} + +

Step 2: Configure mkdocs.yml

+

+ Set the custom_dir to your overrides folder in your + MkDocs configuration. +

+ {`theme: + name: material + custom_dir: overrides`} + +

+ For more details, see the{' '} + + MkDocs customization docs + . +

+ +

+ Related Integrations:{' '} + Docusaurus,{' '} + VitePress,{' '} + Django +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 27. WordPress + * ──────────────────────────────────────────────────────────────────────────── */ + 'wordpress': ( + <> +

+ Add the Pulse script via a plugin or by editing your theme's header + file directly. +

+ +
+ +

Method 1: Using a plugin (Recommended)

+

+ The easiest way is to use the{' '} + + WPCode (Insert Headers and Footers) + {' '} + plugin. Install it, then go to Code Snippets → Header & Footer{' '} + and paste the Pulse script into the Header section. +

+ {``} + +

Method 2: Edit header.php directly

+

+ Go to Appearance → Theme File Editor and edit{' '} + header.php. Add the Pulse script before the closing{' '} + </head> tag. +

+ +

+ Related Integrations:{' '} + Ghost,{' '} + Drupal,{' '} + WooCommerce +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 28. Ghost + * ──────────────────────────────────────────────────────────────────────────── */ + 'ghost': ( + <> +

+ Use Ghost's built-in Code Injection feature to add the Pulse + script — no theme editing required. +

+ +
+ +

Add via Code Injection

+

+ Go to Settings → Code injection → Site Header{' '} + and paste the Pulse script. +

+ {``} + +

+ Alternatively, you can add the script directly to your theme's{' '} + default.hbs template file. +

+ +

+ For more details, see the{' '} + + Ghost themes docs + . +

+ +

+ Related Integrations:{' '} + WordPress,{' '} + Blogger +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 29. Drupal + * ──────────────────────────────────────────────────────────────────────────── */ + 'drupal': ( + <> +

+ Add the Pulse script via a contributed module or by editing your + theme's Twig template. +

+ +
+ +

Method 1: Using Asset Injector module

+

+ Install the{' '} + + Asset Injector + {' '} + module and create a new JS injector with the Pulse script. Set it to + load on all pages in the header region. +

+ +

Method 2: Edit html.html.twig

+

+ Add the script directly to your theme's{' '} + html.html.twig template in the head area. +

+ {` + + + + {{ head_title|safe_join(' | ') }} + + + + + + + {{ page_top }} + {{ page }} + {{ page_bottom }} + + +`} + +

+ For more details, see the{' '} + + Drupal theming docs + . +

+ +

+ Related Integrations:{' '} + WordPress,{' '} + Joomla +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 30. Joomla + * ──────────────────────────────────────────────────────────────────────────── */ + 'joomla': ( + <> +

+ Add the Pulse script via your Joomla template or a custom HTML module. +

+ +
+ +

Method 1: Edit template index.php

+

+ Go to Extensions → Templates → Your Template{' '} + and edit index.php. Add the Pulse script before the + closing </head> tag. +

+ {` + + + + + + + + + + +`} + +

Method 2: Custom HTML module

+

+ Create a “Custom HTML” module and assign it to the head + position of your template. Paste the Pulse script as the content. +

+ +

+ For more details, see the{' '} + + Joomla template docs + . +

+ +

+ Related Integrations:{' '} + WordPress,{' '} + Drupal +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 31. Strapi + * ──────────────────────────────────────────────────────────────────────────── */ + 'strapi': ( + <> +

+ Strapi is a headless CMS — add Pulse to the frontend{' '} + that consumes your Strapi API, not to Strapi itself. +

+ +
+ +

Where to add the script

+

+ Since Strapi is an API-only backend, the analytics script belongs in + your frontend application. Follow the guide for whichever framework + you're using to render your Strapi content: +

+ + +

+ Related Integrations:{' '} + Contentful,{' '} + Sanity,{' '} + Next.js +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 32. Sanity + * ──────────────────────────────────────────────────────────────────────────── */ + 'sanity': ( + <> +

+ Sanity is a headless CMS — add Pulse to the frontend{' '} + that renders your Sanity content, not to Sanity Studio. +

+ +
+ +

Where to add the script

+

+ Since Sanity is a headless content platform, the analytics script + belongs in your frontend application. Follow the guide for whichever + framework you're using: +

+ + +

+ Related Integrations:{' '} + Strapi,{' '} + Contentful,{' '} + Next.js +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 33. Contentful + * ──────────────────────────────────────────────────────────────────────────── */ + 'contentful': ( + <> +

+ Contentful is a headless CMS — add Pulse to the{' '} + frontend that displays your Contentful content. +

+ +
+ +

Where to add the script

+

+ Since Contentful is an API-first content platform, the analytics script + belongs in your frontend application. Follow the guide for your + framework: +

+ + +

+ Related Integrations:{' '} + Strapi,{' '} + Sanity,{' '} + Next.js +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 34. Payload CMS + * ──────────────────────────────────────────────────────────────────────────── */ + 'payload': ( + <> +

+ Payload CMS is a headless CMS — add Pulse to the{' '} + frontend application that renders your content. +

+ +
+ +

Where to add the script

+

+ Since Payload is a headless CMS, the analytics script belongs in your + frontend. Payload is most commonly used with Next.js, so the{' '} + Next.js guide{' '} + is the best starting point. +

+ + +

+ Related Integrations:{' '} + Strapi,{' '} + Contentful,{' '} + Next.js +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 35. Shopify + * ──────────────────────────────────────────────────────────────────────────── */ + 'shopify': ( + <> +

+ Add the Pulse script via the Shopify theme editor — no app needed. +

+ +
+ +

Method 1: Edit theme code

+

+ Go to Online Store → Themes → Edit code and + open layout/theme.liquid. Add the Pulse script before the + closing </head> tag. +

+ {` +`} + +

Method 2: Shopify Plus — Customer Events

+

+ If you're on Shopify Plus, you can add the Pulse script via{' '} + Settings → Customer Events → Custom Pixels. +

+ +

+ Use your custom domain or .myshopify.com domain as the{' '} + data-domain value. +

+ +

+ For more details, see the{' '} + + Shopify theme docs + . +

+ +

+ Related Integrations:{' '} + WooCommerce,{' '} + BigCommerce,{' '} + PrestaShop +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 36. WooCommerce + * ──────────────────────────────────────────────────────────────────────────── */ + 'woocommerce': ( + <> +

+ WooCommerce runs on WordPress. Use WordPress methods to add the Pulse + script. +

+ +
+ +

Method 1: Using a plugin (Recommended)

+

+ Install the{' '} + + WPCode plugin + {' '} + and paste the Pulse script into the Header section. +

+ {``} + +

Method 2: Edit header.php

+

+ Go to Appearance → Theme File Editor and add the + Pulse script to your theme's header.php before{' '} + </head>. +

+ +

+ Use the same domain you track your main WordPress site with. +

+ +

+ For the full WordPress setup, see the{' '} + WordPress guide. +

+ +

+ Related Integrations:{' '} + Shopify,{' '} + WordPress,{' '} + BigCommerce +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 37. BigCommerce + * ──────────────────────────────────────────────────────────────────────────── */ + 'bigcommerce': ( + <> +

+ Add the Pulse script via BigCommerce's Script Manager. +

+ +
+ +

Add via Script Manager

+

+ Go to Storefront → Script Manager → Create a Script{' '} + and configure it as follows: +

+ + {``} + +

+ For more details, see the{' '} + + BigCommerce Script Manager docs + . +

+ +

+ Related Integrations:{' '} + Shopify,{' '} + WooCommerce,{' '} + PrestaShop +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 38. PrestaShop + * ──────────────────────────────────────────────────────────────────────────── */ + 'prestashop': ( + <> +

+ Add the Pulse script to your PrestaShop theme template. +

+ +
+ +

Edit your theme's head template

+

+ Open the head partial for your active theme and add the Pulse script. +

+ {`{block name='head_seo'} + {$page.meta.title} + +{/block} + + + +{block name='head_stylesheets'} + {include file='_partials/stylesheets.tpl'} +{/block}`} + +

+ For more details, see the{' '} + + PrestaShop theme docs + . +

+ +

+ Related Integrations:{' '} + Shopify,{' '} + WooCommerce,{' '} + BigCommerce +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 39. Webflow + * ──────────────────────────────────────────────────────────────────────────── */ + 'webflow': ( + <> +

+ Paste the Pulse script into your Webflow project's custom code + settings. +

+ +
+ +

Add via Project Settings

+

+ Go to Project Settings → Custom Code → Head Code{' '} + and paste the Pulse script. +

+ {``} + +

+ Note: Custom code requires a paid Webflow site plan. The + script won't appear in the Designer preview — publish your site to + see it in action. +

+ +

+ For more details, see the{' '} + + Webflow custom code docs + . +

+ +

+ Related Integrations:{' '} + Squarespace,{' '} + Wix,{' '} + Framer +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 40. Squarespace + * ──────────────────────────────────────────────────────────────────────────── */ + 'squarespace': ( + <> +

+ Use Squarespace's Code Injection feature to add the Pulse script. +

+ +
+ +

Add via Code Injection

+

+ Go to Settings → Developer Tools → Code Injection → Header{' '} + and paste the Pulse script. +

+ {``} + +

+ Note: Code Injection requires a Business or Commerce + plan. +

+ +

+ For more details, see the{' '} + + Squarespace code injection docs + . +

+ +

+ Related Integrations:{' '} + Webflow,{' '} + Wix,{' '} + Carrd +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 41. Wix + * ──────────────────────────────────────────────────────────────────────────── */ + 'wix': ( + <> +

+ Use Wix's Custom Code settings to add the Pulse script. +

+ +
+ +

Add via Custom Code

+

+ Go to Settings → Custom Code → Add Custom Code. + Set the placement to Head and apply it to{' '} + All pages. +

+ {``} + +

+ Note: Custom Code requires a Wix Premium plan. +

+ +

+ For more details, see the{' '} + + Wix custom code docs + . +

+ +

+ Related Integrations:{' '} + Webflow,{' '} + Squarespace,{' '} + Framer +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 42. Framer + * ──────────────────────────────────────────────────────────────────────────── */ + 'framer': ( + <> +

+ Add the Pulse script to your Framer project's custom code settings. +

+ +
+ +

Add via Project Settings

+

+ Go to Project Settings → General → Custom Code → Head{' '} + and paste the Pulse script. +

+ {``} + +

+ For more details, see the{' '} + + Framer custom code docs + . +

+ +

+ Related Integrations:{' '} + Webflow,{' '} + Squarespace,{' '} + Wix +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 43. Carrd + * ──────────────────────────────────────────────────────────────────────────── */ + 'carrd': ( + <> +

+ Add the Pulse script to your Carrd site's head code section. +

+ +
+ +

Add via Settings

+

+ Open your site's Settings panel and navigate to the{' '} + Head section. Paste the Pulse script there. +

+ {``} + +

+ Note: Custom code requires a Carrd Pro plan. +

+ +

+ For more details, see the{' '} + + Carrd head settings docs + . +

+ +

+ Related Integrations:{' '} + Framer,{' '} + Webflow +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 44. Blogger + * ──────────────────────────────────────────────────────────────────────────── */ + 'blogger': ( + <> +

+ Add the Pulse script via Blogger's Theme HTML editor. +

+ +
+ +

Edit your theme HTML

+

+ Go to Theme → Edit HTML and paste the Pulse script + before the closing </head> tag. +

+ {` +`} + +

+ For more details, see the{' '} + + Blogger HTML editing docs + . +

+ +

+ Related Integrations:{' '} + WordPress,{' '} + Ghost +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 45. Google Tag Manager + * ──────────────────────────────────────────────────────────────────────────── */ + 'gtm': ( + <> +

+ Add Pulse via Google Tag Manager — works with any site that already has + GTM installed. +

+ +
+ +

Create a Custom HTML tag

+

Follow these steps to add Pulse through GTM:

+
    +
  1. Go to Tags → New → Custom HTML
    2. +
  2. Paste the Pulse script
    3. +
  3. Set the trigger to All Pages
    4. +
  4. Publish your container
    5. +
+ {``} + +

+ For more details, see the{' '} + + GTM Custom HTML tag docs + . +

+ +

+ Related Integrations:{' '} + WordPress,{' '} + Shopify,{' '} + Webflow +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 46. Notion + * ──────────────────────────────────────────────────────────────────────────── */ + 'notion': ( + <> +

+ Notion itself doesn't support custom scripts, but tools like{' '} + Super.so,{' '} + Potion, and{' '} + Feather{' '} + let you turn Notion pages into websites with custom code support. +

+ +
+ +

Super.so

+

+ Go to Site Settings → Code → Head and paste + the Pulse script. +

+ {``} + +

Potion

+

+ Go to Project Settings → Custom Code → Head{' '} + and paste the Pulse script. +

+ +

+ For more details, see the{' '} + + Super.so docs + . +

+ +

+ Related Integrations:{' '} + Webflow,{' '} + Framer,{' '} + Carrd +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 47. Cloudflare Pages + * ──────────────────────────────────────────────────────────────────────────── */ + 'cloudflare-pages': ( + <> +

+ Add Pulse to your project's HTML or follow your framework's + guide. +

+ +
+ +

Method 1: Framework-based setup (Recommended)

+

+ If you're deploying a framework (Next.js, Astro, Nuxt, etc.) to + Cloudflare Pages, follow that framework's integration guide: +

+ + +

Method 2: Static HTML

+

+ For static HTML sites, add the Pulse script directly to your{' '} + index.html. +

+ {` + + + + + + + + My Site + + +

Hello World

+ +`} + +

+ For more details, see the{' '} + + Cloudflare Pages docs + . +

+ +

+ Related Integrations:{' '} + Netlify,{' '} + Vercel,{' '} + GitHub Pages +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 48. Netlify + * ──────────────────────────────────────────────────────────────────────────── */ + 'netlify': ( + <> +

+ Add Pulse via your framework's setup or Netlify's snippet + injection feature. +

+ +
+ +

Method 1: Framework guide (Recommended)

+

+ The best approach is to follow your framework's integration guide. + Netlify deploys framework projects, so the script setup happens in your + source code: +

+ + +

Method 2: Snippet injection (via Netlify UI)

+

+ Go to Site settings → Build & deploy → Post processing → Snippet injection{' '} + and add the Pulse script to the <head> of your + pages. +

+ {``} + +

+ For more details, see the{' '} + + Netlify snippet injection docs + . +

+ +

+ Related Integrations:{' '} + Cloudflare Pages,{' '} + Vercel,{' '} + GitHub Pages +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 49. Vercel + * ──────────────────────────────────────────────────────────────────────────── */ + 'vercel': ( + <> +

+ Add Pulse via your framework's setup. Vercel deploys framework + projects, so the script is added in your source code. +

+ +
+ +

Follow your framework's guide

+

+ Vercel is a deployment platform — it doesn't have a built-in + mechanism for injecting scripts. Add the Pulse script following + your framework's integration guide: +

+ + +

+ Note: Vercel's Edge Middleware cannot inject + scripts by design. Use the framework-level approach instead. +

+ +

+ For more details, see the{' '} + + Vercel frameworks docs + . +

+ +

+ Related Integrations:{' '} + Netlify,{' '} + Cloudflare Pages,{' '} + Next.js +

+ + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 50. GitHub Pages + * ──────────────────────────────────────────────────────────────────────────── */ + 'github-pages': ( + <> +

+ Add the Pulse script to your static site's HTML template on GitHub + Pages. +

+ +
+ +

Method 1: Jekyll (default for GitHub Pages)

+

+ Create an analytics include with a production guard and reference it in + your default layout. +

+ {`{% if jekyll.environment == "production" %} + +{% endif %}`} + +

+ Then include it in your layout's <head>: +

+ {` + + + + + {% include analytics.html %} + {{ page.title }} + + + {{ content }} + +`} + +

Method 2: Plain HTML

+

+ For simple static sites, add the Pulse script directly to your{' '} + index.html. +

+ {` + + + + + + + + My Site + + +

Hello World

+ +`} + +

Method 3: Hugo on GitHub Pages

+

+ If you're using Hugo with GitHub Pages, follow the{' '} + Hugo guide. +

+ +

+ For more details, see the{' '} + + GitHub Pages docs + . +

+ +

+ Related Integrations:{' '} + Jekyll,{' '} + Hugo,{' '} + Netlify +

+ + ), +} + +// * ─── Public API ───────────────────────────────────────────────────────────── + +export function getGuideContent(slug: string): ReactNode | undefined { + return guides[slug] +} diff --git a/lib/integrations.tsx b/lib/integrations.tsx index 18aefd4..457c3dd 100644 --- a/lib/integrations.tsx +++ b/lib/integrations.tsx @@ -1,15 +1,25 @@ /** - * @file Integration metadata and official SVG logos. + * @file Integration registry — metadata, official SVG logos, and SEO data for + * every platform Pulse supports. * * ! SVG paths sourced from simple-icons (https://simpleicons.org). - * All icons use a 24×24 viewBox. + * ! All icons use a 24×24 viewBox. + * + * * 50 integrations across 7 categories. */ import { type ReactNode } from 'react' // * ─── Types ────────────────────────────────────────────────────────────────── -export type IntegrationCategory = 'framework' | 'cms' | 'ssg' | 'platform' +export type IntegrationCategory = + | 'framework' + | 'backend' + | 'ssg' + | 'cms' + | 'ecommerce' + | 'platform' + | 'hosting' export interface Integration { id: string @@ -22,28 +32,40 @@ export interface Integration { invertInDark?: boolean /** Official 24×24 SVG as a React node */ icon: ReactNode + /** URL to official documentation / website */ + officialUrl: string + /** SEO meta description for this integration's guide page */ + seoDescription: string + /** Related integration IDs for cross-linking */ + relatedIds: string[] } // * ─── Category labels (for UI grouping) ────────────────────────────────────── export const categoryLabels: Record = { - framework: 'Frameworks', + framework: 'JavaScript Frameworks', + backend: 'Backend Frameworks', + ssg: 'Static Sites & Documentation', cms: 'CMS & Blogging', - ssg: 'Static-Site Generators', - platform: 'Platforms & Builders', + ecommerce: 'eCommerce', + platform: 'Platforms & Tools', + hosting: 'Hosting & Deployment', } export const categoryOrder: IntegrationCategory[] = [ 'framework', - 'platform', + 'backend', 'ssg', 'cms', + 'ecommerce', + 'platform', + 'hosting', ] // * ─── Integration registry ────────────────────────────────────────────────── export const integrations: Integration[] = [ - // * ── Frameworks ─────────────────────────────────────────────────────────── + // * ─── JavaScript Frameworks ──────────────────────────────────────────────── { id: 'nextjs', name: 'Next.js', @@ -56,6 +78,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://nextjs.org/docs', + seoDescription: + 'Step-by-step guide to adding Pulse privacy-first analytics to your Next.js app with next/script. Covers App Router and Pages Router.', + relatedIds: ['react', 'vercel', 'nuxt'], }, { id: 'react', @@ -68,6 +94,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://react.dev', + seoDescription: + 'Integrate Pulse analytics with any React SPA — Create React App, Vite, or custom setups. Two easy methods.', + relatedIds: ['nextjs', 'remix', 'gatsby', 'preact'], }, { id: 'vue', @@ -80,6 +110,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://vuejs.org', + seoDescription: + 'Add Pulse privacy-first analytics to your Vue.js app. Works with Vue 2, Vue 3, Vue CLI, and Vite.', + relatedIds: ['nuxt', 'vitepress'], }, { id: 'angular', @@ -93,6 +127,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://angular.dev', + seoDescription: + 'Add Pulse analytics to your Angular application. Simple index.html setup for all Angular versions.', + relatedIds: ['react', 'vue'], }, { id: 'svelte', @@ -105,6 +143,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://svelte.dev', + seoDescription: + 'Add Pulse analytics to Svelte or SvelteKit. Simple setup for both Vite-based Svelte and SvelteKit applications.', + relatedIds: ['astro', 'vue'], }, { id: 'nuxt', @@ -117,6 +159,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://nuxt.com/docs', + seoDescription: + 'Configure Pulse analytics in Nuxt 2 or Nuxt 3 via nuxt.config. Simple, framework-native setup.', + relatedIds: ['vue', 'nextjs', 'vitepress'], }, { id: 'remix', @@ -130,6 +176,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://remix.run/docs', + seoDescription: + 'Add Pulse analytics to your Remix application via the root route. Simple script tag in app/root.tsx.', + relatedIds: ['react', 'nextjs'], }, { id: 'astro', @@ -142,7 +192,176 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://docs.astro.build', + seoDescription: + 'Integrate Pulse analytics with Astro. Add the script to your base layout for all pages.', + relatedIds: ['svelte', 'hugo', 'eleventy'], }, + { + id: 'solidjs', + name: 'Solid.js', + description: 'Add Pulse analytics to your Solid.js application.', + category: 'framework', + brandColor: '#2C4F7C', + icon: ( + + + + ), + officialUrl: 'https://www.solidjs.com/docs', + seoDescription: + 'Add Pulse analytics to your Solid.js application. Simple index.html script tag setup.', + relatedIds: ['react', 'qwik', 'preact'], + }, + { + id: 'qwik', + name: 'Qwik', + description: 'Integrate Pulse analytics with your Qwik application.', + category: 'framework', + brandColor: '#AC7EF4', + icon: ( + + + + ), + officialUrl: 'https://qwik.dev/docs', + seoDescription: + 'Integrate Pulse analytics with Qwik. Add the script to your root entry file.', + relatedIds: ['react', 'solidjs', 'astro'], + }, + { + id: 'preact', + name: 'Preact', + description: 'Add Pulse analytics to your lightweight Preact application.', + category: 'framework', + brandColor: '#673AB8', + icon: ( + + + + ), + officialUrl: 'https://preactjs.com/guide', + seoDescription: + 'Add Pulse analytics to your Preact application. Same simple setup as any Vite or HTML project.', + relatedIds: ['react', 'solidjs'], + }, + { + id: 'htmx', + name: 'HTMX', + description: 'Add Pulse analytics to your HTMX-powered site.', + category: 'framework', + brandColor: '#3366CC', + icon: ( + + + + ), + officialUrl: 'https://htmx.org/docs', + seoDescription: + 'Add Pulse analytics to your HTMX-powered site. Works with any backend serving HTML.', + relatedIds: ['django', 'flask', 'laravel', 'rails'], + }, + { + id: 'ember', + name: 'Ember.js', + description: 'Add Pulse analytics to your Ember.js application.', + category: 'framework', + brandColor: '#E04E39', + icon: ( + + + + ), + officialUrl: 'https://guides.emberjs.com', + seoDescription: + 'Add Pulse analytics to your Ember.js app. Simple index.html script tag setup.', + relatedIds: ['react', 'angular'], + }, + + // * ─── Backend Frameworks ─────────────────────────────────────────────────── + { + id: 'laravel', + name: 'Laravel', + description: 'Add Pulse analytics to your Laravel app via Blade templates.', + category: 'backend', + brandColor: '#FF2D20', + icon: ( + + + + ), + officialUrl: 'https://laravel.com/docs', + seoDescription: + 'Add Pulse analytics to your Laravel app. Blade template integration for all Laravel versions.', + relatedIds: ['django', 'rails', 'wordpress'], + }, + { + id: 'django', + name: 'Django', + description: 'Add Pulse analytics to your Django app via templates.', + category: 'backend', + brandColor: '#092E20', + icon: ( + + + + ), + officialUrl: 'https://docs.djangoproject.com', + seoDescription: + 'Add Pulse analytics to your Django app. Template-based integration for all Django versions.', + relatedIds: ['flask', 'laravel', 'htmx'], + }, + { + id: 'rails', + name: 'Ruby on Rails', + description: 'Add Pulse analytics to your Rails app via ERB layouts.', + category: 'backend', + brandColor: '#D30001', + icon: ( + + + + ), + officialUrl: 'https://guides.rubyonrails.org', + seoDescription: + 'Add Pulse analytics to your Ruby on Rails app. ERB layout integration.', + relatedIds: ['laravel', 'django', 'jekyll'], + }, + { + id: 'flask', + name: 'Flask', + description: 'Add Pulse analytics to your Flask app via Jinja2 templates.', + category: 'backend', + brandColor: '#3BABC3', + icon: ( + + + + ), + officialUrl: 'https://flask.palletsprojects.com', + seoDescription: + 'Add Pulse analytics to your Flask app. Jinja2 template integration.', + relatedIds: ['django', 'htmx', 'express'], + }, + { + id: 'express', + name: 'Express', + description: 'Serve Pulse analytics from your Express.js application.', + category: 'backend', + brandColor: '#000000', + invertInDark: true, + icon: ( + + + + ), + officialUrl: 'https://expressjs.com', + seoDescription: + 'Serve Pulse analytics from your Express.js app. Middleware or template-based setup.', + relatedIds: ['flask', 'nextjs', 'react'], + }, + + // * ─── Static Sites & Documentation ───────────────────────────────────────── { id: 'gatsby', name: 'Gatsby', @@ -154,9 +373,11 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://www.gatsbyjs.com/docs', + seoDescription: + 'Add Pulse analytics to your Gatsby site using gatsby-ssr or the Gatsby Head API.', + relatedIds: ['react', 'nextjs', 'hugo'], }, - - // * ── Static-Site Generators ──────────────────────────────────────────────── { id: 'hugo', name: 'Hugo', @@ -168,9 +389,110 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://gohugo.io/documentation', + seoDescription: + 'Add Pulse analytics to your Hugo site via a partial or base template.', + relatedIds: ['jekyll', 'eleventy', 'astro'], + }, + { + id: 'eleventy', + name: 'Eleventy', + description: 'Add Pulse analytics to your Eleventy (11ty) static site.', + category: 'ssg', + brandColor: '#222222', + invertInDark: true, + icon: ( + + + + ), + officialUrl: 'https://www.11ty.dev/docs', + seoDescription: + 'Add Pulse analytics to your Eleventy (11ty) site. Template-based integration.', + relatedIds: ['hugo', 'jekyll', 'astro'], + }, + { + id: 'jekyll', + name: 'Jekyll', + description: 'Add Pulse analytics to your Jekyll site via Liquid templates.', + category: 'ssg', + brandColor: '#CC0000', + icon: ( + + + + ), + officialUrl: 'https://jekyllrb.com/docs', + seoDescription: + 'Add Pulse analytics to your Jekyll site. Liquid template integration for GitHub Pages and beyond.', + relatedIds: ['hugo', 'eleventy', 'github-pages'], + }, + { + id: 'docusaurus', + name: 'Docusaurus', + description: 'Add Pulse analytics to your Docusaurus documentation site.', + category: 'ssg', + brandColor: '#3ECC5F', + icon: ( + + + + ), + officialUrl: 'https://docusaurus.io/docs', + seoDescription: + 'Add Pulse analytics to your Docusaurus documentation site via docusaurus.config.js.', + relatedIds: ['vitepress', 'mkdocs', 'gatsby'], + }, + { + id: 'vitepress', + name: 'VitePress', + description: 'Add Pulse analytics to your VitePress documentation site.', + category: 'ssg', + brandColor: '#5C73E7', + icon: ( + + + + ), + officialUrl: 'https://vitepress.dev', + seoDescription: + 'Add Pulse analytics to your VitePress documentation site via config.', + relatedIds: ['docusaurus', 'vue', 'nuxt'], + }, + { + id: 'hexo', + name: 'Hexo', + description: 'Add Pulse analytics to your Hexo blog or documentation site.', + category: 'ssg', + brandColor: '#0E83CD', + icon: ( + + + + ), + officialUrl: 'https://hexo.io/docs', + seoDescription: + 'Add Pulse analytics to your Hexo blog or documentation site.', + relatedIds: ['hugo', 'jekyll', 'eleventy'], + }, + { + id: 'mkdocs', + name: 'MkDocs', + description: 'Add Pulse analytics to your MkDocs documentation site.', + category: 'ssg', + brandColor: '#526CFE', + icon: ( + + + + ), + officialUrl: 'https://www.mkdocs.org', + seoDescription: + 'Add Pulse analytics to your MkDocs documentation site.', + relatedIds: ['docusaurus', 'vitepress', 'django'], }, - // * ── CMS & Blogging ─────────────────────────────────────────────────────── + // * ─── CMS & Blogging ────────────────────────────────────────────────────── { id: 'wordpress', name: 'WordPress', @@ -182,6 +504,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://wordpress.org/documentation', + seoDescription: + 'Add Pulse analytics to your WordPress site via a plugin or theme header code.', + relatedIds: ['ghost', 'drupal', 'woocommerce'], }, { id: 'ghost', @@ -195,21 +521,178 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://ghost.org/docs', + seoDescription: + 'Add Pulse analytics to your Ghost blog via Code Injection settings.', + relatedIds: ['wordpress', 'blogger'], + }, + { + id: 'drupal', + name: 'Drupal', + description: 'Add Pulse analytics to your Drupal site using a module or theme.', + category: 'cms', + brandColor: '#0678BE', + icon: ( + + + + ), + officialUrl: 'https://www.drupal.org/docs', + seoDescription: + 'Add Pulse analytics to your Drupal site using a module or theme template.', + relatedIds: ['wordpress', 'joomla'], + }, + { + id: 'joomla', + name: 'Joomla', + description: 'Add Pulse analytics to your Joomla site via template or extension.', + category: 'cms', + brandColor: '#5091CD', + icon: ( + + + + ), + officialUrl: 'https://docs.joomla.org', + seoDescription: + 'Add Pulse analytics to your Joomla site via template or extension.', + relatedIds: ['wordpress', 'drupal'], + }, + { + id: 'strapi', + name: 'Strapi', + description: 'Add Pulse analytics to your Strapi-powered frontend.', + category: 'cms', + brandColor: '#4945FF', + icon: ( + + + + ), + officialUrl: 'https://docs.strapi.io', + seoDescription: + 'Add Pulse analytics to your Strapi-powered frontend.', + relatedIds: ['contentful', 'sanity', 'nextjs'], + }, + { + id: 'sanity', + name: 'Sanity', + description: 'Add Pulse analytics to your Sanity-powered frontend.', + category: 'cms', + brandColor: '#0D0E12', + invertInDark: true, + icon: ( + + + + ), + officialUrl: 'https://www.sanity.io/docs', + seoDescription: + 'Add Pulse analytics to your Sanity-powered frontend application.', + relatedIds: ['strapi', 'contentful', 'nextjs'], + }, + { + id: 'contentful', + name: 'Contentful', + description: 'Add Pulse analytics to your Contentful-powered frontend.', + category: 'cms', + brandColor: '#2478CC', + icon: ( + + + + ), + officialUrl: 'https://www.contentful.com/developers/docs', + seoDescription: + 'Add Pulse analytics to your Contentful-powered frontend.', + relatedIds: ['strapi', 'sanity', 'nextjs'], + }, + { + id: 'payload', + name: 'Payload CMS', + description: 'Add Pulse analytics to your Payload CMS frontend.', + category: 'cms', + brandColor: '#000000', + invertInDark: true, + icon: ( + + + + ), + officialUrl: 'https://payloadcms.com/docs', + seoDescription: + 'Add Pulse analytics to your Payload CMS frontend application.', + relatedIds: ['strapi', 'contentful', 'nextjs'], }, - // * ── Platforms & Builders ────────────────────────────────────────────────── + // * ─── eCommerce ──────────────────────────────────────────────────────────── { id: 'shopify', name: 'Shopify', description: 'Add privacy-first analytics to your Shopify store via theme editor.', - category: 'platform', + category: 'ecommerce', brandColor: '#7AB55C', icon: ( ), + officialUrl: 'https://shopify.dev/docs', + seoDescription: + 'Add Pulse privacy-first analytics to your Shopify store via the theme editor.', + relatedIds: ['woocommerce', 'bigcommerce', 'prestashop'], }, + { + id: 'woocommerce', + name: 'WooCommerce', + description: 'Add Pulse analytics to your WooCommerce store.', + category: 'ecommerce', + brandColor: '#96588A', + icon: ( + + + + ), + officialUrl: 'https://woocommerce.com/documentation', + seoDescription: + 'Add Pulse analytics to your WooCommerce store. WordPress-based setup.', + relatedIds: ['shopify', 'wordpress', 'bigcommerce'], + }, + { + id: 'bigcommerce', + name: 'BigCommerce', + description: 'Add Pulse analytics to your BigCommerce store.', + category: 'ecommerce', + brandColor: '#121118', + invertInDark: true, + icon: ( + + + + ), + officialUrl: 'https://developer.bigcommerce.com/docs', + seoDescription: + 'Add Pulse analytics to your BigCommerce store via Script Manager.', + relatedIds: ['shopify', 'woocommerce', 'prestashop'], + }, + { + id: 'prestashop', + name: 'PrestaShop', + description: 'Add Pulse analytics to your PrestaShop store.', + category: 'ecommerce', + brandColor: '#DF0067', + icon: ( + + + + ), + officialUrl: 'https://devdocs.prestashop-project.org', + seoDescription: + 'Add Pulse analytics to your PrestaShop store via theme template.', + relatedIds: ['shopify', 'woocommerce', 'bigcommerce'], + }, + + // * ─── Platforms & Tools ──────────────────────────────────────────────────── { id: 'webflow', name: 'Webflow', @@ -221,6 +704,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://university.webflow.com', + seoDescription: + 'Add Pulse analytics to your Webflow site via project custom code settings.', + relatedIds: ['squarespace', 'wix', 'framer'], }, { id: 'squarespace', @@ -234,6 +721,10 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://support.squarespace.com', + seoDescription: + 'Add Pulse analytics to your Squarespace site via the Code Injection panel.', + relatedIds: ['webflow', 'wix', 'carrd'], }, { id: 'wix', @@ -246,6 +737,159 @@ export const integrations: Integration[] = [ ), + officialUrl: 'https://support.wix.com', + seoDescription: + 'Add Pulse analytics to your Wix site via Custom Code settings.', + relatedIds: ['webflow', 'squarespace', 'framer'], + }, + { + id: 'framer', + name: 'Framer', + description: 'Add Pulse analytics to your Framer site via custom code.', + category: 'platform', + brandColor: '#0055FF', + icon: ( + + + + ), + officialUrl: 'https://www.framer.com/help', + seoDescription: + 'Add Pulse analytics to your Framer site via custom code settings.', + relatedIds: ['webflow', 'squarespace', 'wix'], + }, + { + id: 'carrd', + name: 'Carrd', + description: 'Add Pulse analytics to your Carrd one-page site.', + category: 'platform', + brandColor: '#596CAF', + icon: ( + + + + ), + officialUrl: 'https://carrd.co/docs', + seoDescription: + 'Add Pulse analytics to your Carrd one-page site via head code.', + relatedIds: ['framer', 'webflow'], + }, + { + id: 'blogger', + name: 'Blogger', + description: 'Add Pulse analytics to your Blogger blog.', + category: 'platform', + brandColor: '#FF5722', + icon: ( + + + + ), + officialUrl: 'https://support.google.com/blogger', + seoDescription: + 'Add Pulse analytics to your Blogger blog via theme HTML editor.', + relatedIds: ['wordpress', 'ghost'], + }, + { + id: 'gtm', + name: 'Google Tag Manager', + description: 'Add Pulse analytics via Google Tag Manager.', + category: 'platform', + brandColor: '#246FDB', + icon: ( + + + + ), + officialUrl: 'https://tagmanager.google.com', + seoDescription: + 'Add Pulse analytics via Google Tag Manager. Works with any site using GTM.', + relatedIds: ['wordpress', 'shopify', 'webflow'], + }, + { + id: 'notion', + name: 'Notion', + description: 'Add Pulse analytics to Notion-powered websites.', + category: 'platform', + brandColor: '#000000', + invertInDark: true, + icon: ( + + + + ), + officialUrl: 'https://www.notion.so', + seoDescription: + 'Add Pulse analytics to Notion-powered websites using Super.so, Potion, or similar tools.', + relatedIds: ['webflow', 'framer', 'carrd'], + }, + + // * ─── Hosting & Deployment ───────────────────────────────────────────────── + { + id: 'cloudflare-pages', + name: 'Cloudflare Pages', + description: 'Deploy with Pulse analytics on Cloudflare Pages.', + category: 'hosting', + brandColor: '#F38020', + icon: ( + + + + ), + officialUrl: 'https://developers.cloudflare.com/pages', + seoDescription: + 'Deploy with Pulse analytics on Cloudflare Pages. Works with any framework.', + relatedIds: ['netlify', 'vercel', 'github-pages'], + }, + { + id: 'netlify', + name: 'Netlify', + description: 'Add Pulse analytics to sites deployed on Netlify.', + category: 'hosting', + brandColor: '#00C7B7', + icon: ( + + + + ), + officialUrl: 'https://docs.netlify.com', + seoDescription: + 'Add Pulse analytics to sites deployed on Netlify. Snippet injection and build-based methods.', + relatedIds: ['cloudflare-pages', 'vercel', 'github-pages'], + }, + { + id: 'vercel', + name: 'Vercel', + description: 'Add Pulse analytics to sites deployed on Vercel.', + category: 'hosting', + brandColor: '#000000', + invertInDark: true, + icon: ( + + + + ), + officialUrl: 'https://vercel.com/docs', + seoDescription: + 'Add Pulse analytics to sites deployed on Vercel. Works with any framework.', + relatedIds: ['netlify', 'cloudflare-pages', 'nextjs'], + }, + { + id: 'github-pages', + name: 'GitHub Pages', + description: 'Add Pulse analytics to your GitHub Pages site.', + category: 'hosting', + brandColor: '#222222', + invertInDark: true, + icon: ( + + + + ), + officialUrl: 'https://docs.github.com/en/pages', + seoDescription: + 'Add Pulse analytics to your GitHub Pages site. Works with Jekyll, Hugo, or plain HTML.', + relatedIds: ['jekyll', 'hugo', 'netlify'], }, ] @@ -257,7 +901,11 @@ export function getIntegration(id: string): Integration | undefined { } /** Group integrations by category, preserving category ordering. */ -export function getGroupedIntegrations(): { category: IntegrationCategory; label: string; items: Integration[] }[] { +export function getGroupedIntegrations(): { + category: IntegrationCategory + label: string + items: Integration[] +}[] { return categoryOrder .map((cat) => ({ category: cat,