feat: trim integration pages from 75 to 25 + migrate to MDX
- Add dedicatedPage flag to integration registry (25 true, 50 false) - Delete hardcoded nextjs/react/vue/wordpress route pages (wrong metadata) - Hub page routes non-dedicated integrations to /integrations/script-tag - Add 301 redirects for 50 removed slugs → /integrations/script-tag - Migrate guide content from TSX to MDX (content/integrations/*.mdx) - Add gray-matter, next-mdx-remote, remark-gfm dependencies - Add content loader (lib/integration-content.ts) matching ciphera-website pattern - Add prebuild script for integration guide index generation - Sitemap reduced from 83 to 35 URLs with real lastmod dates - Remove seoDescription from registry (now in MDX frontmatter)
This commit is contained in:
Usman Baig
39
content/integrations/angular.mdx
Normal file
39
content/integrations/angular.mdx
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "Angular"
|
||||
description: "Add Pulse analytics to your Angular application. Simple index.html setup for all Angular versions."
|
||||
category: "framework"
|
||||
brandColor: "#0F0F11"
|
||||
officialUrl: "https://angular.dev"
|
||||
relatedIds: ["react", "vue"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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`.
|
||||
|
||||
<CodeBlock filename="src/index.html">{`<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
|
||||
<title>My Angular App</title>
|
||||
<base href="/">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
For more details, see the [Angular docs](https://angular.dev/guide/components).
|
||||
48
content/integrations/astro.mdx
Normal file
48
content/integrations/astro.mdx
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: "Astro"
|
||||
description: "Integrate Pulse analytics with Astro. Add the script to your base layout for all pages."
|
||||
category: "framework"
|
||||
brandColor: "#BC52EE"
|
||||
officialUrl: "https://docs.astro.build"
|
||||
relatedIds: ["svelte", "hugo", "eleventy"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
Add the Pulse script to your base layout so it's included on every page of your Astro site.
|
||||
|
||||
---
|
||||
|
||||
## Add to your base layout
|
||||
|
||||
Place the Pulse script in the `<head>` of your shared layout component.
|
||||
|
||||
<CodeBlock filename="src/layouts/BaseLayout.astro">{`---
|
||||
interface Props {
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
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](https://docs.astro.build/en/guides/client-side-scripts/).
|
||||
42
content/integrations/django.mdx
Normal file
42
content/integrations/django.mdx
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: "Django"
|
||||
description: "Add Pulse analytics to your Django app. Template-based integration for all Django versions."
|
||||
category: "backend"
|
||||
brandColor: "#092E20"
|
||||
officialUrl: "https://docs.djangoproject.com"
|
||||
relatedIds: ["flask", "laravel", "htmx"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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`.
|
||||
|
||||
<CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
{% if not debug %}
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
{% endif %}
|
||||
|
||||
<title>{% block title %}My Django App{% endblock %}</title>
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}{% endblock %}
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
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](https://docs.djangoproject.com/en/stable/ref/templates/builtins/).
|
||||
45
content/integrations/drupal.mdx
Normal file
45
content/integrations/drupal.mdx
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: "Drupal"
|
||||
description: "Add Pulse analytics to your Drupal site using a module or theme template."
|
||||
category: "cms"
|
||||
brandColor: "#0678BE"
|
||||
officialUrl: "https://www.drupal.org/docs"
|
||||
relatedIds: ["wordpress", "joomla"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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](https://www.drupal.org/project/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.
|
||||
|
||||
<CodeBlock filename="templates/html.html.twig">{`<!DOCTYPE html>
|
||||
<html{{ html_attributes }}>
|
||||
<head>
|
||||
<head-placeholder token="{{ placeholder_token }}">
|
||||
<title>{{ head_title|safe_join(' | ') }}</title>
|
||||
<css-placeholder token="{{ placeholder_token }}">
|
||||
<js-placeholder token="{{ placeholder_token }}">
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
</head>
|
||||
<body{{ attributes }}>
|
||||
{{ page_top }}
|
||||
{{ page }}
|
||||
{{ page_bottom }}
|
||||
<js-bottom-placeholder token="{{ placeholder_token }}">
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
For more details, see the [Drupal theming docs](https://www.drupal.org/docs/theming-drupal).
|
||||
38
content/integrations/eleventy.mdx
Normal file
38
content/integrations/eleventy.mdx
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Eleventy"
|
||||
description: "Add Pulse analytics to your Eleventy (11ty) site. Template-based integration."
|
||||
category: "ssg"
|
||||
brandColor: "#222222"
|
||||
officialUrl: "https://www.11ty.dev/docs"
|
||||
relatedIds: ["hugo", "jekyll", "astro"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="src/_includes/base.njk">{`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
|
||||
<title>{{ title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
{{ content | safe }}
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
For more details, see the [Eleventy layouts docs](https://www.11ty.dev/docs/layouts/).
|
||||
61
content/integrations/express.mdx
Normal file
61
content/integrations/express.mdx
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: "Express"
|
||||
description: "Serve Pulse analytics from your Express.js app. Middleware or template-based setup."
|
||||
category: "backend"
|
||||
brandColor: "#000000"
|
||||
officialUrl: "https://expressjs.com"
|
||||
relatedIds: ["flask", "nextjs", "react"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="views/layout.ejs">{`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<% if (process.env.NODE_ENV === 'production') { %>
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
<% } %>
|
||||
|
||||
<title><%= title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<%- body %>
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
## Method 2: Static HTML
|
||||
|
||||
If you serve static HTML files via Express, add the script directly.
|
||||
|
||||
<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
|
||||
<title>My Express App</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello World</h1>
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
40
content/integrations/flask.mdx
Normal file
40
content/integrations/flask.mdx
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: "Flask"
|
||||
description: "Add Pulse analytics to your Flask app. Jinja2 template integration."
|
||||
category: "backend"
|
||||
brandColor: "#3BABC3"
|
||||
officialUrl: "https://flask.palletsprojects.com"
|
||||
relatedIds: ["django", "htmx", "express"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
{% if not config.DEBUG %}
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
{% endif %}
|
||||
|
||||
<title>{% block title %}My Flask App{% endblock %}</title>
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}{% endblock %}
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
For more details, see the [Flask template docs](https://flask.palletsprojects.com/en/stable/patterns/templateinheritance/).
|
||||
25
content/integrations/framer.mdx
Normal file
25
content/integrations/framer.mdx
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: "Framer"
|
||||
description: "Add Pulse analytics to your Framer site via custom code settings."
|
||||
category: "platform"
|
||||
brandColor: "#0055FF"
|
||||
officialUrl: "https://www.framer.com/help"
|
||||
relatedIds: ["webflow", "squarespace", "wix"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="Project Settings -> Head">{`<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>`}</CodeBlock>
|
||||
|
||||
For more details, see the [Framer custom code docs](https://www.framer.com/help/articles/custom-code/).
|
||||
52
content/integrations/gatsby.mdx
Normal file
52
content/integrations/gatsby.mdx
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
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/).
|
||||
27
content/integrations/ghost.mdx
Normal file
27
content/integrations/ghost.mdx
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Ghost"
|
||||
description: "Add Pulse analytics to your Ghost blog via Code Injection settings."
|
||||
category: "cms"
|
||||
brandColor: "#15171A"
|
||||
officialUrl: "https://ghost.org/docs"
|
||||
relatedIds: ["wordpress", "blogger"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="Settings -> Code injection -> Site Header">{`<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>`}</CodeBlock>
|
||||
|
||||
Alternatively, you can add the script directly to your theme's `default.hbs` template file.
|
||||
|
||||
For more details, see the [Ghost themes docs](https://ghost.org/docs/themes/).
|
||||
39
content/integrations/gtm.mdx
Normal file
39
content/integrations/gtm.mdx
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "Google Tag Manager"
|
||||
description: "Add Pulse analytics via Google Tag Manager. Works with any site using GTM."
|
||||
category: "platform"
|
||||
brandColor: "#246FDB"
|
||||
officialUrl: "https://tagmanager.google.com"
|
||||
relatedIds: ["wordpress", "shopify", "webflow"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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. Paste the snippet below
|
||||
3. Set the trigger to **All Pages**
|
||||
4. Publish your container
|
||||
|
||||
<CodeBlock filename="GTM -> Custom HTML Tag">{`<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
|
||||
|
||||
That's it. Pulse auto-detects the domain from the page, so no extra configuration is needed.
|
||||
|
||||
<details>
|
||||
<summary className="cursor-pointer text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">Advanced: override domain or configure options</summary>
|
||||
|
||||
If your site is registered under a different domain than the page hostname, or you need custom options (API endpoint, storage mode, etc.), use `pulseConfig`:
|
||||
|
||||
<CodeBlock filename="GTM -> Custom HTML Tag (with config)">{`<script>
|
||||
window.pulseConfig = { domain: "your-site.com" };
|
||||
</script>
|
||||
<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
|
||||
</details>
|
||||
|
||||
For more details, see the [GTM Custom HTML tag docs](https://support.google.com/tagmanager/answer/6103696).
|
||||
44
content/integrations/hugo.mdx
Normal file
44
content/integrations/hugo.mdx
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Hugo"
|
||||
description: "Add Pulse analytics to your Hugo site via a partial or base template."
|
||||
category: "ssg"
|
||||
brandColor: "#FF4088"
|
||||
officialUrl: "https://gohugo.io/documentation"
|
||||
relatedIds: ["jekyll", "eleventy", "astro"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
Add the Pulse script via a Hugo partial or directly in your base template.
|
||||
|
||||
---
|
||||
|
||||
## Method 1: Create a partial
|
||||
|
||||
Create an analytics partial with a production guard using Hugo's `.Site.IsServer` flag.
|
||||
|
||||
<CodeBlock filename="layouts/partials/analytics.html">{`{{ if not .Site.IsServer }}
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
{{ end }}`}</CodeBlock>
|
||||
|
||||
## Method 2: Include the partial in your base layout
|
||||
|
||||
Add the partial to your `baseof.html` layout.
|
||||
|
||||
<CodeBlock filename="layouts/_default/baseof.html">{`<!DOCTYPE html>
|
||||
<html lang="{{ .Site.Language }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{{ partial "analytics.html" . }}
|
||||
<title>{{ .Title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
{{ block "main" . }}{{ end }}
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
For more details, see the [Hugo partials docs](https://gohugo.io/templates/partials/).
|
||||
41
content/integrations/laravel.mdx
Normal file
41
content/integrations/laravel.mdx
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: "Laravel"
|
||||
description: "Add Pulse analytics to your Laravel app. Blade template integration for all Laravel versions."
|
||||
category: "backend"
|
||||
brandColor: "#FF2D20"
|
||||
officialUrl: "https://laravel.com/docs"
|
||||
relatedIds: ["django", "rails", "wordpress"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="resources/views/layouts/app.blade.php">{`<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
@production
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
@endproduction
|
||||
|
||||
<title>@yield('title')</title>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
<body>
|
||||
@yield('content')
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
For more details, see the [Laravel @production docs](https://laravel.com/docs/blade#the-production-directive).
|
||||
68
content/integrations/nextjs.mdx
Normal file
68
content/integrations/nextjs.mdx
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: "Next.js"
|
||||
description: "Step-by-step guide to adding Pulse privacy-first analytics to your Next.js app with next/script. Covers App Router and Pages Router."
|
||||
category: "framework"
|
||||
brandColor: "#000000"
|
||||
officialUrl: "https://nextjs.org/docs"
|
||||
relatedIds: ["react", "vercel", "nuxt"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="app/layout.tsx">{`import Script from 'next/script'
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Script
|
||||
defer
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
data-domain="your-site.com"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}`}</CodeBlock>
|
||||
|
||||
## Method 2: Pages Router
|
||||
|
||||
If you're using the Pages Router, add the script to your custom `_app.tsx`.
|
||||
|
||||
<CodeBlock filename="pages/_app.tsx">{`import Script from 'next/script'
|
||||
import type { AppProps } from 'next/app'
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<>
|
||||
<Script
|
||||
defer
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
data-domain="your-site.com"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
)
|
||||
}`}</CodeBlock>
|
||||
|
||||
## Configuration options
|
||||
|
||||
- `data-domain` — your site's domain (without `https://`)
|
||||
- `src` — the Pulse script URL
|
||||
- `strategy="afterInteractive"` — loads the script after the page becomes interactive
|
||||
|
||||
For more details, see the [Next.js Script docs](https://nextjs.org/docs/app/api-reference/components/script).
|
||||
49
content/integrations/nuxt.mdx
Normal file
49
content/integrations/nuxt.mdx
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: "Nuxt"
|
||||
description: "Configure Pulse analytics in Nuxt 2 or Nuxt 3 via nuxt.config. Simple, framework-native setup."
|
||||
category: "framework"
|
||||
brandColor: "#00DC82"
|
||||
officialUrl: "https://nuxt.com/docs"
|
||||
relatedIds: ["vue", "nextjs", "vitepress"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="nuxt.config.ts">{`export default defineNuxtConfig({
|
||||
app: {
|
||||
head: {
|
||||
script: [
|
||||
{
|
||||
defer: true,
|
||||
'data-domain': 'your-site.com',
|
||||
src: 'https://pulse.ciphera.net/script.js',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
})`}</CodeBlock>
|
||||
|
||||
## Method 2: Nuxt 2
|
||||
|
||||
In Nuxt 2, use the `head` property in your config.
|
||||
|
||||
<CodeBlock filename="nuxt.config.js">{`export default {
|
||||
head: {
|
||||
script: [
|
||||
{
|
||||
defer: true,
|
||||
'data-domain': 'your-site.com',
|
||||
src: 'https://pulse.ciphera.net/script.js',
|
||||
},
|
||||
],
|
||||
},
|
||||
}`}</CodeBlock>
|
||||
|
||||
For more details, see the [Nuxt head config docs](https://nuxt.com/docs/api/nuxt-config#head).
|
||||
42
content/integrations/rails.mdx
Normal file
42
content/integrations/rails.mdx
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: "Ruby on Rails"
|
||||
description: "Add Pulse analytics to your Ruby on Rails app. ERB layout integration."
|
||||
category: "backend"
|
||||
brandColor: "#D30001"
|
||||
officialUrl: "https://guides.rubyonrails.org"
|
||||
relatedIds: ["laravel", "django", "jekyll"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="app/views/layouts/application.html.erb">{`<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<% if Rails.env.production? %>
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
<% end %>
|
||||
|
||||
<title><%= yield(:title) || "My Rails App" %></title>
|
||||
<%= csrf_meta_tags %>
|
||||
<%= stylesheet_link_tag "application" %>
|
||||
</head>
|
||||
<body>
|
||||
<%= yield %>
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
For more details, see the [Rails layout docs](https://guides.rubyonrails.org/layouts_and_rendering.html).
|
||||
56
content/integrations/react.mdx
Normal file
56
content/integrations/react.mdx
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: "React"
|
||||
description: "Integrate Pulse analytics with any React SPA — Create React App, Vite, or custom setups. Two easy methods."
|
||||
category: "framework"
|
||||
brandColor: "#61DAFB"
|
||||
officialUrl: "https://react.dev"
|
||||
relatedIds: ["nextjs", "remix", "gatsby", "preact"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
For standard React SPAs, add the script to your `index.html`.
|
||||
|
||||
---
|
||||
|
||||
## Method 1: index.html (Recommended)
|
||||
|
||||
The simplest approach is to add the Pulse script directly to your HTML entry point.
|
||||
|
||||
<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
|
||||
<title>My React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
## Method 2: Programmatic injection via useEffect
|
||||
|
||||
If you prefer to inject the script programmatically (e.g. only in production), use a `useEffect` hook.
|
||||
|
||||
<CodeBlock filename="src/App.tsx">{`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 <div className="App"><h1>Hello World</h1></div>
|
||||
}`}</CodeBlock>
|
||||
50
content/integrations/remix.mdx
Normal file
50
content/integrations/remix.mdx
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: "Remix"
|
||||
description: "Add Pulse analytics to your Remix application via the root route. Simple script tag in app/root.tsx."
|
||||
category: "framework"
|
||||
brandColor: "#000000"
|
||||
officialUrl: "https://remix.run/docs"
|
||||
relatedIds: ["react", "nextjs"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="app/root.tsx">{`import {
|
||||
Links,
|
||||
Meta,
|
||||
Outlet,
|
||||
Scripts,
|
||||
ScrollRestoration,
|
||||
} from '@remix-run/react'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<Meta />
|
||||
<Links />
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<Outlet />
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}`}</CodeBlock>
|
||||
|
||||
For more details, see the [Remix root docs](https://remix.run/docs/en/main/file-conventions/root).
|
||||
45
content/integrations/script-tag.mdx
Normal file
45
content/integrations/script-tag.mdx
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: "Script Tag"
|
||||
description: "Add privacy-first analytics to any website with a single script tag. Works with any platform, CMS, or framework."
|
||||
category: "platform"
|
||||
brandColor: "#F97316"
|
||||
officialUrl: "https://pulse.ciphera.net"
|
||||
relatedIds: []
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
Add Pulse to any website by pasting a single script tag into your HTML. This works with any platform, CMS, or static site.
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
Add the following script tag inside the `<head>` section of your website:
|
||||
|
||||
<CodeBlock filename="index.html">{`<head>
|
||||
<!-- ... other head elements ... -->
|
||||
<script
|
||||
defer
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
data-domain="your-site.com"
|
||||
></script>
|
||||
</head>`}</CodeBlock>
|
||||
|
||||
## Configuration
|
||||
|
||||
- `data-domain` — your site's domain as shown in your Pulse dashboard (e.g. `example.com`), without `https://`
|
||||
- `defer` — loads the script without blocking page rendering
|
||||
|
||||
## Where to paste the script
|
||||
|
||||
Most platforms have a "Custom Code", "Code Injection", or "Header Scripts" section in their settings. Look for one of these:
|
||||
|
||||
- **Squarespace:** Settings -> Developer Tools -> Code Injection -> Header
|
||||
- **Wix:** Settings -> Custom Code -> Head
|
||||
- **Webflow:** Project Settings -> Custom Code -> Head Code
|
||||
- **Ghost:** Settings -> Code Injection -> Site Header
|
||||
- **Any HTML site:** Paste directly into your `<head>` tag
|
||||
|
||||
## Verify installation
|
||||
|
||||
After deploying, visit your site and check the Pulse dashboard. You should see your first page view within a few seconds.
|
||||
32
content/integrations/shopify.mdx
Normal file
32
content/integrations/shopify.mdx
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "Shopify"
|
||||
description: "Add Pulse privacy-first analytics to your Shopify store via the theme editor."
|
||||
category: "ecommerce"
|
||||
brandColor: "#7AB55C"
|
||||
officialUrl: "https://shopify.dev/docs"
|
||||
relatedIds: ["woocommerce", "bigcommerce", "prestashop"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="layout/theme.liquid">{`<!-- Add before </head> -->
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>`}</CodeBlock>
|
||||
|
||||
## 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](https://shopify.dev/docs/storefronts/themes/architecture/layouts).
|
||||
27
content/integrations/squarespace.mdx
Normal file
27
content/integrations/squarespace.mdx
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Squarespace"
|
||||
description: "Add Pulse analytics to your Squarespace site via the Code Injection panel."
|
||||
category: "platform"
|
||||
brandColor: "#000000"
|
||||
officialUrl: "https://support.squarespace.com"
|
||||
relatedIds: ["webflow", "wix", "carrd"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="Settings -> Code Injection -> Header">{`<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>`}</CodeBlock>
|
||||
|
||||
**Note:** Code Injection requires a Business or Commerce plan.
|
||||
|
||||
For more details, see the [Squarespace code injection docs](https://support.squarespace.com/hc/en-us/articles/205815928).
|
||||
53
content/integrations/svelte.mdx
Normal file
53
content/integrations/svelte.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: "Svelte"
|
||||
description: "Add Pulse analytics to Svelte or SvelteKit. Simple setup for both Vite-based Svelte and SvelteKit applications."
|
||||
category: "framework"
|
||||
brandColor: "#FF3E00"
|
||||
officialUrl: "https://svelte.dev"
|
||||
relatedIds: ["astro", "vue"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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`.
|
||||
|
||||
<CodeBlock filename="index.html">{`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
|
||||
<title>My Svelte App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
## Method 2: SvelteKit
|
||||
|
||||
In SvelteKit, use `<svelte:head>` in your root layout to add the script to every page.
|
||||
|
||||
<CodeBlock filename="src/routes/+layout.svelte">{`<svelte:head>
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
</svelte:head>
|
||||
|
||||
<slot />`}</CodeBlock>
|
||||
|
||||
Alternatively, you can add the script directly to `src/app.html` in your SvelteKit project.
|
||||
39
content/integrations/vue.mdx
Normal file
39
content/integrations/vue.mdx
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "Vue.js"
|
||||
description: "Add Pulse privacy-first analytics to your Vue.js app. Works with Vue 2, Vue 3, Vue CLI, and Vite."
|
||||
category: "framework"
|
||||
brandColor: "#4FC08D"
|
||||
officialUrl: "https://vuejs.org"
|
||||
relatedIds: ["nuxt", "vitepress"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="index.html">{`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>
|
||||
|
||||
<title>My Vue App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>`}</CodeBlock>
|
||||
|
||||
Looking for Nuxt? Check the dedicated [Nuxt guide](/integrations/nuxt).
|
||||
27
content/integrations/webflow.mdx
Normal file
27
content/integrations/webflow.mdx
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Webflow"
|
||||
description: "Add Pulse analytics to your Webflow site via project custom code settings."
|
||||
category: "platform"
|
||||
brandColor: "#146EF5"
|
||||
officialUrl: "https://university.webflow.com"
|
||||
relatedIds: ["squarespace", "wix", "framer"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock filename="Project Settings -> Head Code">{`<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>`}</CodeBlock>
|
||||
|
||||
**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](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tag).
|
||||
27
content/integrations/wix.mdx
Normal file
27
content/integrations/wix.mdx
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Wix"
|
||||
description: "Add Pulse analytics to your Wix site via Custom Code settings."
|
||||
category: "platform"
|
||||
brandColor: "#0C6EFC"
|
||||
officialUrl: "https://support.wix.com"
|
||||
relatedIds: ["webflow", "squarespace", "framer"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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**.
|
||||
|
||||
<CodeBlock filename="Custom Code Snippet">{`<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>`}</CodeBlock>
|
||||
|
||||
**Note:** Custom Code requires a Wix Premium plan.
|
||||
|
||||
For more details, see the [Wix custom code docs](https://support.wix.com/en/article/embedding-custom-code-on-your-site).
|
||||
27
content/integrations/wordpress.mdx
Normal file
27
content/integrations/wordpress.mdx
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "WordPress"
|
||||
description: "Add Pulse analytics to your WordPress site via a plugin or theme header code."
|
||||
category: "cms"
|
||||
brandColor: "#21759B"
|
||||
officialUrl: "https://wordpress.org/documentation"
|
||||
relatedIds: ["ghost", "drupal", "woocommerce"]
|
||||
date: "2026-03-28"
|
||||
---
|
||||
|
||||
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)](https://wordpress.org/plugins/insert-headers-and-footers/) plugin. Install it, then go to **Code Snippets -> Header & Footer** and paste the Pulse script into the Header section.
|
||||
|
||||
<CodeBlock filename="Header Script">{`<script
|
||||
defer
|
||||
data-domain="your-site.com"
|
||||
src="https://pulse.ciphera.net/script.js"
|
||||
></script>`}</CodeBlock>
|
||||
|
||||
## 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.
|
||||
Reference in New Issue
Block a user