diff --git a/lib/integration-guides.tsx b/lib/integration-guides.tsx index 94b11be..43dba84 100644 --- a/lib/integration-guides.tsx +++ b/lib/integration-guides.tsx @@ -4,7 +4,7 @@ * Each guide is keyed by the integration slug and rendered on the * `/integrations/[slug]` page. * - * * 50 guides across 7 categories. + * * 75 guides across 7 categories. */ import { type ReactNode } from 'react' @@ -2623,6 +2623,964 @@ export default defineConfig({
> ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 51. Craft CMS + * ──────────────────────────────────────────────────────────────────────────── */ + 'craftcms': ( + <> ++ Add Pulse to your Craft CMS site by editing your Twig layout template. +
+ +
+ Edit your main Twig layout template at{' '}
+ templates/_layout.twig and add the Pulse script inside the{' '}
+ <head> section.
+
+ 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. +
+ +
+ Edit your Antlers layout at{' '}
+ resources/views/layout.antlers.html and add the Pulse
+ script inside the <head> section.
+
+ For more details, see the{' '} + + Statamic views docs + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 53. TYPO3 + * ──────────────────────────────────────────────────────────────────────────── */ + 'typo3': ( + <> ++ Add Pulse to your TYPO3 site via TypoScript setup. +
+ +
+ Add the following to your setup.typoscript file to inject
+ the Pulse script into the page header.
+
+ For more details, see the{' '} + + TypoScript reference + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 54. Kirby + * ──────────────────────────────────────────────────────────────────────────── */ + 'kirby': ( + <> ++ Add Pulse to your Kirby site via a PHP snippet. +
+ +
+ Edit site/snippets/header.php or{' '}
+ site/templates/default.php and add the Pulse script before
+ the closing </head> tag.
+
+ For more details, see the{' '} + + Kirby snippets docs + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 55. Grav + * ──────────────────────────────────────────────────────────────────────────── */ + 'grav': ( + <> ++ Add Pulse to your Grav site via Twig templates. +
+ +
+ Edit your theme's base template at{' '}
+ templates/partials/base.html.twig and add the Pulse script
+ inside the head block.
+
+ For more details, see the{' '} + + Grav Twig docs + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 56. Umbraco + * ──────────────────────────────────────────────────────────────────────────── */ + 'umbraco': ( + <> ++ Add Pulse to your Umbraco site via a Razor layout view. +
+ +
+ 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.
+
+ 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. +
+ ++ 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. +
+ ++ 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. +
+ +
+ Edit{' '}
+ Resources/views/storefront/layout/meta.html.twig in your
+ theme and add the Pulse script in the base_header block.
+
+ For more details, see the{' '} + + Shopware themes docs + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 60. Magento / Adobe Commerce + * ──────────────────────────────────────────────────────────────────────────── */ + 'magento': ( + <> ++ Add Pulse to your Magento / Adobe Commerce store via 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.
+
+ Go to Content → Design → Configuration → HTML + Head → Scripts and Style Sheets and paste the Pulse + script. +
++ For more details, see the{' '} + + Magento layout docs + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 61. Bubble + * ──────────────────────────────────────────────────────────────────────────── */ + 'bubble': ( + <> ++ Add Pulse to your Bubble app via the SEO / Meta tags section. +
+ ++ 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. +
+ +
+ 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. +
+ ++ 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. +
+ ++ Substack doesn't allow custom scripts directly. You can track your + Substack via your custom domain by configuring Pulse to track the 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). +
+ ++ 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. +
+ ++ 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. +
+ ++ 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. +
+ +
+ Edit src/index.html and add the Pulse script to the head
+ section.
+
+ Use gridsome.server.js to inject the script
+ programmatically.
+
+ For more details, see the{' '} + + Gridsome head management docs + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 69. Read the Docs + * ──────────────────────────────────────────────────────────────────────────── */ + 'readthedocs': ( + <> ++ Add Pulse to your Read the Docs documentation. +
+ +
+ Create a custom template override. In your Sphinx{' '}
+ conf.py, add the Pulse script as a JavaScript file.
+
+ For more details, see the{' '} + + Read the Docs customization + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 70. Sphinx + * ──────────────────────────────────────────────────────────────────────────── */ + 'sphinx': ( + <> +
+ Add Pulse to your Sphinx documentation via conf.py.
+
+ In your conf.py, add the Pulse script using{' '}
+ html_js_files.
+
+ For more details, see the{' '} + + Sphinx html_js_files docs + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 71. ReadMe + * ──────────────────────────────────────────────────────────────────────────── */ + 'readme': ( + <> ++ Add Pulse to your ReadMe API documentation portal. +
+ ++ 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.
+
+ Edit web/index.html in your Flutter project and add the
+ Pulse script to the <head> section.
+
+ 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. +
+ ++ 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. +
+ +
+ 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.
+
+ For more details, see the{' '} + + Firebase Hosting docs + . +
+ > + ), + + /* ──────────────────────────────────────────────────────────────────────────── + * 75. AMP + * ──────────────────────────────────────────────────────────────────────────── */ + 'amp': ( + <> +
+ Add Pulse to your AMP pages using the amp-analytics{' '}
+ component.
+
+ 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 ───────────────────────────────────────────────────────────── diff --git a/lib/integrations.tsx b/lib/integrations.tsx index 457c3dd..0c6c8fc 100644 --- a/lib/integrations.tsx +++ b/lib/integrations.tsx @@ -5,7 +5,7 @@ * ! SVG paths sourced from simple-icons (https://simpleicons.org). * ! All icons use a 24×24 viewBox. * - * * 50 integrations across 7 categories. + * * 75 integrations across 7 categories. */ import { type ReactNode } from 'react' @@ -891,6 +891,427 @@ export const integrations: Integration[] = [ 'Add Pulse analytics to your GitHub Pages site. Works with Jekyll, Hugo, or plain HTML.', relatedIds: ['jekyll', 'hugo', 'netlify'], }, + + // * ─── CMS & Blogging (continued) ────────────────────────────────────────── + { + id: 'craftcms', + name: 'Craft CMS', + description: 'Add Pulse to your Craft CMS site with a simple template tag.', + category: 'cms', + brandColor: '#E5422B', + icon: ( + + ), + officialUrl: 'https://craftcms.com/docs', + seoDescription: + 'Add Pulse analytics to your Craft CMS site via Twig templates. Simple installation.', + relatedIds: ['wordpress', 'statamic', 'drupal'], + }, + { + id: 'statamic', + name: 'Statamic', + description: 'Integrate Pulse with your Statamic site via Antlers templates.', + category: 'cms', + brandColor: '#FF269E', + icon: ( + + ), + officialUrl: 'https://statamic.dev/docs', + seoDescription: + 'Add Pulse analytics to your Statamic site. Antlers template integration.', + relatedIds: ['craftcms', 'laravel', 'wordpress'], + }, + { + id: 'typo3', + name: 'TYPO3', + description: 'Add Pulse to your TYPO3 site via TypoScript or Fluid templates.', + category: 'cms', + brandColor: '#FF8700', + icon: ( + + ), + officialUrl: 'https://docs.typo3.org', + seoDescription: + 'Add Pulse analytics to your TYPO3 CMS site. TypoScript and Fluid template integration.', + relatedIds: ['wordpress', 'drupal', 'joomla'], + }, + { + id: 'kirby', + name: 'Kirby', + description: 'Add Pulse to your Kirby site via PHP snippets.', + category: 'cms', + brandColor: '#000000', + invertInDark: true, + icon: ( + + ), + officialUrl: 'https://getkirby.com/docs', + seoDescription: + 'Add Pulse analytics to your Kirby CMS site. Simple PHP snippet integration.', + relatedIds: ['craftcms', 'statamic', 'grav'], + }, + { + id: 'grav', + name: 'Grav', + description: 'Add Pulse to your Grav site via Twig templates.', + category: 'cms', + brandColor: '#221E1F', + invertInDark: true, + icon: ( + + ), + officialUrl: 'https://learn.getgrav.org', + seoDescription: + 'Add Pulse analytics to your Grav flat-file CMS. Twig template integration.', + relatedIds: ['kirby', 'craftcms', 'hugo'], + }, + { + id: 'umbraco', + name: 'Umbraco', + description: 'Add Pulse to your Umbraco site via Razor views.', + category: 'cms', + brandColor: '#3544B1', + icon: ( + + ), + officialUrl: 'https://docs.umbraco.com', + seoDescription: + 'Add Pulse analytics to your Umbraco CMS site. Razor view integration for .NET.', + relatedIds: ['wordpress', 'drupal', 'typo3'], + }, + { + id: 'storyblok', + name: 'Storyblok', + description: 'Add Pulse to the frontend of your Storyblok-powered site.', + category: 'cms', + brandColor: '#09B3AF', + icon: ( + + ), + officialUrl: 'https://www.storyblok.com/docs', + seoDescription: + 'Add Pulse analytics to your Storyblok-powered frontend application.', + relatedIds: ['contentful', 'prismic', 'nextjs'], + }, + { + id: 'prismic', + name: 'Prismic', + description: 'Add Pulse to the frontend of your Prismic-powered site.', + category: 'cms', + brandColor: '#5163BA', + icon: ( + + ), + officialUrl: 'https://prismic.io/docs', + seoDescription: + 'Add Pulse analytics to your Prismic-powered frontend application.', + relatedIds: ['contentful', 'storyblok', 'nextjs'], + }, + + // * ─── eCommerce (continued) ─────────────────────────────────────────────── + { + id: 'shopware', + name: 'Shopware', + description: 'Add Pulse analytics to your Shopware 6 store.', + category: 'ecommerce', + brandColor: '#189EFF', + icon: ( + + ), + officialUrl: 'https://developer.shopware.com/docs', + seoDescription: + 'Add Pulse analytics to your Shopware 6 store via theme template.', + relatedIds: ['shopify', 'woocommerce', 'magento'], + }, + { + id: 'magento', + name: 'Magento', + description: 'Add Pulse analytics to your Magento / Adobe Commerce store.', + category: 'ecommerce', + brandColor: '#F46F25', + icon: ( + + ), + officialUrl: 'https://developer.adobe.com/commerce', + seoDescription: + 'Add Pulse analytics to your Magento or Adobe Commerce store via layout XML.', + relatedIds: ['shopify', 'woocommerce', 'shopware'], + }, + + // * ─── Platforms & Tools (continued) ─────────────────────────────────────── + { + id: 'bubble', + name: 'Bubble', + description: 'Add Pulse to your Bubble no-code application.', + category: 'platform', + brandColor: '#000000', + invertInDark: true, + icon: ( + + ), + officialUrl: 'https://manual.bubble.io', + seoDescription: + 'Add Pulse analytics to your Bubble no-code app via the SEO/Meta tags section.', + relatedIds: ['webflow', 'framer', 'wix'], + }, + { + id: 'discourse', + name: 'Discourse', + description: 'Add Pulse to your Discourse community forum.', + category: 'platform', + brandColor: '#000000', + invertInDark: true, + icon: ( + + ), + officialUrl: 'https://meta.discourse.org/docs', + seoDescription: + 'Add Pulse analytics to your Discourse forum via admin customization.', + relatedIds: ['wordpress', 'ghost'], + }, + { + id: 'hubspot', + name: 'HubSpot', + description: 'Add Pulse to your HubSpot-hosted pages.', + category: 'platform', + brandColor: '#FF7A59', + icon: ( + + ), + officialUrl: 'https://knowledge.hubspot.com', + seoDescription: + 'Add Pulse analytics to HubSpot landing pages and website via Settings.', + relatedIds: ['wordpress', 'webflow'], + }, + { + id: 'substack', + name: 'Substack', + description: 'Add Pulse to your Substack publication with a custom domain.', + category: 'platform', + brandColor: '#FF6719', + icon: ( + + ), + officialUrl: 'https://substack.com', + seoDescription: + 'Add Pulse analytics to your Substack publication using custom domain settings.', + relatedIds: ['ghost', 'blogger', 'wordpress'], + }, + { + id: 'linktree', + name: 'Linktree', + description: 'Add Pulse to your Linktree page via custom code.', + category: 'platform', + brandColor: '#43E55E', + icon: ( + + ), + officialUrl: 'https://linktr.ee', + seoDescription: + 'Add Pulse analytics to your Linktree link-in-bio page.', + relatedIds: ['carrd', 'framer', 'webflow'], + }, + { + id: 'weebly', + name: 'Weebly', + description: 'Add Pulse to your Weebly site via header code.', + category: 'platform', + brandColor: '#2C5CC5', + icon: ( + + ), + officialUrl: 'https://www.weebly.com', + seoDescription: + 'Add Pulse analytics to your Weebly website via the header code settings.', + relatedIds: ['squarespace', 'wix', 'webflow'], + }, + + // * ─── Static Sites & Documentation (continued) ─────────────────────────── + { + id: 'gitbook', + name: 'GitBook', + description: 'Add Pulse to your GitBook documentation site.', + category: 'ssg', + brandColor: '#BBDDE5', + icon: ( + + ), + officialUrl: 'https://docs.gitbook.com', + seoDescription: + 'Add Pulse analytics to your GitBook-hosted documentation.', + relatedIds: ['docusaurus', 'readme', 'readthedocs'], + }, + { + id: 'gridsome', + name: 'Gridsome', + description: 'Add Pulse to your Gridsome static site.', + category: 'ssg', + brandColor: '#00A672', + icon: ( + + ), + officialUrl: 'https://gridsome.org/docs', + seoDescription: + 'Add Pulse analytics to your Gridsome Vue-based static site.', + relatedIds: ['gatsby', 'vue', 'nuxt'], + }, + { + id: 'readthedocs', + name: 'Read the Docs', + description: 'Add Pulse to your Read the Docs documentation.', + category: 'ssg', + brandColor: '#000000', + invertInDark: true, + icon: ( + + ), + officialUrl: 'https://docs.readthedocs.io', + seoDescription: + 'Add Pulse analytics to your Read the Docs documentation site.', + relatedIds: ['sphinx', 'mkdocs', 'docusaurus'], + }, + { + id: 'sphinx', + name: 'Sphinx', + description: 'Add Pulse to your Sphinx documentation via conf.py.', + category: 'ssg', + brandColor: '#000000', + invertInDark: true, + icon: ( + + ), + officialUrl: 'https://www.sphinx-doc.org', + seoDescription: + 'Add Pulse analytics to your Sphinx-generated documentation.', + relatedIds: ['readthedocs', 'mkdocs', 'docusaurus'], + }, + { + id: 'readme', + name: 'ReadMe', + description: 'Add Pulse to your ReadMe API documentation.', + category: 'ssg', + brandColor: '#018EF5', + icon: ( + + ), + officialUrl: 'https://docs.readme.com', + seoDescription: + 'Add Pulse analytics to your ReadMe API documentation portal.', + relatedIds: ['gitbook', 'docusaurus', 'readthedocs'], + }, + + // * ─── JavaScript Frameworks (continued) ─────────────────────────────────── + { + id: 'flutter', + name: 'Flutter', + description: 'Add Pulse to your Flutter web application.', + category: 'framework', + brandColor: '#02569B', + icon: ( + + ), + officialUrl: 'https://docs.flutter.dev', + seoDescription: + 'Add Pulse analytics to your Flutter web app via web/index.html.', + relatedIds: ['react', 'angular', 'preact'], + }, + + // * ─── Hosting & Deployment (continued) ──────────────────────────────────── + { + id: 'render', + name: 'Render', + description: 'Deploy with Pulse analytics on Render.', + category: 'hosting', + brandColor: '#000000', + invertInDark: true, + icon: ( + + ), + officialUrl: 'https://docs.render.com', + seoDescription: + 'Add Pulse analytics to sites deployed on Render. Works with any framework.', + relatedIds: ['netlify', 'vercel', 'cloudflare-pages'], + }, + { + id: 'firebase', + name: 'Firebase Hosting', + description: 'Deploy with Pulse analytics on Firebase Hosting.', + category: 'hosting', + brandColor: '#DD2C00', + icon: ( + + ), + officialUrl: 'https://firebase.google.com/docs/hosting', + seoDescription: + 'Add Pulse analytics to sites deployed on Firebase Hosting.', + relatedIds: ['netlify', 'vercel', 'render'], + }, + + // * ─── Platforms & Tools (continued) ─────────────────────────────────────── + { + id: 'amp', + name: 'Google AMP', + description: 'Add Pulse to your AMP (Accelerated Mobile Pages) site.', + category: 'platform', + brandColor: '#005AF0', + icon: ( + + ), + officialUrl: 'https://amp.dev/documentation', + seoDescription: + 'Add Pulse analytics to Google AMP pages using amp-analytics.', + relatedIds: ['gtm', 'wordpress', 'webflow'], + }, ] // * ─── Helpers ────────────────────────────────────────────────────────────────