/** * @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. * * * 75 guides across 7 categories. */ import { type ReactNode } from 'react' import { CodeBlock } from '@ciphera-net/ui' // * ─── 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. Paste the snippet below
  3. Set the trigger to All Pages
  4. Publish your container
{``}

That's it. Pulse auto-detects the domain from the page, so no extra configuration is needed.

Advanced: override domain or configure options

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:

{` `}

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

), /* ──────────────────────────────────────────────────────────────────────────── * 51. Craft CMS * ──────────────────────────────────────────────────────────────────────────── */ 'craftcms': ( <>

Add Pulse to your Craft CMS site by editing your Twig layout template.

Add the Pulse Script to Your Layout

Edit your main Twig layout template at{' '} templates/_layout.twig and add the Pulse script inside the{' '} <head> section.

{` {{ siteName }} {% block content %}{% endblock %} `}

For more details, see the{' '} Craft CMS docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 52. Statamic * ──────────────────────────────────────────────────────────────────────────── */ 'statamic': ( <>

Statamic is a Laravel-based CMS. Add Pulse to your Antlers or Blade layout.

Add the Pulse Script to Your Layout

Edit your Antlers layout at{' '} resources/views/layout.antlers.html and add the Pulse script inside the <head> section.

{` {{ title }} {{ template_content }} `}

For more details, see the{' '} Statamic views docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 53. TYPO3 * ──────────────────────────────────────────────────────────────────────────── */ 'typo3': ( <>

Add Pulse to your TYPO3 site via TypoScript setup.

Add the Pulse Script via TypoScript

Add the following to your setup.typoscript file to inject the Pulse script into the page header.

{`page.headerData.999 = TEXT page.headerData.999.value = `}

For more details, see the{' '} TypoScript reference .

), /* ──────────────────────────────────────────────────────────────────────────── * 54. Kirby * ──────────────────────────────────────────────────────────────────────────── */ 'kirby': ( <>

Add Pulse to your Kirby site via a PHP snippet.

Add the Pulse Script to Your Header Snippet

Edit site/snippets/header.php or{' '} site/templates/default.php and add the Pulse script before the closing </head> tag.

{` <?= $page->title() ?> `}

For more details, see the{' '} Kirby snippets docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 55. Grav * ──────────────────────────────────────────────────────────────────────────── */ 'grav': ( <>

Add Pulse to your Grav site via Twig templates.

Add the Pulse Script to Your Base Template

Edit your theme's base template at{' '} templates/partials/base.html.twig and add the Pulse script inside the head block.

{` {% block head %} {{ page.title }} {% endblock %} {% block content %}{% endblock %} `}

For more details, see the{' '} Grav Twig docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 56. Umbraco * ──────────────────────────────────────────────────────────────────────────── */ 'umbraco': ( <>

Add Pulse to your Umbraco site via a Razor layout view.

Add the Pulse Script to Your Layout

Edit Views/Shared/_Layout.cshtml and add the Pulse script before the closing </head> tag. Use an environment tag guard to only load in production.

{` @ViewData["Title"] @RenderBody() `}

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

), /* ──────────────────────────────────────────────────────────────────────────── * 57. Storyblok * ──────────────────────────────────────────────────────────────────────────── */ 'storyblok': ( <>

Storyblok is a headless CMS — add Pulse to the frontend that renders your Storyblok content.

Add Pulse to Your Frontend

Since Storyblok is a headless CMS, the analytics script goes in your frontend framework. Follow the guide for your framework:

For more details, see the{' '} Storyblok docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 58. Prismic * ──────────────────────────────────────────────────────────────────────────── */ 'prismic': ( <>

Prismic is a headless CMS — add Pulse to the frontend that displays your Prismic content.

Add Pulse to Your Frontend

Since Prismic is a headless CMS, the analytics script goes in your frontend framework. Follow the guide for your framework:

For more details, see the{' '} Prismic docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 59. Shopware * ──────────────────────────────────────────────────────────────────────────── */ 'shopware': ( <>

Add Pulse to your Shopware 6 store via theme template.

Add the Pulse Script to Your Theme

Edit{' '} Resources/views/storefront/layout/meta.html.twig in your theme and add the Pulse script in the base_header block.

{`{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %} {% block base_header %} {{ parent() }} {% endblock %}`}

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

), /* ──────────────────────────────────────────────────────────────────────────── * 60. Magento / Adobe Commerce * ──────────────────────────────────────────────────────────────────────────── */ 'magento': ( <>

Add Pulse to your Magento / Adobe Commerce store via layout XML.

Method 1: Layout XML

Add the Pulse script to your theme's layout XML at{' '} app/design/frontend/YOUR_THEME/default/Magento_Theme/layout/default_head_blocks.xml.

{` `}

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

), /* ──────────────────────────────────────────────────────────────────────────── * 61. Bubble * ──────────────────────────────────────────────────────────────────────────── */ 'bubble': ( <>

Add Pulse to your Bubble app via the SEO / Meta tags section.

Add the Pulse Script via Settings

Go to Settings → SEO / Metatags → Script/meta tags in header and paste the Pulse script.

{``}

For more details, see the{' '} Bubble settings docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 62. Discourse * ──────────────────────────────────────────────────────────────────────────── */ 'discourse': ( <>

Add Pulse to your Discourse forum via admin customization.

Add the Pulse Script via Theme Customization

Go to Admin → Customize → Themes → Edit CSS/HTML and add the Pulse script in the{' '} </head> section.

{``}

For more details, see the{' '} Discourse themes guide .

), /* ──────────────────────────────────────────────────────────────────────────── * 63. HubSpot * ──────────────────────────────────────────────────────────────────────────── */ 'hubspot': ( <>

Add Pulse to your HubSpot-hosted pages via site settings.

Add the Pulse Script via Site Settings

Go to Settings → Website → Pages → Site Header HTML and paste the Pulse script.

{``}

Works for HubSpot CMS Free, Starter, Pro, and Enterprise.

For more details, see the{' '} HubSpot header code docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 64. Substack * ──────────────────────────────────────────────────────────────────────────── */ 'substack': ( <>

Substack supports custom domains. Add Pulse tracking for your custom domain.

Track Your Substack via a Custom Domain

Substack doesn't allow custom scripts directly. You can track your Substack via your custom domain by configuring Pulse to track the custom domain.

  1. Set up your custom domain in Substack.
  2. Add your custom domain in the Pulse dashboard.
  3. Pulse will automatically track page views on your custom domain.

For more details, see the{' '} Substack custom domain docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 65. Linktree * ──────────────────────────────────────────────────────────────────────────── */ 'linktree': ( <>

Add Pulse to your Linktree page via custom code (Business plan required).

Add the Pulse Script via Custom Meta Tags

Go to Settings → SEO → Custom Meta Tags and add the Pulse script to the head.

{``}

Note: Requires Linktree Business or Enterprise plan.

For more details, see{' '} Linktree Business .

), /* ──────────────────────────────────────────────────────────────────────────── * 66. Weebly * ──────────────────────────────────────────────────────────────────────────── */ 'weebly': ( <>

Add Pulse to your Weebly site via the header code settings.

Add the Pulse Script via SEO Settings

Go to Settings → SEO → Header Code and paste the Pulse script.

{``}

For more details, see the{' '} Weebly SEO docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 67. GitBook * ──────────────────────────────────────────────────────────────────────────── */ 'gitbook': ( <>

Add Pulse to your GitBook documentation site.

Add the Pulse Script via Custom Scripts

GitBook supports custom header integrations. Go to{' '} Space settings → Integrations → Custom scripts and add the Pulse script.

{``}

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

), /* ──────────────────────────────────────────────────────────────────────────── * 68. Gridsome * ──────────────────────────────────────────────────────────────────────────── */ 'gridsome': ( <>

Add Pulse to your Gridsome site via the HTML template or a plugin.

Method 1: HTML Template

Edit src/index.html and add the Pulse script to the head section.

{` \${head} \${app} `}

Method 2: Server Configuration

Use gridsome.server.js to inject the script programmatically.

{`module.exports = function (api) { api.afterBuild(({ queue }) => { // Script injection logic }) }`}

For more details, see the{' '} Gridsome head management docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 69. Read the Docs * ──────────────────────────────────────────────────────────────────────────── */ 'readthedocs': ( <>

Add Pulse to your Read the Docs documentation.

Add the Pulse Script via Sphinx Configuration

Create a custom template override. In your Sphinx{' '} conf.py, add the Pulse script as a JavaScript file.

{`html_js_files = [ ('https://pulse.ciphera.net/script.js', {'defer': 'defer', 'data-domain': 'your-site.com'}), ]`}

For more details, see the{' '} Read the Docs customization .

), /* ──────────────────────────────────────────────────────────────────────────── * 70. Sphinx * ──────────────────────────────────────────────────────────────────────────── */ 'sphinx': ( <>

Add Pulse to your Sphinx documentation via conf.py.

Add the Pulse Script via Configuration

In your conf.py, add the Pulse script using{' '} html_js_files.

{`html_js_files = [ ('https://pulse.ciphera.net/script.js', {'defer': 'defer', 'data-domain': 'your-site.com'}), ]`}

For more details, see the{' '} Sphinx html_js_files docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 71. ReadMe * ──────────────────────────────────────────────────────────────────────────── */ 'readme': ( <>

Add Pulse to your ReadMe API documentation portal.

Add the Pulse Script via Custom JavaScript

Go to Project Settings → Custom JavaScript and paste the Pulse script.

{``}

For more details, see the{' '} ReadMe custom JavaScript docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 72. Flutter Web * ──────────────────────────────────────────────────────────────────────────── */ 'flutter': ( <>

Add Pulse to your Flutter web application via{' '} web/index.html.

Add the Pulse Script to Your HTML Template

Edit web/index.html in your Flutter project and add the Pulse script to the <head> section.

{` My Flutter App `}

Note: This only applies to Flutter Web. For Flutter mobile apps, Pulse tracks web views only.

For more details, see the{' '} Flutter Web docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 73. Render * ──────────────────────────────────────────────────────────────────────────── */ 'render': ( <>

Add Pulse via your framework setup. Render deploys framework projects.

Follow Your Framework's Guide

The analytics script goes in your source code, not in Render's dashboard. Follow your framework's integration guide:

For more details, see the{' '} Render deployment docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 74. Firebase Hosting * ──────────────────────────────────────────────────────────────────────────── */ 'firebase': ( <>

Add Pulse to sites deployed on Firebase Hosting.

Add the Pulse Script to Your Source Code

Follow your framework's integration guide. The analytics script goes in your source code. Firebase Hosting serves static files, so add the script to your index.html or framework layout.

{` My App
`}

For more details, see the{' '} Firebase Hosting docs .

), /* ──────────────────────────────────────────────────────────────────────────── * 75. AMP * ──────────────────────────────────────────────────────────────────────────── */ 'amp': ( <>

Add Pulse to your AMP pages using the amp-analytics{' '} component.

Add Pulse via amp-analytics

AMP pages have restrictions on JavaScript. The{' '} amp-analytics component is the standard way to add analytics. Add the following to your AMP page.

{` `}

Note: AMP pages have restrictions on JavaScript. The{' '} amp-analytics component is the standard way to add analytics.

For more details, see the{' '} amp-analytics docs .

), } // * ─── Public API ───────────────────────────────────────────────────────────── export function getGuideContent(slug: string): ReactNode | undefined { return guides[slug] }